/* Demo homepage redesign: conventional layout on the shared tokens (styles.css) and footer/FAQ (extra.css). */
[id]{scroll-margin-top:72px}
.skip{position:absolute;left:16px;top:-60px;z-index:60;padding:12px 18px;border-radius:10px;background:var(--fg);color:var(--ink);font-weight:500;transition:top .2s}
.skip:focus{top:12px}
/* focus ring follows the control's shape instead of styles.css's pill */
.d-btn:focus-visible,.d-nav a:focus-visible,.d-menu a:focus-visible,.d-link:focus-visible,.foot-links a:focus-visible{border-radius:10px}
.d-menu summary:focus-visible{border-radius:10px}
html{scrollbar-color:rgba(255,226,236,.22) var(--ink)}

/* header */
.d-head{position:sticky;top:0;z-index:40;background:rgba(9,8,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.d-head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.d-head .brand{padding:0;min-height:44px}
.d-nav{display:flex;gap:4px;margin-left:auto}
.d-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14.5px;color:var(--fg-dim);border-radius:8px;transition:color .3s,background .3s}
.d-nav a:hover,.d-nav a[aria-current]{color:var(--fg);background:rgba(255,255,255,.05)}
.d-head .d-btn{margin-left:8px}
.d-menu{display:none;position:relative}
.d-menu summary{list-style:none;position:relative;width:44px;height:44px;border-radius:10px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line-hi)}
.d-menu summary::-webkit-details-marker{display:none}
.d-menu summary span{position:absolute;left:14px;width:16px;height:1.5px;background:var(--fg);transition:transform .3s,top .3s}
.d-menu summary span:first-child{top:18px}.d-menu summary span:last-child{top:25px}
.d-menu[open] summary span:first-child{top:21.5px;transform:rotate(45deg)}
.d-menu[open] summary span:last-child{top:21.5px;transform:rotate(-45deg)}
.d-menu nav{position:absolute;right:0;top:54px;min-width:220px;display:grid;padding:8px;border-radius:14px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-hi),0 24px 48px -16px rgba(0,0,0,.8)}
.d-menu nav a{padding:13px 14px;border-radius:8px;font-size:16px;color:var(--fg)}
.d-menu nav a:hover{background:rgba(255,255,255,.05)}

/* buttons: plain rectangles in the brand's ink and white */
.d-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:10px;font:500 16px/1 var(--display);white-space:nowrap;background:var(--fg);color:var(--ink);transition:background .3s,transform .3s}
.d-btn:hover{background:#fff}
@media (hover:hover){.d-btn:hover{transform:translateY(-1px)}}
.d-btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-hi)}
.d-btn.ghost:hover{background:rgba(255,255,255,.06)}
.d-btn.sm{min-height:44px;padding:0 16px;font-size:14.5px}
.d-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:5px;text-decoration-thickness:1.5px}
.d-link::after{content:"→";transition:transform .3s}
.d-link:hover::after{transform:translateX(3px)}

