/* AURORA REVEAL below-fold styles. Above-fold (nav, overlay, line, hero incl. the
   comparison, buttons, bottom bar) lives fully in the inline critical CSS. */

/* ---- sections: left-anchored editorial measure ---- */
.sec{position:relative;padding:clamp(72px,11vh,150px) var(--gut-r) clamp(72px,11vh,150px) var(--gut)}
.sec[data-ground="ink"]{background:var(--ink);color:var(--paper)}
.sec[data-ground="charcoal"]{background:var(--char);color:var(--paper)}
.sec[data-ground="latte"]{background:var(--latte);color:var(--cocoa-2)}
.sec[data-ground="dawn"]{background:linear-gradient(100deg,var(--dawn1),var(--dawn2));color:var(--ink)}
/* Section 07 sits on the lighthouse itself: full-bleed photograph, dawn-tinted dark
   overlay baked into the same background shorthand so the copy stays readable. */
/* Section 07 stands on Chicago itself: dusk skyline full-bleed, with the scrim weighted
   to the left so the copy stays readable there while the skyline reads on the right. */
.sec[data-ground="photo"]{color:var(--paper);background-color:#140d09;
  background-image:linear-gradient(96deg,rgba(8,5,3,.93) 0%,rgba(14,9,5,.86) 32%,rgba(30,17,9,.6) 58%,rgba(48,25,10,.34) 78%,rgba(12,7,4,.5) 100%),
    url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=2400&h=1320&q=55");
  background-size:cover,cover;background-position:center,center 62%;background-repeat:no-repeat,no-repeat}
/* Source is 5472x3648, so these are true downscales, never upscaled. image-set lets a
   high-DPI or ultrawide display pull the 3600px file while everyone else keeps the 2400. */
