/* Steven D Studio (stevendstudio.com). Dark, product-launch style (option B, picked by the user 2026-11-09);
   the opening is option 3 (giant type, 3D phones, spotlight), picked on 9 Nov. */
:root { --bg:#000; --ink:#f5f5f7; --soft:#a1a1a6; --rule:#2a2a2d; --accent:#2f7bff; --max:1180px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html, body { overflow-x:clip; }
body { background:var(--bg); color:var(--ink); font:400 17px/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }
h1, h2, h3 { font-family:"Inter Tight", "Inter", sans-serif; letter-spacing:-0.035em; }

.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px max(24px, calc((100vw - var(--max))/2)); background:rgba(0,0,0,.7); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid rgba(255,255,255,.08); }
.brand { font-family:"Inter Tight", sans-serif; font-weight:700; font-size:19px; text-decoration:none; letter-spacing:-0.02em; }
.links { display:flex; gap:26px; font-size:14px; }
.links a { text-decoration:none; color:var(--soft); }
.links a:hover { color:var(--ink); }
.links .login { color:#fff; background:var(--accent); padding:6px 14px; border-radius:999px; font-weight:600; }

main > section { max-width:var(--max); margin:0 auto; padding:0 24px; }
.kicker { font-size:14px; font-weight:600; color:var(--accent); margin-bottom:12px; }
h2 { font-size:clamp(40px, 5.6vw, 76px); line-height:1; font-weight:700; margin-bottom:48px; }

.btn { display:inline-block; padding:15px 28px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.btn.primary { background:var(--accent); color:#fff; box-shadow:0 10px 40px -10px rgba(47,123,255,.8); }
.btn.primary:hover { transform:translateY(-2px); }
.btn.ghost { color:var(--ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }


.promises { margin-top:20px !important; }
.promises ul { list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); }
.promises li { padding:34px 26px; border-left:1px solid var(--rule); display:flex; flex-direction:column; gap:4px; }
.promises li:first-child { border-left:0; padding-left:0; }
.promises .big { font-family:"Inter Tight", sans-serif; font-size:56px; font-weight:800; letter-spacing:-0.04em; line-height:1; background:linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promises .what { font-weight:600; margin-top:8px; }
.promises .why { color:var(--soft); font-size:15px; }

.work, .prices, .how, .agreement, .about, .contact { padding-top:150px !important; }
.project { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:30px 0 60px; }
.project h3 { font-size:48px; font-weight:700; margin-bottom:14px; }
.project p { color:var(--soft); font-size:19px; margin-bottom:14px; }
.project .meta { color:var(--ink); font-size:14px; font-weight:600; }
.arrow { color:var(--accent); font-weight:600; text-decoration:none; }
.arrow::after { content:" ›"; }

.price-list { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); }
.price-list li { padding:8px 36px 10px; border-left:1px solid var(--rule); display:flex; flex-direction:column; }
.price-list li:first-child { border-left:0; padding-left:0; }
.p-name { order:1; }
.p-name h3 { font-size:22px; font-weight:600; letter-spacing:-0.01em; }
.p-amount { order:2; font-family:"Inter Tight", sans-serif; font-size:72px; font-weight:800; letter-spacing:-0.05em; line-height:1.1; margin:12px 0 4px; }
.p-amount small { font-size:18px; font-weight:500; color:var(--soft); letter-spacing:0; }
.alt { color:var(--accent); font-size:15px; margin-top:4px; }
.p-incl { order:3; color:var(--soft); font-size:15px; margin-top:18px; }

.how ol { list-style:none; counter-reset:s; display:grid; grid-template-columns:repeat(5, 1fr); gap:0; }
.how li { counter-increment:s; padding:0 22px; border-left:1px solid var(--rule); }
.how li:first-child { border-left:0; padding-left:0; }
.how li::before { content:"0" counter(s); display:block; color:var(--accent); font-weight:700; font-size:14px; margin-bottom:16px; }
.how h3 { font-size:19px; font-weight:600; letter-spacing:-0.01em; margin-bottom:8px; }
.how p { color:var(--soft); font-size:15px; }

.agreement dl { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; }
.agreement dl div { padding:26px 0; border-top:1px solid var(--rule); }
.agreement dt { font-weight:700; font-size:19px; margin-bottom:6px; }
.agreement dd { color:var(--soft); }

.about { display:grid; grid-template-columns:260px 1fr; gap:60px; align-items:center; }
.portrait { width:260px; aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(47,123,255,.6); }
.about h2 { margin-bottom:20px; }
.about p { color:var(--soft); font-size:19px; max-width:620px; margin-bottom:16px; }

.contact { text-align:center; padding-bottom:150px !important; }
.contact h2 { margin-bottom:16px; }
.contact p { color:var(--soft); font-size:19px; margin-bottom:32px; }

.foot { border-top:1px solid var(--rule); padding:34px max(24px, calc((100vw - var(--max))/2)); color:var(--soft); font-size:13px; display:flex; gap:28px; flex-wrap:wrap; }

@media (max-width:760px) {
  .links a:not(.login) { display:none; }
  .promises ul, .price-list, .agreement dl { grid-template-columns:1fr; }
  .promises li, .price-list li { border-left:0; padding-left:0; border-top:1px solid var(--rule); }
  .project { grid-template-columns:1fr; gap:30px; }
  .how ol { grid-template-columns:1fr; gap:26px; }
  .how li { border-left:0; padding-left:0; }
  .about { grid-template-columns:1fr; }
  .portrait { width:180px; }
  .work, .prices, .how, .agreement, .about, .contact { padding-top:100px !important; }
}

/* Sections rise into view (main.js adds .reveal, then .in). */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.promises li.reveal:nth-child(2), .how li.reveal:nth-child(2) { transition-delay:.08s; }
.promises li.reveal:nth-child(3), .how li.reveal:nth-child(3) { transition-delay:.16s; }
.promises li.reveal:nth-child(4), .how li.reveal:nth-child(4) { transition-delay:.24s; }
.how li.reveal:nth-child(5) { transition-delay:.32s; }
.price-list li.reveal:nth-child(2) { transition-delay:.1s; }
.price-list li.reveal:nth-child(3) { transition-delay:.2s; }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
a:focus-visible, .btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ── A realistic iPhone (15 Pro proportions): titanium edge, black bezel,
   Dynamic Island, side buttons and a little glass glare. Sized by --w;
   inside it 1em is 1% of the phone's width. ── */
.iphone { --w:280px; position:relative; display:block; width:var(--w); aspect-ratio:70.6/146.6; font-size:calc(var(--w) / 100); border-radius:17.4em; background:linear-gradient(145deg, #9a9aa0 0%, #45454a 14%, #1b1b1e 42%, #2c2c30 70%, #85858b 100%); box-shadow:inset 0 0 0 .22em rgba(255,255,255,.22), inset 0 0 .5em .2em rgba(0,0,0,.55), 0 4.5em 9em -3em rgba(0,0,0,.9), 0 1.5em 3em -1.5em rgba(0,0,0,.7); }
.iphone::before { content:""; position:absolute; inset:1em; border-radius:16.4em; background:#030303; box-shadow:inset 0 0 0 .25em #121214; }
.iphone .screen { position:absolute; inset:4.75em 4.3em; border-radius:12.8em; overflow:hidden; background:#000; container-type:inline-size; }
.iphone .screen > img { width:100%; height:100%; object-fit:cover; object-position:top; }
.iphone .island { position:absolute; z-index:3; top:7.3em; left:50%; width:29.3em; height:8.6em; margin-left:-14.65em; border-radius:99em; background:#000; }
.iphone .island::after { content:""; position:absolute; right:3em; top:50%; width:2.8em; height:2.8em; margin-top:-1.4em; border-radius:50%; background:radial-gradient(circle at 38% 35%, #34405e 0, #10131c 45%, #050608 70%); }
.iphone .glare { position:absolute; z-index:4; inset:4.75em 4.3em; border-radius:12.8em; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 40%); }
.iphone .key { position:absolute; width:1em; border-radius:.5em; background:linear-gradient(90deg, #2b2b2f, #8d8d93 55%, #3a3a3e); }
.iphone .k-action { left:-.7em; top:17.5%; height:6%; }
.iphone .k-up { left:-.7em; top:27%; height:10%; }
.iphone .k-down { left:-.7em; top:39%; height:10%; }
.iphone .k-side { right:-.7em; top:30%; height:15.5%; }

/* ── Opening: giant type behind two 3D phones, under a spotlight that
   follows the pointer (option 3). ── */
main > section.hero { max-width:none; padding:60px max(24px, calc((100vw - 1280px)/2)) 44px; }
.hero { position:relative; min-height:max(calc(100svh - 66px), 720px); display:flex; flex-direction:column; justify-content:flex-end; overflow:clip; isolation:isolate; }
.spot { position:absolute; inset:0; z-index:-2; background:radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(47,123,255,.22), transparent 60%), radial-gradient(900px circle at 50% 120%, rgba(47,123,255,.18), transparent 60%); }
.giant { position:absolute; left:0; right:0; top:50%; transform:translateY(-62%); z-index:-1; text-align:center; font-family:"Inter Tight", sans-serif; font-weight:800; font-size:clamp(110px, 23vw, 400px); line-height:.8; letter-spacing:-.07em; white-space:nowrap; pointer-events:none; }
.giant span { display:inline-block; background:linear-gradient(100deg, #2c2c33 20%, #6b98ff 40%, #ffffff 50%, #6b98ff 60%, #2c2c33 80%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 7s ease-in-out infinite, giantIn 1.4s cubic-bezier(.16,.84,.24,1) both; }
@keyframes sheen { 0% { background-position:100% 0; } 100% { background-position:-50% 0; } }
@keyframes giantIn { from { opacity:0; transform:translateY(80px) scale(.96); filter:blur(14px); } to { opacity:1; transform:none; filter:none; } }
.tilt { position:absolute; left:50%; top:40%; width:0; height:0; perspective:1400px; }
.ht-phone, .ht-phone2 { position:absolute; left:0; top:0; translate:-50% -50%; transform-style:preserve-3d; }
.ht-phone { --w:clamp(170px, min(17vw, 31svh), 270px); z-index:2; transform:rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)) rotateZ(-4deg); animation:phoneRise 1.6s .25s cubic-bezier(.16,.84,.24,1) both; }
.ht-phone2 { --w:clamp(140px, min(14vw, 26svh), 220px); z-index:1; transform:translateX(64%) translateZ(-180px) rotateY(calc(var(--ry, -16deg) + 26deg)) rotateZ(6deg); filter:brightness(.8); animation:phoneRise2 1.6s .45s cubic-bezier(.16,.84,.24,1) both; }
@keyframes phoneRise { from { opacity:0; transform:translateY(140px) rotateY(-40deg) rotateX(20deg) rotateZ(-10deg); } to { opacity:1; transform:rotateY(var(--ry, -16deg)) rotateX(var(--rx, 6deg)) rotateZ(-4deg); } }
@keyframes phoneRise2 { from { opacity:0; transform:translateX(20%) translateY(160px) translateZ(-180px) rotateY(10deg); } to { opacity:1; transform:translateX(64%) translateZ(-180px) rotateY(calc(var(--ry, -16deg) + 26deg)) rotateZ(6deg); } }
.ht-copy { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; animation:rise 1s .5s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow { font-size:15px; font-weight:600; color:var(--accent); margin-bottom:16px; }
h1 { font-size:clamp(32px, 3.3vw, 52px); line-height:1; font-weight:800; max-width:680px; background:linear-gradient(180deg, #fff 30%, #9a9aa0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-size:17px; color:var(--soft); margin:0 0 22px; }
.ctas { display:flex; gap:14px; flex-wrap:wrap; }
.contact .ctas { justify-content:center; }

/* ── Before and after: a dated bakery website wipes into its redesign, with
   the bakery's app beside it. A made-up bakery; the photos are free to use
   (assets/sample/README.md). ── */
/* The comparison is the point, so it gets the screen: a short heading, and
   the browser sized to fit the window's height (the user, 9 Nov: "too much
   focus on text"). */
.compare { min-height:calc(100svh - 66px); display:flex; flex-direction:column; justify-content:center; padding-top:48px !important; padding-bottom:48px; }
.compare-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; width:min(100%, calc((100svh - 300px) * 1.6)); margin:0 auto 22px; }
.compare-head h2 { font-size:clamp(26px, 2.6vw, 38px); margin:0; }
.compare-sub { color:var(--soft); font-size:15px; }
.ba-stage { position:relative; width:min(100%, calc((100svh - 300px) * 1.6)); margin:0 auto; }
.browser { border-radius:12px; overflow:hidden; background:#1c1c1e; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 50px 100px -40px rgba(0,0,0,.9); }
.bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#2a2a2d; }
.bar > i { width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.bar > i:nth-child(2) { background:#febc2e; } .bar > i:nth-child(3) { background:#28c840; }
.url { margin:0 auto; display:flex; align-items:center; gap:7px; font-size:13px; color:#d2d2d7; background:#1c1c1e; padding:5px 22px; border-radius:7px; }
.url svg { width:9px; height:11px; color:#9a9aa0; }
.view { position:relative; aspect-ratio:128/80; overflow:hidden; container-type:inline-size; --p:50%; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize; }
.old, .new { position:absolute; inset:0; font-size:calc(100cqw / 128); }
.view img { pointer-events:none; }

/* Before: a 2012 site, the kind many local businesses still have. */
.old { background:#cfc3a6 repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 .8em, transparent .8em 1.6em); color:#000; font-family:"Times New Roman", Times, serif; }
.o-page { position:relative; width:96em; height:100%; margin:0 auto; background:#fffdf2; border-left:.3em solid #8b5a2b; border-right:.3em solid #8b5a2b; }
.o-head { background:linear-gradient(#f9d98b, #dc9a3a); text-align:center; padding:2em 0 1.4em; border-bottom:.5em double #8b4513; }
.o-head span { font:bold 5.4em "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; color:#a3290e; text-shadow:.05em .05em 0 #fff, .1em .1em 0 #6b3a12; }
.o-head small { display:block; font:italic 1.9em "Times New Roman", serif; color:#5a2d0c; margin-top:.2em; }
.o-nav { display:flex; justify-content:center; background:linear-gradient(#9b5523, #7a3f15); }
.o-nav a { font:bold 1.45em Verdana, Arial, sans-serif; color:#ffec8f; padding:.65em 1.1em; border-right:.08em solid #c88a4a; text-decoration:underline; }
.o-marq { background:#ffff66; color:#d00000; font:bold 1.5em Arial, sans-serif; padding:.35em 0; white-space:nowrap; overflow:hidden; border-bottom:.08em solid #999; }
.o-marq span { display:inline-block; padding-left:100%; animation:marq 18s linear infinite; }
@keyframes marq { to { transform:translateX(-100%); } }
.o-body { display:flex; gap:2.4em; padding:2.4em 2.8em; }
.o-main { flex:1; font-size:1.7em; line-height:1.35; }
.o-h { font:bold 1.5em "Times New Roman", serif; color:#a3290e; text-decoration:underline; margin-bottom:.5em; }
.o-img { float:right; width:10em; height:6.9em; object-fit:cover; border:.22em ridge #c9a66b; margin:.2em 0 .5em .8em; }
.o-main p { margin-bottom:.75em; }
.o-new { color:#d00000; }
.o-side { width:25em; font-family:Verdana, Arial, sans-serif; }
.o-side table { width:100%; font-size:1.4em; border:.15em outset #c9a66b; background:#fff3cf; }
.o-side th { background:#8b4513; color:#ffec8f; padding:.3em; }
.o-side td { padding:.25em .4em; border:.06em solid #e2c98f; }
.o-count { font-size:1.3em; color:#444; margin-top:1.4em; text-align:center; }
.o-count b { font-family:"Courier New", monospace; background:#000; color:#39ff14; padding:0 .3em; letter-spacing:.12em; }
.o-foot { position:absolute; left:0; right:0; bottom:0; text-align:center; font:1.2em Arial, sans-serif; color:#555; padding:.8em; border-top:.08em solid #ccc; background:#f1ead2; }

/* After: the same bakery, redesigned. Young Serif and Archivo, square
   buttons, and a photo that slowly drifts. */
.new { clip-path:inset(0 0 0 var(--p)); background:#f4eee4; color:#241b15; font-family:"Archivo", sans-serif; }
.n-nav { display:flex; align-items:center; gap:3.6em; height:8.4em; padding:0 5.6em; border-bottom:.1em solid rgba(36,27,21,.14); }
.n-logo { display:flex; align-items:baseline; gap:1.2em; }
.n-logo b { font-family:"Young Serif", Georgia, serif; font-weight:400; font-size:3.1em; letter-spacing:-.01em; }
.n-logo span { font-size:1.1em; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#7a6d63; }
.n-links { display:flex; gap:3.2em; margin-left:auto; }
.n-links span { font-size:1.45em; color:#3b2f27; }
.n-cta { font-size:1.2em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:#241b15; color:#f4eee4; padding:1.15em 1.8em; }
.n-hero { display:grid; grid-template-columns:1.06fr 1fr; gap:5.6em; padding:5em 5.6em 0; }
.n-eye { font-size:1.2em; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#a4501f; margin:1.6em 0 1.8em; }
.n-h { font-family:"Young Serif", Georgia, serif; font-weight:400; font-size:6.8em; line-height:1.02; letter-spacing:-.025em; margin-bottom:.34em; }
.n-p { font-size:1.75em; line-height:1.5; color:#6e6158; max-width:23em; margin-bottom:1.9em; }
.n-btns { display:flex; align-items:center; gap:2.6em; margin-bottom:3em; }
.n-btn { font-size:1.25em; font-weight:600; letter-spacing:.08em; text-transform:uppercase; background:#a4501f; color:#fff; padding:1.2em 1.9em; }
.n-link { font-size:1.45em; font-weight:500; border-bottom:.1em solid; padding-bottom:.12em; }
.n-open { font-size:1.35em; color:#3b2f27; }
.n-photo { position:relative; height:43em; }
.n-frame { width:100%; height:100%; overflow:hidden; }
.n-frame img { width:100%; height:100%; object-fit:cover; animation:drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform:scale(1.02); } to { transform:scale(1.09) translate(-1%, -1%); } }
.n-card { position:absolute; right:-3.6em; bottom:3.4em; display:flex; align-items:center; gap:1.3em; background:#fff; padding:1.1em 2.2em 1.1em 1.1em; border:.1em solid rgba(36,27,21,.12); box-shadow:0 1.2em 3em -1.6em rgba(36,27,21,.35); }
.n-card img { width:5.4em; height:5.4em; object-fit:cover; }
.n-card b { display:block; font-size:1.5em; font-weight:600; } .n-card span { font-size:1.25em; color:#7a6d63; }
.n-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:2.4em; padding:4em 5.6em 0; }
.n-item img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.n-item p { display:flex; justify-content:space-between; margin-top:1em; font-size:1.45em; }
.n-item b { font-weight:500; } .n-item span { color:#7a6d63; }

.handle { position:absolute; z-index:2; top:0; bottom:0; left:var(--p); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.35); }
.handle span { position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.handle span::before, .handle span::after { content:""; position:absolute; top:50%; border:6px solid transparent; margin-top:-6px; }
.handle span::before { left:7px; border-right-color:#111; }
.handle span::after { right:7px; border-left-color:#111; }
.handle:focus-visible span { outline:2px solid var(--accent); outline-offset:3px; }
.tag { position:absolute; z-index:2; top:calc(11% + 6px); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.7); color:#fff; pointer-events:none; }
.t-old { left:12px; } .t-new { right:60px; background:#b3541e; }

.ba-phone { --w:230px; position:absolute; right:-200px; bottom:-48px; z-index:3; transform:rotate(4deg); }
@media (max-width:1300px) { .ba-phone { right:-90px; } }

/* The bakery's app. Inside .app, 1em is 10 points of a 393-point screen. */
.app { position:absolute; inset:0; display:flex; flex-direction:column; font-size:calc(100cqw / 39.3); background:#f6f0e7; color:#231a14; font-family:"Archivo", sans-serif; text-align:left; }
.a-note { position:absolute; z-index:5; left:1em; right:1em; top:1.1em; display:flex; align-items:center; gap:1em; padding:1.1em 1.2em; border-radius:2.2em; background:rgba(250,246,240,.9); -webkit-backdrop-filter:blur(1.2em); backdrop-filter:blur(1.2em); box-shadow:0 1em 3em rgba(0,0,0,.28); transform:translateY(-160%); animation:notify 11s 2.6s cubic-bezier(.2,.9,.25,1) infinite; }
.a-note-ico { flex:none; width:3.8em; height:3.8em; border-radius:.9em; background:#2b1d14; display:grid; place-items:center; }
.a-note-ico span { color:#f3e9da; font-family:"Young Serif", Georgia, serif; font-size:2em; }
.a-note p { flex:1; min-width:0; }
.a-note b { display:block; font-size:1.3em; font-weight:600; }
.a-note p span { display:block; font-size:1.25em; line-height:1.3; color:#3b2f27; }
.a-note em { align-self:flex-start; font-style:normal; font-size:1.1em; color:#8b7f76; }
@keyframes notify { 0%, 6% { transform:translateY(-160%); } 11%, 46% { transform:none; } 52%, 100% { transform:translateY(-160%); } }
.a-status { display:flex; align-items:center; justify-content:space-between; height:5.4em; padding:.3em 2.8em 0 3.4em; }
.a-status b { font-size:1.7em; font-weight:600; }
.a-icons { display:flex; align-items:center; gap:.6em; }
.a-icons svg { height:1.2em; width:auto; fill:currentColor; }
.a-top { display:flex; align-items:center; justify-content:space-between; padding:.6em 2em 0; }
.a-logo { font-family:"Young Serif", Georgia, serif; font-size:2.3em; }
.a-av { width:3.4em; height:3.4em; border-radius:50%; background:#e6dacb; display:grid; place-items:center; }
.a-av span { font-size:1.3em; font-weight:600; color:#6e6158; }
.a-hello { padding:1.4em 2em 0; }
.a-hello b { font-family:"Young Serif", Georgia, serif; font-size:3em; font-weight:400; letter-spacing:-.02em; }
.a-card { margin:1.6em 2em 0; padding:2em; border-radius:2.2em; color:#f6f0e7; background:radial-gradient(120% 90% at 90% 0%, #5c3b24 0%, #2b1d14 62%); box-shadow:0 1.4em 2.6em -1.4em rgba(43,29,20,.7); }
.a-card-top { display:flex; justify-content:space-between; align-items:baseline; }
.a-card-top span { font-size:1.1em; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.a-card-top b { font-family:"Young Serif", Georgia, serif; font-size:2em; }
.stamps { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2em; margin:1.8em 0; }
.stamps i { aspect-ratio:1; border-radius:50%; border:.16em dashed rgba(246,240,231,.35); }
.stamps i.on { border:0; background:#f6f0e7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z' fill='%235c3b24'/%3E%3Cpath d='M16 10h1.5a2.5 2.5 0 0 1 0 5H16' fill='none' stroke='%235c3b24' stroke-width='1.8'/%3E%3Cpath d='M8 3.5c0 1 1 1 1 2M11.5 3.5c0 1 1 1 1 2' fill='none' stroke='%235c3b24' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 54% no-repeat; animation:stamp .4s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stamp { from { transform:scale(.2); opacity:0; } to { transform:none; opacity:1; } }
.a-card-foot { display:flex; justify-content:space-between; align-items:center; }
.a-card-foot > span:first-child { font-size:1.4em; }
.a-pill { background:rgba(246,240,231,.14); border-radius:.5em; padding:.6em 1.2em; }
.a-pill span { font-size:1.2em; font-weight:600; }
.a-sec { display:flex; justify-content:space-between; align-items:baseline; padding:2.4em 2em 1.2em; }
.a-sec b { font-size:2em; font-weight:700; letter-spacing:-.02em; }
.a-sec span { font-size:1.5em; color:#b3541e; }
.a-row { display:flex; gap:1.2em; padding-left:2em; overflow:hidden; }
.a-item { position:relative; flex:0 0 15.6em; }
.a-item img { width:100%; height:11.6em; object-fit:cover; border-radius:1.4em; }
.a-item b { display:block; font-size:1.45em; font-weight:600; margin-top:.6em; white-space:nowrap; }
.a-item span { font-size:1.35em; color:#7a6d63; }
.a-item i { position:absolute; right:.8em; top:8.6em; width:2.4em; height:2.4em; border-radius:50%; background:#fff; box-shadow:0 .3em .8em rgba(0,0,0,.2); }
.a-item i::before, .a-item i::after { content:""; position:absolute; left:50%; top:50%; width:1.1em; height:.18em; margin:-.09em 0 0 -.55em; background:#231a14; border-radius:.1em; }
.a-item i::after { transform:rotate(90deg); }
.a-tabs { position:relative; margin-top:auto; display:flex; justify-content:space-around; padding:.9em 1em 3.4em; border-top:.1em solid rgba(35,26,20,.1); background:rgba(246,240,231,.94); }
.a-tabs > span { display:flex; flex-direction:column; align-items:center; gap:.3em; color:#a0948a; }
.a-tabs > span.on { color:#b3541e; }
.a-tabs svg { width:2.5em; height:2.5em; fill:currentColor; }
.a-tabs em { font-style:normal; font-size:1em; font-weight:500; }
.a-tabs::after { content:""; position:absolute; left:50%; bottom:.8em; width:13.4em; height:.5em; margin-left:-6.7em; border-radius:99em; background:#231a14; }

/* ── Work: the real apps, running in the phones (main.js swaps the picture
   for the live demo on wide screens; on phones a tap opens it full screen). ── */
.project:nth-of-type(even) .device { order:2; }
.device { justify-self:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.device .iphone { --w:300px; }
/* A live app starts below a drawn status bar, as on a real phone (a web page
   has no safe area to keep it clear of the Dynamic Island). */
.iphone .screen iframe { position:absolute; left:0; top:6.34%; width:393px; height:798px; border:0; transform-origin:0 0; transform:scale(var(--k, .7)); background:#fff; }
.sbar { position:absolute; z-index:2; left:0; right:0; top:0; height:6.34%; display:none; align-items:center; justify-content:space-between; padding:0 7% 0 8.6%; font-size:calc(100cqw / 39.3); background:#fff; color:#000; }
.iphone.is-live .sbar { display:flex; }
.sbar b { font-size:1.7em; font-weight:600; }
.sbar span { display:flex; align-items:center; gap:.6em; }
.sbar svg { height:1.2em; width:auto; fill:currentColor; }
@media (prefers-color-scheme: dark) { .sbar { background:#000; color:#fff; } .iphone .screen iframe { background:#000; } }
.tap { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:18%; text-decoration:none; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
.tap span { background:#fff; color:#000; font-weight:600; font-size:15px; padding:10px 18px; border-radius:99px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.iphone.is-live .tap, .iphone.is-live .screen > img { display:none; }
.live-tag { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--soft); }
.live-tag i { width:8px; height:8px; border-radius:50%; background:#30d158; box-shadow:0 0 0 4px rgba(48,209,88,.18); }
.live-tag .w, .iphone.is-live ~ .live-tag .n { display:none; }
.iphone.is-live ~ .live-tag .w { display:inline; }

@media (max-width:900px) {
  .ba-stage { width:100%; padding-bottom:190px; }
  .ba-phone { --w:136px; right:4px; bottom:0; }
  .compare-head { width:100%; }
}
@media (max-width:760px) {
  main > section.hero { padding-top:40px; }
  .giant { font-size:29vw; top:36%; }
  .tilt { top:38%; }
  .ht-phone { --w:176px; }
  .ht-phone2 { --w:136px; }
  .ht-copy { grid-template-columns:1fr; gap:18px; margin-top:auto; padding-top:min(520px, 74vh); }
  .project:nth-of-type(even) .device { order:0; }
  .device .iphone { --w:250px; }
  .compare { min-height:0; padding-top:90px !important; }
  .compare-head { margin-bottom:18px; }
  .tag { top:calc(11% + 4px); font-size:9px; padding:4px 8px; }
  .t-new { right:10px; }
  .handle span { width:36px; height:36px; margin:-18px 0 0 -18px; }
}
@media (prefers-reduced-motion: reduce) { .giant span, .ht-phone, .ht-phone2, .ht-copy, .o-marq span, .stamps i.on, .n-frame img, .a-note { animation:none; } }