/* sections */
.d-sec{padding-block:clamp(64px,9vw,112px)}
.d-sec + .d-sec{border-top:1px solid var(--line)}
.d-title{max-width:640px;margin-bottom:clamp(32px,4.5vw,52px)}
.d-title.c{margin-inline:auto;text-align:center}
.d-title h2,.d-founder h2,.d-price h2{margin:0 0 14px;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.d-title p{margin:0;color:var(--fg-dim);font-size:17px}
.d-stats{display:grid;gap:14px;margin:28px 0 0;padding:20px 0 0;list-style:none;border-top:1px solid var(--line);font-size:15px;color:var(--fg-dim)}
.d-stats b{color:var(--fg);font-weight:600}
.d-stats a{color:var(--fg-mute);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* hero */
.d-hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,104px)}
.d-hero::before{content:"";position:absolute;inset:-30% -10% auto 35%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 40% at 60% 40%,rgba(255,157,181,.16),transparent 70%),radial-gradient(35% 35% at 80% 65%,rgba(184,163,255,.14),transparent 70%),radial-gradient(30% 30% at 45% 70%,rgba(255,207,143,.1),transparent 70%)}
.d-hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.d-hero h1{margin:0 0 22px;font-size:clamp(40px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.d-hero .lead{margin:0 0 22px;color:var(--fg-dim);font-size:clamp(17px,1.4vw,19px);max-width:52ch}
.d-ctas{display:flex;gap:12px;flex-wrap:wrap}
.d-byline{display:flex;align-items:center;gap:14px;margin:0 0 30px;max-width:52ch}
.d-byline img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 1px var(--line-hi)}
.d-byline p{margin:0;font-size:16px;color:var(--fg-dim)}
.d-byline a{color:var(--fg);font-weight:500;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:4px}
.d-plan li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309080d' stroke-width='3.2'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat,linear-gradient(135deg,var(--sun),var(--rose))}
.d-feature{margin:0}
.d-feature figcaption{margin-top:14px;font-size:14.5px;color:var(--fg-dim)}

/* framed screenshots of concept sites (images only, not links) */
.d-shot{display:block;border-radius:14px;overflow:hidden;background:var(--ink-2);box-shadow:0 0 0 1px var(--line-hi),0 40px 90px -40px rgba(0,0,0,.9)}
.d-shot .chrome{padding:11px 14px}
.d-shot .chrome em{font-size:12px}
.d-shot img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:top}
.tag-concept{display:inline-block;padding:3px 8px;border-radius:6px;font:500 12px/1.2 var(--display);color:var(--fg-dim);box-shadow:inset 0 0 0 1px var(--line-hi);vertical-align:1px}

/* heading beside content (services head, about) */
.d-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.d-split .d-title{margin-bottom:0}

/* services: heading row, then four live demo cards (palette, phone, search, chat) */
.d-svc-head{margin-bottom:clamp(32px,4.5vw,52px);align-items:end}
.d-svc-head .d-stats{margin:0;border-top:0;padding:0}
.d-live{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.d-livecard{grid-column:span 7;position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease)}
.d-livecard:nth-child(2),.d-livecard:nth-child(3){grid-column:span 5}
@media (hover:hover){.d-livecard:hover{box-shadow:inset 0 0 0 1px rgba(255,157,181,.4)}}
.d-livecard h3{margin:auto 0 0;padding-top:22px;font-size:20px;font-weight:500;letter-spacing:-.02em}
.d-livecard p{margin:0;font-size:16px;color:var(--fg-dim);max-width:46ch}
.d-demo{min-height:190px;display:grid;align-content:center}
.d-demo-center{justify-items:center}
.d-demo .phone-mini{width:118px;height:190px;margin:0}
.d-demo .chat{max-width:380px;font-size:14.5px}
.d-demo .palette .pal-name{font-size:28px}
/* search demo: the client's listing climbs to the top result */
.serp{display:grid;gap:12px;max-width:380px}
.serp-q{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-hi);font-size:14.5px;color:var(--fg-dim)}
.serp-q svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.serp ol{position:relative;height:150px;margin:0;padding:0;list-style:none}
.serp li{position:absolute;left:0;right:0;top:0;height:44px;display:grid;align-content:center;gap:5px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,.03)}
.serp li b{display:block;height:8px;width:46%;border-radius:4px;background:rgba(255,255,255,.18)}
.serp li span{display:block;height:6px;width:64%;border-radius:4px;background:rgba(255,255,255,.09)}
.serp .serp-you{z-index:1;background:rgba(255,157,181,.1);box-shadow:inset 0 0 0 1px rgba(255,157,181,.35);animation:serpYou 7s var(--ease) infinite}
.serp .serp-you b{width:auto;height:auto;background:none;font-size:14.5px;font-weight:600;color:var(--fg)}
.serp .serp-you span{width:auto;height:auto;background:none;font-size:12.5px;color:var(--rose)}
.serp .serp-a{animation:serpA 7s var(--ease) infinite}
.serp .serp-b{animation:serpB 7s var(--ease) infinite}
@keyframes serpYou{0%,22%{transform:translateY(106px)}48%,88%{transform:translateY(0)}100%{transform:translateY(106px)}}
@keyframes serpA{0%,22%{transform:translateY(0)}48%,88%{transform:translateY(53px)}100%{transform:translateY(0)}}
@keyframes serpB{0%,22%{transform:translateY(53px)}48%,88%{transform:translateY(106px)}100%{transform:translateY(53px)}}