@supports (background-image:image-set(url("x") 1x)){
  .sec[data-ground="photo"]{
    background-image:linear-gradient(96deg,rgba(8,5,3,.93) 0%,rgba(14,9,5,.86) 32%,rgba(30,17,9,.6) 58%,rgba(48,25,10,.34) 78%,rgba(12,7,4,.5) 100%),
      image-set(
        url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=2400&h=1320&q=55") 1x,
        url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=3600&h=1980&q=45") 2x)}
}
@media(max-width:899px){
  .sec[data-ground="photo"]{background-image:linear-gradient(178deg,rgba(8,5,3,.9) 0%,rgba(20,12,7,.76) 40%,rgba(44,23,10,.66) 74%,rgba(10,6,4,.9) 100%),
    url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=1100&h=1400&q=58")}
}
.sec[data-ground="photo"] .eyebrow{color:var(--dawn2)}
.sec[data-ground="photo"] .about{color:var(--paper);text-shadow:0 2px 26px rgba(0,0,0,.6)}
.sec[data-ground="photo"] .about-body{color:#EBDFD1;text-shadow:0 1px 16px rgba(0,0,0,.55)}
.sec[data-ground="photo"] .about-credit{color:#B9A996}
.sec[data-ground="photo"] .ghost{color:var(--gold)}
.sec[data-ground="photo"] .ghost,.js .sec[data-ground="photo"] .ghost.lit{opacity:.1}
.js .sec[data-ground="photo"] .ghost{opacity:0}
.measure{max-width:1320px}
.g-7-5,.g-8-4,.g-5-7,.g-6-6{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.g-7-5{grid-template-columns:7fr 5fr}.g-8-4{grid-template-columns:8fr 4fr}.g-5-7{grid-template-columns:5fr 7fr}.g-6-6{grid-template-columns:1fr 1fr}}
/* ghost numerals: oversized, in the left margin, bleeding off the edge */
/* Ghost numerals sit in the RIGHT margin (Commander direction), same size, same
   low opacity, same partial bleed, mirrored off the right edge. */
.ghost{position:absolute;left:clamp(8px,1.1vw,22px);right:auto;top:clamp(28px,5vh,64px);z-index:0;font-family:var(--disp);font-weight:600;font-size:clamp(5.5rem,10.5vw,12rem);line-height:1;letter-spacing:-.04em;pointer-events:none;user-select:none;opacity:.09;transition:opacity 1.3s var(--ease),transform 1.3s var(--ease);font-variation-settings:"SOFT" 70,"WONK" 1}
.js .ghost{opacity:0;transform:translateY(26px)}
.js .ghost.lit{transform:none;opacity:.09}
.sec[data-ground="latte"] .ghost{color:var(--cocoa)}
.sec[data-ground="latte"] .ghost,.js .sec[data-ground="latte"] .ghost.lit{opacity:.07}
.js .sec[data-ground="latte"] .ghost{opacity:0}
.sec[data-ground="ink"] .ghost,.sec[data-ground="charcoal"] .ghost{color:var(--gold)}
.sec[data-ground="dawn"] .ghost{color:var(--ink)}
.sec[data-ground="dawn"] .ghost,.js .sec[data-ground="dawn"] .ghost.lit{opacity:.08}
.js .sec[data-ground="dawn"] .ghost{opacity:0}
.sec>*:not(.ghost){position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(14px,2.4vh,22px);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-d)}
.sec[data-ground="latte"] .eyebrow{color:var(--muted-l)}
.eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--dawn1),var(--dawn2))}
h2.h{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,4.9vw,3.9rem);line-height:1.02;letter-spacing:-.022em;margin:0 0 clamp(22px,4vh,40px);max-width:16ch;text-wrap:balance;font-variation-settings:"SOFT" 40,"WONK" 1}
.dawn-text{background:linear-gradient(95deg,var(--dawn1),var(--dawn2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--dawn1)}
.lede{margin:0 0 1.1em;font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.65;max-width:56ch;color:var(--paper)}
.lede:last-child{margin-bottom:0}
.sec[data-ground="latte"] .lede{color:var(--cocoa-2)}
.card{position:relative;border-radius:10px;border:1px solid var(--edge-i);background:rgba(255,255,255,.025);transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.sec[data-ground="latte"] .card{background:var(--latte-2);border-color:var(--edge-l);box-shadow:0 1px 0 rgba(51,38,28,.04),0 14px 40px rgba(51,38,28,.09)}
.card.near,.card:hover{transform:translateY(-4px);border-color:rgba(255,158,94,.6);box-shadow:0 18px 48px rgba(255,158,94,.14)}
.sec[data-ground="dawn"] .btn-line{border-color:rgba(14,14,16,.45);color:var(--ink)}
.sec[data-ground="dawn"] .btn-line:hover{border-color:var(--dawn1);color:var(--ink);box-shadow:0 0 22px rgba(255,158,94,.25)}
.sec[data-ground="latte"] .btn-line{border-color:rgba(51,38,28,.45);color:var(--cocoa)}
.sec[data-ground="latte"] .btn-line:hover{border-color:var(--dawn1);color:var(--cocoa);box-shadow:0 0 22px rgba(255,158,94,.35)}
@media(hover:none){.card:active{transform:scale(.988);border-color:rgba(255,158,94,.6);transition-duration:.15s}}

/* ---- warm latte ground (sections 04, 05, 06, 08): light and easy to read,
   dawn stays the only accent, text is warm brown rather than black ---- */
.sec[data-ground="latte"] .h,.sec[data-ground="latte"] .care-h,.sec[data-ground="latte"] .speed .lead{color:var(--cocoa)}
.sec[data-ground="latte"] .work-empty{background:var(--latte-2);box-shadow:0 14px 40px rgba(51,38,28,.09)}
.sec[data-ground="latte"] .work-empty .pe-body{color:var(--cocoa)}
.sec[data-ground="latte"] .work-empty .pe-link{color:var(--muted-l)}
.sec[data-ground="latte"] .work-empty .pe-link a{color:var(--ember);border-bottom-color:rgba(150,71,26,.4)}
.sec[data-ground="latte"] .site-card h3{color:var(--cocoa)}
.sec[data-ground="latte"] .site-card .cat,.sec[data-ground="latte"] .site-card .quote{color:var(--muted-l)}
.sec[data-ground="latte"] .site-card .go{color:var(--ember)}
.sec[data-ground="latte"] .badge{color:var(--ember);border-color:rgba(150,71,26,.34);background:rgba(255,158,94,.12)}
.sec[data-ground="latte"] .chip{background:linear-gradient(95deg,var(--dawn1),var(--dawn2));color:var(--ink);font-size:12px;padding:11px 16px;box-shadow:0 6px 22px rgba(255,158,94,.35)}
.sec[data-ground="latte"] .chip i{background:var(--ink);box-shadow:none}
.sec[data-ground="latte"] .tier .t-name,.sec[data-ground="latte"] .tier.lift .t-name,.sec[data-ground="latte"] .care .c-name,.sec[data-ground="latte"] .bundle .b-flag{color:var(--ember)}
.sec[data-ground="latte"] .tier.lift{border-color:rgba(150,71,26,.4);box-shadow:0 1px 0 rgba(51,38,28,.04),0 22px 60px rgba(255,158,94,.22)}
.sec[data-ground="latte"] .tier .t-price,.sec[data-ground="latte"] .care .c-price,.sec[data-ground="latte"] .auto h3,.sec[data-ground="latte"] .bundle h3,.sec[data-ground="latte"] .qa summary,.sec[data-ground="latte"] .bar-row .who,.sec[data-ground="latte"] .bar-val{color:var(--cocoa)}
.sec[data-ground="latte"] .tier li,.sec[data-ground="latte"] .care li,.sec[data-ground="latte"] .auto p,.sec[data-ground="latte"] .bundle p,.sec[data-ground="latte"] .qa .a{color:var(--cocoa-2)}
.sec[data-ground="latte"] .bundle p b{color:var(--cocoa)}
.sec[data-ground="latte"] .fine,.sec[data-ground="latte"] .speed .note,.sec[data-ground="latte"] .faq-intro,.sec[data-ground="latte"] .care .c-price small,.sec[data-ground="latte"] .bar-val small,.sec[data-ground="latte"] .bundle .b-add{color:var(--muted-l)}
.sec[data-ground="latte"] .price{color:var(--ember);border-color:rgba(150,71,26,.3);background:rgba(255,158,94,.12)}
.sec[data-ground="latte"] .bundle{background:var(--latte-2)}
.sec[data-ground="latte"] .faq,.sec[data-ground="latte"] .qa,.sec[data-ground="latte"] .qa .plus{border-color:var(--edge-l)}
.sec[data-ground="latte"] .qa .plus::before,.sec[data-ground="latte"] .qa .plus::after{background:var(--cocoa)}
.sec[data-ground="latte"] .sbar{background:rgba(51,38,28,.12)}
.sec[data-ground="latte"] .speed{border-color:rgba(150,71,26,.32)}
.sec[data-ground="latte"] .bar-fill{background:#857256}
.sec[data-ground="latte"] .tier li::before,.sec[data-ground="latte"] .care li::before{border-color:#4F7A38}
/* the free-websites callout: body copy weight, not fine print */
.free-offer{margin:0 0 clamp(26px,4vh,40px);font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.68;max-width:60ch;color:var(--cocoa)}
.sec[data-ground="latte"] .free-offer b{color:var(--ember)}

/* ---- 02 why ---- */

/* ---- 03 how: timeline riding the dawn line ---- */
.steps{list-style:none;margin:clamp(16px,3vh,28px) 0 0;padding:0;display:grid;gap:clamp(18px,3vw,36px);grid-template-columns:1fr;position:relative}
.steps::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:linear-gradient(180deg,var(--dawn1),rgba(255,208,138,.15))}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}.steps::before{top:13px;left:0;right:0;bottom:auto;height:1px;background:linear-gradient(90deg,var(--dawn1),rgba(255,208,138,.15))}}
.step{position:relative;padding:0 0 0 28px;display:flex;flex-direction:column;gap:12px}
@media(min-width:900px){.step{padding:34px 18px 0 0}}
.step .n{position:relative;font-family:var(--disp);font-size:1.4rem;font-weight:600;line-height:1;background:linear-gradient(95deg,var(--dawn1),var(--dawn2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variation-settings:"SOFT" 70,"WONK" 1}
.step .n::before{content:"";position:absolute;left:-28px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--dawn1);box-shadow:0 0 14px rgba(255,158,94,.9)}
@media(min-width:900px){.step .n::before{left:0;top:-26px}}
.step .ic{width:44px;height:44px;color:var(--dawn2)}
.step .ic svg{width:100%;height:100%;display:block}
.step h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.1;margin:0;letter-spacing:-.01em;font-variation-settings:"SOFT" 40,"WONK" 1}
.step p{margin:0;font-size:.98rem;line-height:1.62;color:var(--muted-d2)}
/* the sunrise band: charcoal into first light into paper */
.dawn-band{position:relative;height:clamp(240px,42vh,460px);margin:clamp(56px,9vh,110px) calc(-1 * var(--gut-r)) calc(-1 * clamp(72px,11vh,150px)) calc(-1 * var(--gut));overflow:hidden;background:linear-gradient(180deg,var(--char) 0%,#2b2024 22%,#8a4a3a 42%,var(--dawn1) 62%,var(--dawn2) 80%,#f3d3a6 91%,var(--latte) 100%)}
.dawn-band .sun{position:absolute;left:4%;bottom:-32%;width:min(78vw,900px);height:min(78vw,900px);border-radius:50%;background:radial-gradient(circle,rgba(255,224,170,.95) 0%,rgba(255,208,138,.55) 28%,rgba(255,158,94,.25) 48%,rgba(255,158,94,0) 70%);transform:translate3d(0,var(--sun,26%),0);will-change:transform;pointer-events:none}
.dawn-band .horizon{position:absolute;left:var(--gut);right:var(--gut-r);bottom:24%;height:1px;background:linear-gradient(90deg,rgba(255,248,235,.9),rgba(255,248,235,0));opacity:.6}
.dawn-band .band-txt{position:absolute;left:var(--gut);bottom:30%;margin:0;font-family:var(--disp);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;color:var(--ink);letter-spacing:-.01em;opacity:.85;font-variation-settings:"SOFT" 70,"WONK" 1}

/* ---- 04 work ---- */
.work-empty{max-width:620px;padding:clamp(24px,3.5vw,40px);border-left:3px solid var(--dawn1);background:#fff;border-radius:0 10px 10px 0;box-shadow:0 14px 40px rgba(14,14,16,.05)}
.work-empty p{margin:0}
.work-empty .pe-body{font-family:var(--disp);font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.25;color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}
.work-empty .pe-link{margin-top:14px;font-size:.95rem;color:var(--muted-p)}
.work-empty .pe-link a{color:var(--teal);font-weight:600;border-bottom:1px solid rgba(31,95,91,.35)}
.work-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:1fr}
@media(min-width:680px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-empty[hidden],.work-grid[hidden]{display:none}
.site-card{display:flex;flex-direction:column;overflow:hidden;text-align:left}
.site-card .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--char)}
.site-card .thumb img{width:100%;height:100%;object-fit:cover}
.site-card .body{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:8px;flex:1}
.site-card h3{font-family:var(--disp);font-weight:500;font-size:1.35rem;margin:0;color:var(--ink)}
.site-card .cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-p)}
.badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(31,95,91,.35);border-radius:4px;padding:5px 9px;background:rgba(31,95,91,.06)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage)}
.site-card .quote{margin:0;font-size:.92rem;line-height:1.6;font-style:italic;color:var(--muted-p);border-left:2px solid rgba(255,158,94,.6);padding-left:12px}
.site-card .go{margin-top:auto;padding-top:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* ---- 05 pricing ---- */
.chip{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(22px,3.6vh,34px);padding:9px 14px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--dawn1);box-shadow:0 0 10px rgba(255,158,94,.9);animation:blip 1.8s ease-in-out 8}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.tiers{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr;align-items:end}
@media(min-width:900px){.tiers{grid-template-columns:1fr 1.18fr 1fr}}
.tier{padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tier.lift{border-color:rgba(31,95,91,.35);box-shadow:0 1px 0 rgba(14,14,16,.04),0 22px 60px rgba(31,95,91,.14)}
.tier.lift::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--dawn1),var(--dawn2))}
@media(min-width:900px){.tier.lift{padding-top:clamp(34px,3.6vw,48px);padding-bottom:clamp(34px,3.6vw,48px)}}
.tier .t-name{margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-p)}
.tier.lift .t-name{color:var(--teal)}
.tier .t-price{font-family:var(--disp);font-weight:500;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}
.tier ul,.care ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.tier li,.care li{position:relative;padding-left:24px;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.tier li::before,.care li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}
.tier .btn{margin-top:14px;align-self:flex-start}
.fine{margin:clamp(18px,3vh,26px) 0 0;font-size:.9rem;line-height:1.6;color:var(--muted-p);max-width:62ch}
.care-h{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.015em;margin:clamp(40px,7vh,72px) 0 clamp(14px,2.4vh,22px);font-variation-settings:"SOFT" 40,"WONK" 1}
.care-grid{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr}
@media(min-width:760px){.care-grid{grid-template-columns:1fr 1fr}}
.care{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.care .c-name{margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.care .c-price{font-family:var(--disp);font-weight:500;font-size:2rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.care .c-price small{font-family:var(--sans);font-size:12px;color:var(--muted-p);margin-left:4px;letter-spacing:.06em}
/* speed comparison */
/* The strongest proof on the page, given a frame of its own. */
.speed{position:relative;overflow:hidden;margin-top:clamp(60px,11vh,120px);
  padding:clamp(34px,5vw,68px) clamp(24px,4vw,58px) clamp(30px,4.4vw,60px);
  border-radius:18px;border:1px solid rgba(150,71,26,.3);
  background:linear-gradient(180deg,rgba(255,158,94,.11),rgba(255,208,138,.045));
  box-shadow:0 28px 76px rgba(51,38,28,.13)}
.speed::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--dawn1),var(--dawn2))}
.speed .lead{margin:0 0 clamp(18px,3vh,26px);font-family:var(--disp);font-weight:500;font-size:clamp(1.85rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.022em;max-width:20ch;font-variation-settings:"SOFT" 40,"WONK" 1}
.bar-row{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 clamp(20px,3.2vh,30px)}
@media(min-width:700px){.bar-row{grid-template-columns:210px 1fr 118px;align-items:center;gap:20px}}
.bar-row .who{font-size:clamp(.95rem,1.2vw,1.06rem);font-weight:600;color:var(--ink)}
.sbar{position:relative;height:28px;border-radius:14px;background:rgba(14,14,16,.08);overflow:hidden}
.bar-fill{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:14px;background:#b9b3a8;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.bar-row.dawn .bar-fill{background:linear-gradient(90deg,var(--dawn1),var(--dawn2));box-shadow:0 0 26px rgba(255,158,94,.6)}
.bar-row.on .bar-fill{transform:scaleX(var(--f,0))}
.bar-val{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.bar-val small{font-family:var(--sans);font-size:12px;color:var(--muted-p);margin-left:3px}
.speed .note{margin:clamp(14px,2.2vh,20px) 0 0;font-size:.9rem;line-height:1.62;color:var(--muted-p);max-width:62ch}

/* ---- 06 automations ---- */
.autos{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr}
@media(min-width:640px){.autos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.autos{grid-template-columns:repeat(3,1fr)}}
.auto{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px}
.auto .ic{width:40px;height:40px;color:var(--dawn1)}
.auto .ic svg{width:100%;height:100%;display:block}
.auto h3{font-family:var(--disp);font-weight:500;font-size:1.3rem;margin:4px 0 0;line-height:1.15;letter-spacing:-.01em;color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}
.auto p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink-soft);flex:1}
.price{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--teal);border:1px solid rgba(31,95,91,.3);border-radius:4px;padding:6px 10px;background:rgba(31,95,91,.05)}
.bundle{margin-top:clamp(22px,3.6vh,34px);padding:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;border-left:4px solid var(--dawn1);background:#fff}
.bundle .b-txt{flex:1 1 380px}
.bundle .b-flag{display:inline-block;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.bundle h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.5vw,1.9rem);margin:0 0 6px;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}
.bundle p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.bundle p b{color:var(--ink);font-weight:600}
.bundle .b-add{margin-top:6px;font-size:.88rem;color:var(--muted-p)}