/* pricing */
.d-price{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);padding:clamp(28px,4vw,52px);border-radius:16px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.d-price-main p{margin:0 0 24px;color:var(--fg-dim);max-width:54ch}
.d-amount{margin:6px 0 18px!important;color:var(--fg)!important;font-size:clamp(40px,5vw,60px);line-height:1;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
.d-amount .nw{white-space:nowrap}
.d-amount > span:first-child{display:block;margin-bottom:8px;font-size:15px;letter-spacing:0;color:var(--fg-dim)}
.d-plan{display:grid;gap:18px;align-content:center;margin:0;padding:0;list-style:none;font-size:16px;color:var(--fg-dim)}
.d-plan li{display:grid;grid-template-columns:18px 1fr;gap:12px}
.d-plan li::before{margin-top:4px}
.d-plan b{color:var(--fg);font-weight:500}

/* founder */
.d-founder{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.d-founder img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px var(--line-hi)}
.d-founder p{margin:0 0 16px;color:var(--fg-dim);font-size:17px;max-width:56ch}

/* work */
.d-work{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.d-work figure{margin:0}
.d-work .d-shot img{aspect-ratio:16/11}
.d-work figcaption{padding-top:14px}
.d-work .tag-concept{margin-bottom:8px}
.d-work h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.02em}
.d-work p{margin:2px 0 0;font-size:15px;color:var(--fg-dim)}

/* FAQ uses the existing .faq/.qa accordion */
.d-faq .faq{margin-inline:auto}
.d-more{margin:28px 0 0;text-align:center}

/* closing CTA */
.d-cta{text-align:center}
.d-cta h2{margin:0 auto 16px;max-width:18ch;font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.d-cta p{margin:0 auto 28px;max-width:48ch;color:var(--fg-dim);font-size:17px}
.d-cta .d-alt{margin:22px auto 0;font-size:15px}
.d-alt a,.foot-nap a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:12px}
.d-cta .d-ctas{justify-content:center}

/* footer additions */
.foot-top .foot-nap{margin:6px 0 0;font-size:15px;line-height:1.4}
.site-foot .foot-links a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:980px){
  .d-nav{display:none}
  .d-head .wrap{gap:12px}
  .d-head .d-btn{margin-left:auto}
  .d-menu{display:block}
  .d-hero .wrap,.d-price,.d-split{grid-template-columns:1fr}
  .d-livecard,.d-livecard:nth-child(2),.d-livecard:nth-child(3){grid-column:span 6}
  .d-feature .d-shot img{aspect-ratio:16/9}
  .d-split{gap:28px}
}
@media (max-width:640px){
  .d-head .wrap{height:64px}
  .d-head .brand{font-size:15px;gap:8px}
  .d-head .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .d-ctas .d-btn,.d-price-main .d-btn{flex:1 1 100%;width:100%}
  .d-work{grid-template-columns:1fr}
  .d-livecard,.d-livecard:nth-child(2),.d-livecard:nth-child(3){grid-column:1/-1}
  .d-founder{grid-template-columns:1fr}
  .d-founder img{max-width:280px}
  .foot-top .d-btn{width:100%}
}
.site-foot .brand{min-height:44px}