/* ---- 07 about ---- */
.about-block{padding:clamp(44px,10vh,120px) 0;display:grid;grid-template-columns:1fr}
@media(min-width:900px){.about-block{grid-template-columns:minmax(0,.54fr) minmax(0,.46fr)}.about-copy{grid-column:1}}
.about-copy{min-width:0}
.about{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.12;letter-spacing:-.02em;max-width:22ch;color:var(--ink);font-variation-settings:"SOFT" 40,"WONK" 1}
.about-body{margin:clamp(16px,2.6vh,24px) 0 0;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.66;max-width:52ch;color:#3f2917}
.about-credit{margin:clamp(14px,2.4vh,20px) 0 0;font-size:11px;letter-spacing:.02em}

/* ---- 08 questions ---- */
.faq{border-top:1px solid var(--edge-p)}
.qa{border-bottom:1px solid var(--edge-p)}
.qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.6vh,24px) 0;font-family:var(--disp);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.01em;color:var(--ink);min-height:48px;font-variation-settings:"SOFT" 40,"WONK" 1}
.qa summary::-webkit-details-marker{display:none}
.qa .plus{flex:0 0 auto;width:26px;height:26px;position:relative;border:1px solid var(--edge-p);border-radius:50%;transition:border-color .3s var(--ease),background .3s var(--ease)}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--ink);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.qa .plus::before{left:50%;top:7px;bottom:7px;width:1px;transform:translateX(-50%)}
.qa .plus::after{top:50%;left:7px;right:7px;height:1px;transform:translateY(-50%)}
.qa[open] .plus{border-color:var(--dawn1);background:rgba(255,158,94,.12)}
.qa[open] .plus::before{transform:translateX(-50%) rotate(90deg);opacity:0}
.qa .a{padding:0 0 clamp(18px,2.6vh,24px);font-size:1rem;line-height:1.65;color:var(--ink-soft);max-width:58ch}
.faq-intro{font-size:1.05rem;line-height:1.65;color:var(--muted-p);max-width:34ch;margin:0}

/* ---- 09 start: two doors ---- */
/* Two doors, deliberately far apart. One is anchored to the left edge of the
   section, the other to the right, with open space between them: two places to
   walk through, not a row of cards. Stacked below 960px with a large gap and
   mirrored edge accents so they still read as two separate zones. */
.sec#start .measure{max-width:none}
.doors{display:grid;gap:clamp(52px,9vh,104px);grid-template-columns:1fr;align-items:stretch}
@media(min-width:960px){
  .doors{grid-template-columns:minmax(0,1fr) clamp(56px,10vw,190px) minmax(0,1fr);gap:0}
  .door-sample{grid-column:1;justify-self:start;width:100%;max-width:34rem}
  .door-order{grid-column:3;justify-self:end;width:100%;max-width:34rem}
}
.door-sample::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,rgba(250,248,245,.42),rgba(250,248,245,.06))}
@media(max-width:959px){
  .door-order{border-left-width:0;border-right-color:rgba(255,158,94,.45)}
  .door-order::before{left:auto;right:0}
  .door-sample::before{left:0;right:auto}
}

.door{position:relative;height:100%;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.03)}
/* the trailing note is pushed to the foot of each card so the two align exactly */
.door-note{margin-top:auto}
.door-order{border-color:rgba(255,158,94,.45)}
.door-order::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--dawn1),var(--dawn2))}
.door-head{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.door-tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-d2)}
.door h3{font-family:var(--disp);font-weight:500;font-size:clamp(1.6rem,2.8vw,2.1rem);letter-spacing:-.015em;margin:0;color:var(--paper);font-variation-settings:"SOFT" 40,"WONK" 1}
.fld label{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d2);margin-bottom:8px}
.fld input,.fld textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--edge-field);border-radius:6px;color:var(--paper);font-family:var(--sans);font-size:1rem;padding:14px 16px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.fld textarea{resize:vertical;min-height:92px;line-height:1.6}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--dawn2);outline-offset:2px;border-color:var(--dawn1)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted-d2)}
.fld-row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:520px){.fld-row{grid-template-columns:1fr 1fr}}
.seg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.seg legend{display:block;width:100%;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d2);margin-bottom:10px;padding:0}
.seg-opt{position:relative;flex:1 1 auto}
.seg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg-opt span{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:46px;padding:10px 14px;border:1px solid var(--edge-field);border-radius:6px;background:rgba(255,255,255,.04);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.seg-opt span small{font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--dawn2)}
.seg-opt input:checked+span{border-color:var(--dawn1);background:rgba(255,158,94,.12);box-shadow:0 0 18px rgba(255,158,94,.2)}
.seg-opt input:focus-visible+span{outline:2px solid var(--dawn2);outline-offset:2px}
.door .btn{align-self:flex-start;margin-top:4px}
.door-note{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted-d2)}
.form-ok{display:none;border:1px solid rgba(127,176,105,.5);border-left:3px solid var(--sage);background:rgba(127,176,105,.1);border-radius:6px;padding:14px 16px;font-size:.98rem;line-height:1.55;color:var(--paper)}
.form-ok.show{display:block}
.form-ok .ok-sub{display:block;margin-top:8px;font-size:.88rem;color:var(--muted-d2)}
.form-ok a{color:var(--dawn2);border-bottom:1px solid rgba(255,208,138,.4)}
.form-err{display:none;border:1px solid rgba(224,96,74,.5);border-left:3px solid #E0604A;background:rgba(224,96,74,.1);border-radius:6px;padding:14px 16px;font-size:.98rem;line-height:1.55;color:var(--paper)}
.form-err.show{display:block}
.form-err a{color:var(--dawn2);border-bottom:1px solid rgba(255,208,138,.4)}
.door .btn[disabled]{opacity:.62;cursor:default;pointer-events:none}
.start-note{margin:clamp(22px,3.6vh,32px) 0 0;font-size:.95rem;color:var(--muted-d2)}
.start-note a{color:var(--dawn2);border-bottom:1px solid rgba(255,208,138,.4)}

/* ---- footer: the one centered element is the wordmark ---- */
.foot{position:relative;background:var(--ink);color:var(--paper);border-top:1px solid var(--edge-i);padding:clamp(56px,8vh,90px) var(--gut-r) clamp(20px,4vh,30px) var(--gut)}
.foot-grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr 1fr;padding-bottom:clamp(36px,6vh,64px)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1.25fr 1fr .8fr}}
@media(max-width:759px){.foot-brand-col{grid-column:1 / -1}}
.foot h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dawn2);margin:0 0 14px}
.foot .foot-brand{font-family:var(--disp);font-weight:600;font-size:1.5rem;margin:0 0 8px;letter-spacing:.02em;color:var(--paper);font-variation-settings:"SOFT" 70,"WONK" 1}
.foot p,.foot li{font-size:.92rem;line-height:1.65;color:var(--muted-d2);margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot li a,.foot p a{display:inline-block;padding:5px 0;margin:-5px 0}
.foot a:hover{color:var(--paper)}
.foot p a{color:var(--dawn2)}
.foot-social{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:clamp(20px,3vh,28px) 0;border-top:1px solid var(--edge-i)}
.foot-social-copy{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.01em;color:var(--cream);font-variation-settings:"SOFT" 40,"WONK" 1}
.foot .foot-social-copy{color:var(--paper)}
.socials{display:flex;align-items:center;gap:10px;margin:0}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,208,138,.28);border-radius:8px;color:var(--dawn2);background:rgba(255,158,94,.06);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.socials a:hover{color:var(--ink);border-color:var(--dawn2);background:linear-gradient(95deg,var(--dawn1),var(--dawn2))}
.socials svg{width:16px;height:16px}
.foot .foot-mark{margin:clamp(20px,4vh,40px) 0 clamp(26px,4vh,44px);text-align:center;font-family:var(--disp);font-weight:600;font-size:clamp(4rem,17vw,15rem);line-height:.9;letter-spacing:-.02em;color:var(--paper);font-variation-settings:"SOFT" 70,"WONK" 1;text-shadow:0 0 40px rgba(244,201,93,.32),0 0 120px rgba(255,158,94,.2)}
.foot-bottom{padding-top:clamp(18px,3vh,24px);border-top:1px solid var(--edge-i);display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d2)}