/* ---------- inner pages (about, faq, schedule, legal, 404) ---------- */
.d-pagehead{padding-bottom:clamp(32px,4vw,48px)}
.d-pagehead h1{margin:0 0 18px;max-width:18ch;font-size:clamp(40px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.d-pagehead .lead{margin:0 0 28px;max-width:58ch;color:var(--fg-dim);font-size:clamp(17px,1.4vw,19px)}
.d-pagehead .lead a,.d-prose a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:4px}
.d-toc{display:flex;flex-wrap:wrap;gap:8px}
.d-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;font-size:15px;color:var(--fg-dim);box-shadow:inset 0 0 0 1px var(--line-hi);transition:color .3s,background .3s}
.d-toc a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.d-toc a:focus-visible{border-radius:10px}

/* about */
.d-about-hero{display:grid;grid-template-columns:1.3fr minmax(0,360px);gap:clamp(32px,6vw,96px);align-items:center}
.d-about-hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;box-shadow:0 0 0 1px var(--line-hi)}
.d-prose p{margin:0 0 18px;max-width:62ch;color:var(--fg-dim);font-size:17px}
.d-points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin:0;padding:0;list-style:none}
.d-points li{padding-top:20px;border-top:1px solid var(--line-hi)}
.d-points h3{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:-.02em}
.d-points p{margin:0;font-size:16px;color:var(--fg-dim)}
.d-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;align-content:start}
.d-chips li{padding:10px 16px;border-radius:10px;font-size:15px;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-hi)}

/* faq page */
.d-faqpage{padding-top:0}
.d-faqpage .faq-group+.faq-group{margin-top:clamp(48px,6vw,72px)}
.d-faqpage .faq-group>h2{margin:0 0 20px;font-size:clamp(26px,3vw,34px);font-weight:500;letter-spacing:-.03em;scroll-margin-top:96px}

/* booking page: flat cards instead of the old double bezel */
.d-book{padding-bottom:clamp(64px,9vw,112px)}
.d-card{border-radius:16px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.d-card>.core{background:none;box-shadow:none;border-radius:16px}
.d-book .type{padding:0;background:none;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px}
.d-book .type .core{border-radius:14px}
.d-book .type:hover{transform:none;box-shadow:inset 0 0 0 1px var(--line-hi)}
.d-book .book-side{top:96px}
.d-btn.busy,.d-btn:disabled{opacity:.7;pointer-events:none}
.done .row-btns .d-btn{min-width:200px}


@media (max-width:980px){
  .d-about-hero{grid-template-columns:1fr}
  .d-about-hero img{max-width:320px;order:-1}
  .d-points{grid-template-columns:1fr}
}
/* form and step labels stay readable (12px floor) */
.field label,.d-book .tag,.d-book .dur,.stepper li{font-size:12px}
.panel .d-pad{padding:clamp(20px,3vw,36px)}
/* placeholders: browser default gray fails contrast on the dark fields */
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute);opacity:1}

/* atmosphere: a slow dawn aurora and fine grain behind every page (html keeps the ink ground) */
body{background:transparent}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none}
body::before{inset:-25vmax;
  background:radial-gradient(38vmax 30vmax at 18% 14%,rgba(255,207,143,.2),transparent 70%),
             radial-gradient(42vmax 34vmax at 84% 30%,rgba(255,157,181,.2),transparent 70%),
             radial-gradient(46vmax 38vmax at 42% 90%,rgba(184,163,255,.18),transparent 70%);
  animation:aurora 50s ease-in-out infinite alternate;will-change:transform}
body::after{inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes aurora{50%{transform:translate3d(5vmax,-4vmax,0) rotate(8deg)}100%{transform:translate3d(-5vmax,4vmax,0) rotate(-6deg)}}
@media (max-width:640px){
  .d-demo{min-height:0}
  .d-demo .phone-mini{width:96px;height:150px}
  .sw-row{height:96px}
  .d-livecard h3{padding-top:14px}
}