/* ---- dawn wipe reveals: revealed by light, not slid ---- */
.rv{position:relative}
.js .rv{-webkit-clip-path:inset(0 100% 0 0 round 0);clip-path:inset(0 100% 0 0 round 0)}
/* Engine guard: if clip-path inset is not supported, never hide anything.
   Content must not depend on an exotic property being implemented. */
@supports not (clip-path: inset(0 100% 0 0)){
  .js .rv{-webkit-clip-path:none!important;clip-path:none!important;animation:none!important}
  .js .rv::after{display:none!important}
}
.js .rv::after{content:"";position:absolute;top:-6%;bottom:-6%;left:0;width:26%;z-index:5;pointer-events:none;opacity:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,158,94,0) 0%,rgba(255,158,94,.5) 38%,rgba(255,208,138,.8) 58%,rgba(255,208,138,0) 100%)}
.js .rv.lit{animation:wipeIn .72s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards}
.js .rv.lit::after{animation:wipeBand .72s cubic-bezier(.2,.7,.2,1) var(--d,0ms) forwards}
.js .rv.rv-done{-webkit-clip-path:none;clip-path:none;animation:none}
.js .rv.rv-done::after{animation:none;opacity:0}
@keyframes wipeIn{from{-webkit-clip-path:inset(0 100% 0 0 round 0);clip-path:inset(0 100% 0 0 round 0)}to{-webkit-clip-path:inset(0 0 0 0 round 0);clip-path:inset(0 0 0 0 round 0)}}
@keyframes wipeBand{0%{transform:translateX(-100%);opacity:1}80%{opacity:.9}100%{transform:translateX(480%);opacity:0}}
/* number ignition: a single gold pulse on completion */
.ignite{animation:ignite .9s var(--ease) 1}
@keyframes ignite{0%{text-shadow:0 0 0 rgba(244,201,93,0)}35%{color:var(--gold);text-shadow:0 0 18px rgba(244,201,93,.9),0 0 40px rgba(255,158,94,.5)}100%{text-shadow:0 0 0 rgba(244,201,93,0)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv{-webkit-clip-path:none!important;clip-path:none!important}
  .js .rv::after{display:none!important}
  .ghost{opacity:.09!important;transform:none!important}
  .sec[data-ground="latte"] .ghost{opacity:.07!important}
  .bar-fill{transition:none!important}
  .chip i{animation:none!important}
}


/* =====================================================================
   CENTRED LAYOUT (Commander direction, 2026-09-10). This reverses the
   original left-aligned editorial law. The hero headline is the only
   deliberate exception. Ghost numerals and the progress line keep their
   own placement, as briefed. The dated mock keeps its own left alignment
   because it depicts somebody else's website, not Aurora's copy.
   ===================================================================== */
.measure{margin-inline:auto;max-width:1560px}
.compare-static{margin-inline:auto}
.lede,.fine,.speed .note,.faq-intro,.qa .a,.free-offer,.about-body,.about-credit,.hero-sub,
.cmp-intro,.door-note,.start-note,.work-empty,.cmp-pane figcaption,.speed .lead,h2.h,
.about,.care-h,.bundle p,.site-card .quote,.step p{margin-inline:auto}
.badge,.price,.tier .btn,.door .btn,.door-tag,.pane-tag,.chip,.c-cta{align-self:center}
.eyebrow,.hero-ctas,.seg,.seg-opt span,.btn,.nav-links,.foot-social,.socials{justify-content:center}
.site-card,.cmp-copy,.bundle,.foot-bottom{text-align:center}
.bundle{justify-content:center}
.foot-bottom{justify-content:center}
.foot ul{align-items:center}
.tier li,.care li{padding-left:0;padding-top:22px}
.tier li::before,.care li::before{left:50%;margin-left:-5.5px;top:6px}
.qa summary{justify-content:center;gap:16px}
.steps::before{display:none}
.step{padding:26px 0 0;align-items:center}
.step .n::before{left:50%;margin-left:-4.5px;top:-20px}
@media(min-width:900px){.step{padding:30px 14px 0}.step .n::before{left:50%;margin-left:-4.5px;top:-22px}}
.bar-row .who{text-align:center}
/* typed input stays left-aligned: centring a caret while somebody types is hostile */
.fld input,.fld textarea{text-align:left}
.dated,.dated *{text-align:left}
.d-count,.d-foot{text-align:left}
h1.promise{text-align:left;margin-inline:0}

/* ---------------------------------------------------------------------
   HERO STAYS LEFT (Commander correction, 2026-09-10). Declared last so it
   wins over the centred layer above, which loads after the inline CSS.
   --------------------------------------------------------------------- */
.hero-copy{margin-inline:0;text-align:left;max-width:22ch}
@media(min-width:900px){.hero-copy{max-width:min(100%,1180px)}}
/* the supporting lines keep a readable measure even though the headline runs wide */
@media(min-width:900px){.hero-sub{max-width:46ch}}
.hero-copy .wordmark,.hero-copy h1.promise,.hero-copy .hero-sub,.hero-copy .hero-note,.hero-copy .eyebrow{margin-inline:0}
.hero-copy .eyebrow,.hero-ctas{justify-content:flex-start}


/* ---------------------------------------------------------------------
   SECTION 07: copy left-aligned on the left of the row, ghost numeral now
   opposite it in the right margin. The rest of the page stays centred.
   --------------------------------------------------------------------- */
.about-copy{text-align:left}
.about-copy .about,.about-copy .about-body,.about-copy .about-credit,.about-copy .eyebrow{margin-inline:0}
.about-copy .eyebrow{justify-content:flex-start}

/* ---------------------------------------------------------------------
   SECTION 02: a wider measure so the lines read as sentences.
   --------------------------------------------------------------------- */
#why h2.h{max-width:20ch}
#why .lede{max-width:70ch}


/* =====================================================================
   SEPARATE MOBILE PRESENTATION (Commander direction, 2026-09-10).
   Below 768px the page swaps to its own structure: accordions instead of
   dense card grids, a schematic instead of the detailed mock, shorter copy,
   bigger tap targets. Both structures live in the HTML and are toggled with
   display only, so nothing here depends on JavaScript running.
   ===================================================================== */
.m-only{display:none}
@media(max-width:767px){
  .d-only{display:none!important}
  .m-only{display:block}
  span.m-only{display:inline}
}

/* shared accordion row, used by pricing, care, automations and the speed note */
.m-item{border:1px solid var(--edge-l);border-radius:12px;background:var(--latte-2);margin:0 0 10px;overflow:hidden}
.m-item>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:60px;padding:16px 18px;text-align:left;font-family:var(--sans);font-weight:600;color:var(--cocoa)}
.m-item>summary::-webkit-details-marker{display:none}
.m-item>summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--ember);border-bottom:2px solid var(--ember);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.m-item[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.mi-name{font-size:1.02rem;letter-spacing:-.01em}
.mi-price{font-family:var(--disp);font-weight:500;font-size:1.15rem;color:var(--ember);white-space:nowrap}
.mi-body{padding:0 18px 18px;text-align:left}
.mi-body ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.mi-body li{position:relative;padding-left:22px;font-size:.97rem;line-height:1.45;color:var(--cocoa-2)}
.mi-body li::before{content:"";position:absolute;left:0;top:.4em;width:10px;height:6px;border-left:2px solid #4F7A38;border-bottom:2px solid #4F7A38;transform:rotate(-45deg)}
.mi-body p{margin:0;font-size:.97rem;line-height:1.6;color:var(--cocoa-2)}
.mi-body .btn{width:100%;min-height:52px;justify-content:center}
.m-item-lift{border-color:rgba(255,158,94,.55);box-shadow:0 10px 30px rgba(255,158,94,.18)}
.m-item-lift>summary{background:linear-gradient(180deg,rgba(255,158,94,.12),transparent)}

/* the speed comparison, condensed */
.m-speed{text-align:left}
.ms-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}
.ms-label{font-size:.95rem;font-weight:600;color:var(--cocoa)}
.ms-num{font-family:var(--disp);font-weight:500;font-size:1.9rem;line-height:1;color:var(--cocoa)}
.ms-num.ms-dawn{color:var(--ember)}
.ms-bar{height:22px;border-radius:11px;background:rgba(51,38,28,.12);overflow:hidden;margin:0 0 20px}
.ms-bar i{display:block;height:100%;border-radius:11px;background:#857256}
.ms-bar-dawn i{background:linear-gradient(90deg,var(--dawn1),var(--dawn2));box-shadow:0 0 22px rgba(255,158,94,.55)}
.ms-note{margin:0 0 16px;font-size:.9rem;color:var(--muted-l)}

/* the schematic "before": reads as clutter at a glance instead of unreadable text */
.dated-mini{position:absolute;inset:0;background:#d4d0c8;padding:8px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;text-align:left}
.dm-marquee{background:#ff0;color:#c00;border:1px solid #c00;font-weight:700;font-size:8px;text-align:center;padding:3px 0;white-space:nowrap;overflow:hidden}
.dm-head{margin-top:5px;background:linear-gradient(180deg,#2a55c0,#12306f);color:#fff;border:2px outset #9db1e6;padding:7px 8px;font-weight:700;font-size:15px;text-shadow:1px 1px 0 #000}
.dm-head span{display:block;font-style:italic;font-weight:400;color:#ffff66;font-size:9px;margin-top:2px}
.dm-nav{margin-top:5px;background:linear-gradient(180deg,#efefef,#c0c0c0);border:1px solid #808080;color:#0000aa;font-weight:700;font-size:8px;padding:4px 6px;white-space:nowrap;overflow:hidden}
.dm-body{display:flex;gap:5px;margin-top:5px}
.dm-side{flex:0 0 34%;background:#ffffcc;border:1px solid #999;padding:6px}
.dm-side b{display:block;color:#c00;font-size:8px;text-decoration:underline;margin-bottom:5px}
.dm-main{flex:1 1 auto;background:#fff;border:1px solid #999;padding:6px;min-width:0}
.dm-main b{display:block;color:#c00;font-family:"Comic Sans MS","Chalkboard SE",Arial,sans-serif;font-size:11px;margin-bottom:5px}
.dm-side i,.dm-main i{display:block;height:3px;margin-bottom:4px;background:#0000ee;opacity:.55}
.dm-main i{background:#666;opacity:.4}
.dm-main i:nth-child(3){width:88%}.dm-main i:nth-child(5){width:74%}.dm-main i:nth-child(7){width:92%}
.dm-side i:nth-child(3){width:80%}.dm-side i:nth-child(5){width:66%}
.dm-badge{margin-top:8px;background:#ffcc00;border:2px dashed #c00;color:#900;font-weight:700;font-size:7px;line-height:1.1;text-align:center;padding:5px 2px}
.dm-call{display:block;margin-top:6px;background:#ffe;color:#c00;font-weight:700;font-size:9px;padding:3px 4px}
.dm-foot{margin-top:5px;border-top:1px solid #999;padding-top:4px;font-size:7px;color:#444}

/* mobile chrome: bigger targets, fewer columns, less on screen at once */
@media(max-width:767px){
  .sec{padding-top:clamp(56px,8vh,86px);padding-bottom:clamp(56px,8vh,86px)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot li a,.foot p a{padding:11px 0;margin:-11px 0;display:inline-block;min-height:44px}
  .socials a{width:52px;height:52px}
  .speed{padding:26px 20px 28px}
  .speed .lead{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .tier .btn,.door .btn,.hero-ctas .btn{min-height:54px}
  .qa summary{min-height:56px}
  .ghost{font-size:clamp(4.4rem,17vw,7rem)}
  /* every tappable thing clears 44px on a phone */
  .nav .brand{display:inline-flex;align-items:center;min-height:46px}
  .work-empty .pe-link a,.start-note a,.foot p a{display:inline-block;padding:12px 0;min-height:46px}
}


/* =====================================================================
   SECTION 02 COMPARISON. What a working site does for an owner against
   what a poor one costs them, in consequences rather than features.
   Every line is a general statement: no statistics, no percentages, no
   studies. The right column is deliberately dulled, the left carries the
   dawn accent, so the difference reads before the words do.
   ===================================================================== */
.why-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4.5vw,62px);align-items:start}
@media(min-width:1000px){.why-grid{grid-template-columns:1fr 1fr}}
.why-copy{min-width:0}
.why-table{min-width:0}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);align-items:stretch}
.vs-col{border-radius:14px;padding:clamp(20px,2vw,28px) clamp(16px,1.6vw,22px);border:1px solid}
.vs-col-yes{border-color:rgba(255,158,94,.42);background:linear-gradient(180deg,rgba(255,158,94,.11),rgba(255,208,138,.03));box-shadow:0 18px 46px rgba(255,158,94,.1)}
.vs-col-no{border-color:rgba(250,248,245,.13);background:rgba(250,248,245,.022)}
.vs-head{margin:0 0 clamp(14px,2vh,20px);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.vs-head-yes{color:var(--dawn2)}
.vs-head-no{color:var(--muted-d)}
.vs-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(12px,1.8vh,17px)}
.vs-col li{display:flex;align-items:flex-start;gap:11px;text-align:left;font-size:clamp(.92rem,1.15vw,1rem);line-height:1.45}
.vs-col-yes li{color:var(--paper)}
.vs-col-no li{color:var(--muted-d)}
.ci{flex:0 0 auto;width:19px;height:19px;margin-top:.12em;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.ci svg{width:12px;height:12px;display:block}
.ci-yes{background:linear-gradient(95deg,var(--dawn1),var(--dawn2));color:var(--ink);box-shadow:0 0 16px rgba(255,158,94,.4)}
.ci-no{background:rgba(250,248,245,.09);color:var(--muted-d)}

/* mobile: pairs kept adjacent so the contrast still lands without a cramped grid */
.vs-stack{text-align:left}
.vs-legend{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.vs-pair{padding:15px 0;border-top:1px solid rgba(250,248,245,.12)}
.vs-pair:last-child{border-bottom:1px solid rgba(250,248,245,.12)}
.vs-pair p{display:flex;align-items:flex-start;gap:11px;margin:0;font-size:1rem;line-height:1.45}
.vs-yes{color:var(--paper)}
.vs-no{margin-top:9px!important;color:var(--muted-d)}


/* =====================================================================
   SECTION 02 BACKGROUND, matching the Option B pick: the same skyline, the
   same single download, but washed almost to black so it reads as depth
   rather than as a second photograph competing with the comparison table.
   ===================================================================== */
#why{position:relative;isolation:isolate;background-color:#0a0807}
#why::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background-image:url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=1900&h=1100&q=48");background-size:cover;background-position:center 74%;opacity:.5}
#why::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(94deg,rgba(6,5,4,.97) 0%,rgba(7,5,4,.95) 40%,rgba(12,8,6,.9) 72%,rgba(20,12,8,.86) 100%),
   linear-gradient(180deg,rgba(6,5,4,.9) 0%,rgba(6,5,4,.62) 40%,rgba(6,5,4,.88) 100%)}
#why>*:not(.ghost){position:relative;z-index:2}
#why>.ghost{z-index:2}
@media(max-width:767px){
  #why::before{background-image:url("https://images.unsplash.com/photo-1493134606758-a812d6f616be?auto=format&fit=crop&w=900&h=1250&q=48");background-position:center 60%}
  #why::after{background:linear-gradient(180deg,rgba(6,5,4,.95) 0%,rgba(8,6,5,.9) 45%,rgba(16,10,7,.9) 100%)}
}


/* =====================================================================
   GHOST NUMERALS, LEFT MARGIN AND FULLY VISIBLE (Commander direction).
   They sit at a positive left offset so both digits always clear the
   viewport edge. On wide screens the numeral is large enough that a
   left-aligned heading would otherwise cross it, so the sections give the
   numeral its own band of space above the copy instead of letting text
   sit over it. Phone and tablet need no extra room: measured clear there.
   ===================================================================== */
@media(min-width:1200px){
  .sec{padding-top:clamp(160px,19vh,215px)}
  /* section 07 keeps its copy left-aligned, so it needs the most clearance */
  #about{padding-top:clamp(200px,26vh,290px)}
}


/* =====================================================================
   SECTION 06 CONFIDENCE TIERS. Three automations Aurora has built and
   tested carry a fixed price and the full card treatment. The other four
   are real, but each depends on something outside the website, so they sit
   in a quieter row of flat tiles and are quoted rather than priced.
   ===================================================================== */
.auto-ready{margin-top:clamp(18px,3vh,30px)}
.auto-request{margin-top:clamp(36px,5.6vh,66px);padding-top:clamp(26px,3.6vh,40px);border-top:1px solid var(--edge-l)}
.ag-head{margin:0 0 clamp(18px,2.6vh,26px)}
.ag-flag{display:inline-flex;align-items:center;gap:9px;margin:0 0 9px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.ag-flag::before{content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(95deg,var(--dawn1),var(--dawn2));box-shadow:0 0 12px rgba(255,158,94,.55)}
.ag-flag-quiet{color:var(--muted-l)}
.ag-flag-quiet::before{background:rgba(51,38,28,.28);box-shadow:none}
.ag-note{margin:0 auto;max-width:64ch;font-size:.97rem;line-height:1.62;color:var(--cocoa-2)}
.auto-request .ag-note{color:var(--muted-l)}

.req-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vw,16px);grid-template-columns:1fr}
@media(min-width:640px){.req-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.req-list{grid-template-columns:repeat(4,1fr)}}
.req{display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;
  padding:clamp(18px,2.2vw,24px) clamp(14px,1.5vw,19px);
  border:1px solid var(--edge-l);border-radius:10px;background:transparent}
.req-ic{width:27px;height:27px;color:var(--muted-l);opacity:.7}
.req-ic svg{width:100%;height:100%;display:block}
.req h3{margin:3px 0 0;font-family:var(--disp);font-weight:500;font-size:1.04rem;line-height:1.2;
  letter-spacing:-.01em;color:var(--cocoa-2);font-variation-settings:"SOFT" 40,"WONK" 1}
.req p{margin:0;font-size:.89rem;line-height:1.55;color:var(--muted-l)}
.req .req-why{font-size:.81rem;line-height:1.5}
.req-tag{margin-top:auto;padding-top:11px;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-l)}
.req-cta{margin:clamp(22px,3vh,30px) 0 0}

/* mobile: the same split, kept light */
.m-group-flag{margin:clamp(22px,3.2vh,30px) 0 12px;font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.m-autos>.m-group-flag:first-child{margin-top:0}
.m-group-flag-quiet{color:var(--muted-l)}
.m-item-quiet{background:transparent}
.mi-quote{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-l)}
.mi-why{margin-top:10px!important;font-size:.9rem;line-height:1.55;color:var(--muted-l)}
.m-quote-cta{width:100%;min-height:52px;justify-content:center;margin-top:16px}