/* ==========================================================================
   Fashion Brand Lab — site-wide layer (v5)
   Loaded last on every page. Additive only: styles.css, audit.css and
   pages.css are unchanged from v4.
   ========================================================================== */

/* -------------------- h1 on checkout/success/privacy/terms -------------- */
/* Those four pages carry their visible title in .sec-head, styled for an h2
   in styles.css (unchanged). They have no hero, so that title is really the
   page's only heading — give it an h1 in the markup and match styles.css's
   h2 rule here rather than edit that shared file. */
.sec-head h1{font-size:clamp(2rem,4.4vw,3.55rem);max-width:19ch;}
.sec-head h1.wide{max-width:26ch;}
@media (max-width:760px){.sec-head h1,.sec-head h1.wide{max-width:none;}}

/* ------------------------------------------------------- global nav ----- */
.nav-links{align-items:center;}
.nav-drop{position:relative;}
.nav-drop-t{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0 0 2px;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.02em;
  color:var(--ink-soft);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
.nav-drop-t:hover,.nav-drop.is-open .nav-drop-t{color:var(--ink);border-bottom-color:var(--ox);}
.nav-drop-t .cv{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;transition:transform .22s ease;}
.nav-drop.is-open .nav-drop-t .cv{transform:rotate(180deg);}
.nav.is-dark .nav-drop-t{color:rgba(255,255,255,.72);}
.nav.is-dark .nav-drop-t:hover,.nav.is-dark .nav-drop.is-open .nav-drop-t{color:#fff;}

.nav-drop-m{position:absolute;left:-18px;top:calc(100% + 16px);z-index:120;width:330px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 44px rgba(20,19,16,.13);
  display:flex;flex-direction:column;}
.nav-drop-m[hidden]{display:none;}
.nav-drop-m a{display:grid;grid-template-columns:58px 1fr;gap:2px 12px;padding:14px 18px;
  border-bottom:1px solid var(--line-soft);border-bottom-width:1px;transition:background .18s;}
.nav-drop-m a:last-child{border-bottom:0;}
.nav-drop-m a:hover{background:var(--shell);}
.nav-drop-m b{grid-row:1/3;align-self:start;font-family:'Archivo Black',sans-serif;font-weight:400;
  font-size:13px;color:var(--ox);letter-spacing:-.01em;padding-top:1px;}
.nav-drop-m span{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.3;}
.nav-drop-m em{font-style:normal;font-size:11.5px;color:var(--ink-faint);line-height:1.45;}

/* ------------------------------------------------- mobile menu (5+) ----- */
.mobile-menu nav a{font-size:clamp(1.15rem,5.6vw,1.6rem);padding:14px 0;}
.mm-k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);padding:18px 0 8px;border-bottom:1px solid var(--line);}
.mm-k:first-child{padding-top:10px;}
.mobile-menu-cta{margin-top:26px;}

/* ------------------------------------------------------- footer -------- */
.ft-top--4{grid-template-columns:1.7fr repeat(3,1fr);}
.ft-con{margin:14px 0 0;font-size:12.6px;letter-spacing:.01em;}
.ft-con a{color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.3);}
.ft-con a:hover{color:#fff;border-bottom-color:#fff;}
.ft-soc{margin:16px 0 0;}
.ft-ig{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.28);transition:border-color .2s,background .2s;}
.ft-ig svg{width:19px;height:19px;fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;}
.ft-ig svg .d{fill:rgba(255,255,255,.88);stroke:none;transition:fill .2s;}
.ft-ig:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.ft-ig:hover svg{stroke:#fff;}
.ft-ig:hover svg .d{fill:#fff;}
.ft-ig:focus-visible{outline:2px solid #fff;outline-offset:3px;}
/* The burger and the Instagram icon are primary controls whose painted boxes
   are smaller than a comfortable thumb target, so the hit area is widened
   without moving or resizing anything that is actually drawn. */
.nav-burger{position:relative;}
.nav-burger::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:46px;height:46px;}
.ft-ig{position:relative;}
.ft-ig::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:46px;height:46px;}
@media (max-width:1080px){.ft-top--4{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.ft-top--4{grid-template-columns:1fr;gap:26px;}}

/* --------------------------------------------- service ladder links ----- */
.lad-i--go{display:flex;flex-direction:column;transition:border-color .2s,background .2s;}
.lad-go{margin-top:auto;padding-top:16px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--ox);display:inline-flex;align-items:center;gap:8px;}
.lad-go .ar{transition:transform .22s ease;}
.lad-i--go:hover{background:var(--paper);border-color:var(--ink);}
.lad-i--go:hover .lad-go .ar{transform:translateX(4px);}

/* ------------------------------------------------ generic carousel ------ */
.cx{margin-top:clamp(30px,3.4vw,48px);}
.cx-bar{display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:clamp(20px,2.4vw,32px);}
.cx-count{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:-.01em;
  display:inline-flex;gap:5px;flex:0 0 auto;}
.cx-count b{font-weight:400;color:var(--ox);}
.cx-count .sl{color:var(--line);}
.cx-count .cx-tot{color:var(--ink-faint);}
.cx-dots{display:flex;gap:7px;flex:1 1 auto;}
.cx-dots button{width:100%;max-width:56px;height:3px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .2s;}
.cx-dots button[aria-selected="true"]{background:var(--ink);}
.cx-dots button:focus-visible{outline:2px solid var(--ox);outline-offset:4px;}
.cx-nav{display:flex;gap:8px;flex:0 0 auto;}
.cx-btn{width:42px;height:42px;border:1px solid var(--ink);background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:background .2s,color .2s;}
.cx-btn:hover{background:var(--ink);color:#fff;}
.cx-stage{position:relative;}
.cx-hint{margin-top:18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;}
.cx-item{position:absolute;left:0;top:0;width:100%;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px);transition:opacity .42s ease,transform .42s ease;}
.cx-item.is-active{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.cx-h{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(14px,1.6vw,20px);}
.cx-n{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);margin-bottom:9px;}
.cx-h h3{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:600;letter-spacing:-.018em;max-width:26ch;}
.cx-h h3 .i{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  text-transform:lowercase;color:var(--ox);}
.badge--fig{border-color:var(--ox)!important;color:var(--ox)!important;}
.cx-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);align-items:start;}
.cx-pair--mobile{grid-template-columns:repeat(2,minmax(0,330px));justify-content:center;gap:clamp(16px,3vw,54px);}
.cx[data-fit="slide"] .cx-stage{transition:height .44s cubic-bezier(.4,0,.2,1);}
.cx--fig .cx-pair--mobile{grid-template-columns:repeat(2,minmax(0,286px));gap:clamp(14px,2vw,30px);}
@media (prefers-reduced-motion:reduce){.cx[data-fit="slide"] .cx-stage{transition:none;}}

/* ------------------------------------------------------- responsive ----- */
@media (max-width:760px){
  .nav-drop-m{position:static;width:auto;box-shadow:none;}
  .cx-pair{grid-template-columns:1fr;gap:10px;}
  .cx-pair--mobile{grid-template-columns:1fr 1fr;gap:10px;}
  .cx-bar{gap:12px 14px;justify-content:space-between;flex-wrap:wrap;}
  .cx-dots{order:3;flex:1 0 100%;gap:6px;}
  .cx-dots button{max-width:none;}
  .cx-h{gap:8px 14px;}
}

/* ========================= multi-step request flow ====================== */
.assure--row{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 26px;margin:0 0 clamp(6px,1vw,14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;}
.assure--row li{color:var(--ink-soft);font-size:12px;padding-left:19px;}
.assure--row li::before{color:var(--good);top:1px;}


.fw-lede{margin:0 0 14px;font-size:12.6px;color:var(--ink-soft);line-height:1.6;max-width:62ch;}
.fw-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.fw-nav .btn[hidden]{display:none;}
/* .btn sets display, which would otherwise override the hidden attribute
   on any button that is shown only for one stage of the journey */
.btn[hidden]{display:none;}

.err{margin:8px 0 0;font-size:11.8px;line-height:1.5;color:var(--ox);font-weight:500;}
.err[hidden]{display:none;}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea{border-color:var(--ox);
  background:rgba(110,34,48,.035);}

.pick > label.is-locked{opacity:.4;cursor:not-allowed;}
.pick > label.is-locked:hover{background:var(--paper);}

.rv{margin:0;display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);}
/* the success-page "what you told us" label already carries its own
   border-bottom, so pair it with .rv's own border-top instead of stacking two */
.rv-block .fleg{border-bottom:0;padding-bottom:0;}
.rv > div{background:var(--paper);display:grid;grid-template-columns:200px 1fr;gap:18px;
  padding:13px clamp(14px,1.5vw,20px);align-items:baseline;}
.rv dt{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--ink-faint);}
.rv dd{margin:0;font-size:13.4px;color:var(--ink);line-height:1.55;overflow-wrap:anywhere;}
.rv dd.is-empty{color:var(--ink-faint);}
.rv--done{margin-top:clamp(22px,2.4vw,32px);}

.rcvd{border:1px solid var(--ink);padding:clamp(26px,3vw,46px);margin-top:clamp(26px,3vw,40px);}
.rcvd:focus{outline:2px solid var(--ox);outline-offset:3px;}
.rcvd .hold{margin-bottom:18px;}
.rcvd h2{font-size:clamp(1.9rem,4.4vw,3rem);margin-bottom:16px;}
.rcvd .rcvd-h{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:-.022em;margin-bottom:12px;}
.rcvd-sub{margin:0;font-size:14.6px;color:var(--ink-soft);line-height:1.62;max-width:60ch;}
.rcvd-sub b{color:var(--ink);font-weight:600;}
.rcvd[hidden]{display:none;}
.rcvd--tight{padding:clamp(22px,2.4vw,32px);}
.rcvd .ah-cta{margin-top:clamp(22px,2.4vw,32px);}

.pay-fine{margin:12px 0 0!important;font-size:11.6px;line-height:1.55;color:var(--ink-faint);}
.pay-fine code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--shell-deep);padding:1px 5px;color:var(--ink-soft);}

.steps a{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);padding:7px 11px;color:var(--ox);
  border-color:rgba(110,34,48,.4);transition:background .2s,color .2s;}
.steps a:hover{background:var(--ox);color:#fff;border-color:var(--ox);}

@media (max-width:760px){
  .assure--row{flex-direction:column;gap:9px;}
  .rv > div{grid-template-columns:1fr;gap:5px;}
  .fw-nav .btn{flex:1 1 100%;justify-content:center;}
}

/* ==========================================================================
   v6 — simplification pass
   ========================================================================== */

/* ------------------------------- $1,500 · static Figma examples --------- */
.fx{margin-top:clamp(30px,3.4vw,48px);display:flex;flex-direction:column;
  gap:clamp(34px,4vw,58px);}
.fx-i{border-top:1px solid var(--ink);padding-top:16px;}
.fx-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 28px;margin-bottom:clamp(14px,1.7vw,22px);}
.fx-n{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin-bottom:9px;}
.fx-h h3{font-size:clamp(1.02rem,1.75vw,1.46rem);margin:0;max-width:32ch;letter-spacing:-.015em;line-height:1.24;}
.fx-h h3 .i{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--ox);}
.fx-src{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ox);white-space:nowrap;}
.fx-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.3vw,18px);align-items:start;}
.fx-note{margin:clamp(22px,2.4vw,32px) 0 0;font-size:12.4px;color:var(--ink-faint);letter-spacing:.01em;}
@media (max-width:760px){
  .fx-pair{grid-template-columns:1fr;gap:12px;}
  .fx-h{gap:6px 14px;}
}

/* ------------------------------- $2,750 · stage strips in the carousel -- */
.chn--2{grid-template-columns:repeat(2,1fr);}
.chn--phone{grid-template-columns:repeat(2,minmax(0,230px));justify-content:start;}
.chn--phone .chn-shot img{object-position:top center;}
/* every slide's stage strip is the same height, so paging never leaves a gap */
.cx-item .chn-shot{aspect-ratio:auto;height:clamp(196px,20vw,268px);}
.cx-item .fx-h{margin-bottom:0;}
.cx-item .chn{margin-top:clamp(16px,1.8vw,24px);}

/* ------------------------------- $2,750 · compact process strip -------- */
.pr6{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);}
.pr6-i{background:#141310;padding:clamp(16px,1.7vw,24px) clamp(12px,1.2vw,18px);
  display:flex;flex-direction:column;gap:10px;min-height:118px;}
.pr6-i .n{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:11px;
  color:var(--blush);letter-spacing:-.01em;}
.pr6-i h3{margin:0;font-size:13px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3;}
.pr6-i--you{background:var(--ox-deep);}
.pr6-i--you .n{color:var(--blush);}
.pr6-i--pub{background:var(--good);}
.pr6-i--pub .n{color:rgba(255,255,255,.7);}
@media (max-width:900px){
  .pr6{grid-template-columns:repeat(3,1fr);}
  .chn--phone{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .pr6{grid-template-columns:repeat(2,1fr);}
}

/* ------------------------------- free diagnostic, trimmed -------------- */
.stat--3{grid-template-columns:repeat(3,1fr);}
.pv--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){
  .stat--3{grid-template-columns:repeat(3,1fr);}
  .pv--3{grid-template-columns:1fr;}
}

/* ---------------------------- preview-build notices -------------------
   Development-only. Every one of these carries data-preview-note and this
   single rule, so the whole set is visually separate from the production
   UI and can be removed in one pass before launch. */
.dev-note{margin:16px 0 0;padding:11px 14px;border:1px dashed var(--ox-light);
  background:rgba(110,34,48,.045);font-size:11.6px;line-height:1.55;color:var(--ink-soft);
  letter-spacing:.01em;}
.dev-note b{color:var(--ox);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:9.5px;}
.sec--dark .dev-note,.final .dev-note{border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);}
.sec--dark .dev-note b,.final .dev-note b{color:var(--blush);}

/* ==========================================================================
   Internal review page: purchase-flow-demo.html
   Not linked from the site navigation.
   ========================================================================== */
.rvw-bar{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px clamp(16px,4vw,44px);background:var(--ox-deep);color:#fff;
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;}
.rvw-bar a{color:var(--blush);}
.rvw-bar a:hover{color:#fff;}
.rvw-foot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding:22px clamp(16px,4vw,44px);background:#0C0B09;color:rgba(255,255,255,.45);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.rvw-foot a{color:rgba(255,255,255,.75);}
.rvw-foot a:hover{color:#fff;}

.sb{display:flex;flex-direction:column;gap:clamp(44px,5.4vw,84px);
  margin-top:clamp(32px,3.8vw,56px);}
.sb-h{display:grid;grid-template-columns:clamp(54px,6vw,86px) minmax(0,1fr);gap:4px clamp(14px,1.8vw,26px);
  border-top:1px solid var(--ink);padding-top:16px;margin-bottom:clamp(16px,1.9vw,26px);}
.sb-n{grid-row:1/3;font-family:'Archivo Black',sans-serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:.86;color:var(--ox);letter-spacing:-.035em;}
.sb-h h3{margin:0;font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(.98rem,1.7vw,1.32rem);letter-spacing:-.018em;}
.sb-h p{margin:0;font-size:13.2px;color:var(--ink-soft);line-height:1.6;max-width:70ch;}
.sb-scr{border:1px solid var(--ink);background:var(--paper);overflow:hidden;}
.sb-bar{display:flex;align-items:center;gap:7px;padding:10px 15px;background:var(--shell-deep);
  border-bottom:1px solid var(--line);}
.sb-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto;}
.sb-url{margin-left:12px;font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-body{padding:clamp(20px,2.5vw,38px);}
.sb-note{margin:14px 0 0;font-size:12.2px;color:var(--ink-faint);letter-spacing:.01em;line-height:1.6;}
.sb-frm input[readonly],.sb-frm textarea[readonly]{background:var(--shell);cursor:default;color:var(--ink);}
.sb-btn{margin-top:20px;pointer-events:none;}
.sb-cta,.eml-cta{margin:22px 0 0;}
.sb-after{margin-top:clamp(24px,2.8vw,36px);}
.sb-k{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-faint);margin-bottom:4px;}
.pr6--light{border-color:var(--line);background:var(--line);}
.pr6--light .pr6-i{background:var(--shell);}
.pr6--light .pr6-i .n{color:var(--ox);}
.pr6--light .pr6-i h3{color:var(--ink);}
.pr6--light .pr6-i--you{background:var(--ox-deep);}
.pr6--light .pr6-i--you .n{color:var(--blush);}
.pr6--light .pr6-i--you h3{color:#fff;}
.pr6--light .pr6-i--pub{background:var(--good);}
.pr6--light .pr6-i--pub h3{color:#fff;}
.pr6--light .pr6-i--pub .n{color:rgba(255,255,255,.72);}

.eml{border:1px solid var(--line);}
.eml-h{padding:13px 17px;background:var(--shell);border-bottom:1px solid var(--line);
  font-size:12.4px;font-weight:600;color:var(--ink);}
.eml-b{padding:clamp(18px,2vw,28px);}
.eml-b p{margin:0 0 14px;font-size:13.4px;color:var(--ink-soft);line-height:1.68;}
.eml-b .rv{margin:18px 0;}

@media (max-width:760px){
  .sb-h{grid-template-columns:1fr;}
  .sb-n{grid-row:auto;}
  .rvw-bar{font-size:9px;letter-spacing:.12em;}
}
.pick--one{grid-template-columns:minmax(0,360px);background:none;}

/* On a phone the slides differ a lot in height, so let the stage follow the
   slide instead of holding the tallest one's height and leaving a gap. */
@media (max-width:760px){
  .cx-stage{min-height:0!important;}
  .chn--phone{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cx-item .chn-shot{height:auto;aspect-ratio:16/11;}
  .cx-item .chn--phone .chn-shot{aspect-ratio:780/1000;}
}

.sum-row[hidden]{display:none;}

/* -------------------------------------------- internal flow review pages -- */
.rv--carry{margin-top:6px;}
.eml-meta{display:flex;flex-wrap:wrap;gap:4px 22px;padding:9px 17px;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--ink-faint);letter-spacing:.01em;}
.eml-meta b{font-weight:600;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;font-size:9px;
  margin-right:6px;}
.eml-foot{margin:20px 0 0!important;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.6px!important;color:var(--ink-faint)!important;line-height:1.6;}
.eml-b .rv dd i,.rv dd i{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--ox-light);}
.fleg-s{margin:26px 0 12px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);border-top:1px solid var(--line);padding-top:14px;}
.fleg-s:first-child{margin-top:0;border-top:0;padding-top:0;}

.dlv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.dlv-i{background:var(--paper);padding:clamp(16px,1.8vw,24px);}
.dlv-x{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ox);margin-bottom:10px;}
.dlv-i h4{margin:0 0 8px;font-size:13.6px;font-weight:600;letter-spacing:-.01em;line-height:1.35;}
.dlv-i p{margin:0;font-size:12.4px;color:var(--ink-soft);line-height:1.62;}

.apv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);}
.apv li{background:var(--paper);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  justify-content:space-between;padding:13px clamp(12px,1.3vw,18px);}
.apv li span{font-size:13.2px;color:var(--ink);line-height:1.5;}
.apv li b{flex:0 0 auto;font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;color:#fff;}
.apv b.ok{background:var(--good);}
.apv b.no{background:var(--ink);}
.apv b.lt{background:var(--ox-light);}

.pr6--flow{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));}
@media (max-width:760px){
  .sb-body .ckt{grid-template-columns:1fr;}
  .apv li{flex-direction:column;align-items:flex-start;}
  /* on a phone the address bar truncated mid-address and hid the half that
     carried the meaning, so it wraps instead of ellipsising */
  .sb-bar{align-items:flex-start;}
  .sb-url{margin-left:9px;white-space:normal;overflow:visible;text-overflow:clip;
    overflow-wrap:anywhere;line-height:1.45;}
}

/* The homepage Before and After carousel hid its progress dots below 760px,
   while the two service carousels show theirs. Same treatment for all three:
   the dots drop to their own full-width row under the count and the arrows. */
@media (max-width:760px){
  .tfc-bar{gap:12px 14px;justify-content:space-between;flex-wrap:wrap;}
  .tfc-dots{display:flex;order:3;flex:1 0 100%;gap:6px;}
  .tfc-dots button{max-width:none;}
}

/* the homepage stage animates its height on a phone, matching the two
   service carousels, so moving through the set never leaves a gap */
@media (max-width:760px){
  .tfc-stage{transition:height .44s cubic-bezier(.4,0,.2,1);}
}
@media (prefers-reduced-motion:reduce){.tfc-stage{transition:none;}}

/* ==========================================================================
   v7 — mobile density, selective-white promotion, lightbox, one-large-preview
   ========================================================================== */

/* -------------------------------- selective-white surface, promoted ---- */
/* The cream --shell surface (services, FAQ, the featured pricing column,
   nav-drop and level hover states) is replaced with white. --shell-deep
   (image plates, the Before/After section, chat/browser chrome) is
   untouched, so that rhythm stays exactly as it was. */
:root{--shell:#FFFFFF;}
.level:hover{background:#F7F7F6;}
.nav-drop-m a:hover{background:#F7F7F6;}

/* --------------------------------- one-sentence upgrade note ----------- */
.pl-onenote{margin-top:clamp(26px,2.8vw,40px);border-top:1px solid var(--ink);
  padding-top:22px;font-size:13.2px;color:var(--ink-soft);line-height:1.66;max-width:64ch;}

/* ---------------------- homepage hero topics, deterministic on mobile -- */
/* Row 1: Fit / Fabric / Imagery / Reviews. Row 2: Discovery / Cart /
   Returns, centred under row 1. Eight tracks so three items can sit on
   tracks 2–7, leaving one empty track on each side. */
@media (max-width:760px){
  .hero-topics{display:grid;grid-template-columns:repeat(8,1fr);
    row-gap:14px;column-gap:4px;justify-items:center;text-align:center;}
  .hero-topics span{grid-column:span 2;white-space:nowrap;}
  .hero-topics span::after{content:none;}
  .hero-topics span:nth-child(5){grid-column:2/4;}
  .hero-topics span:nth-child(6){grid-column:4/6;}
  .hero-topics span:nth-child(7){grid-column:6/8;}
}
@media (max-width:760px){
  .hero-topics{color:var(--ink-soft);font-size:10.5px;letter-spacing:.14em;}
}
@media (max-width:400px){
  .hero-topics{letter-spacing:.1em;column-gap:2px;}
}

/* -------------------------------- trust strip, clean 2x2 on mobile ----- */
@media (max-width:760px){
  .trust-inner{display:grid;grid-template-columns:1fr 1fr;
    gap:14px 18px;justify-content:normal;}
  .trust span{justify-content:flex-start;}
}

/* --------------------------- tap-to-enlarge / full-screen viewer ------- */
section .tf-shot img,section .chn-shot img,section .dg-shot img{cursor:zoom-in;}
.lb{position:fixed;inset:0;z-index:999;background:rgba(20,19,16,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);
  opacity:0;visibility:hidden;transition:opacity .2s ease;}
.lb.is-open{opacity:1;visibility:visible;}
.lb-img{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lb-close{position:absolute;top:14px;right:14px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.35);color:#fff;font-size:24px;line-height:1;
  border-radius:50%;cursor:pointer;}
.lb-close:hover{background:rgba(255,255,255,.16);}
.lb-lab{position:absolute;top:18px;left:18px;right:74px;font-family:'Sora',sans-serif;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#fff;
  background:var(--ox);padding:7px 12px;display:inline-block;width:fit-content;}
body.lb-lock{overflow:hidden;}
@media (prefers-reduced-motion:reduce){.lb{transition:none;}}

/* ------------------------ diagnostic marketing consent, kept separate -- */
.fld > label.chk-single{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:2px 0;text-transform:none;letter-spacing:normal;font-weight:400;margin-bottom:0;}
.chk-single input{accent-color:var(--ox);width:15px;height:15px;margin:2px 0 0;flex:0 0 auto;}
.chk-single span{display:block;font-size:12.6px;color:var(--ink-soft);line-height:1.55;
  text-transform:none;letter-spacing:normal;font-weight:400;}
.chk-single .opt{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.02em;
  text-transform:none;font-weight:400;color:var(--ink-faint);}

/* ------------------------ free diagnostic, one large preview at a time - */
.dg-shot{margin:0 auto;max-width:min(100%,560px);border:1px solid var(--line);
  background:var(--shell-deep);overflow:hidden;}
.dg-shot img{width:100%;height:auto;display:block;}
.dg-cap{margin:14px auto 0;max-width:min(100%,560px);text-align:center;
  font-size:12.4px;color:var(--ink-soft);line-height:1.5;}
.dg-cap b{display:block;color:var(--ink);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:5px;}
@media (max-width:760px){
  .dg-shot,.dg-cap{max-width:min(92vw,420px);}
}
/* Audit "What you receive" carousel only (#dlc): its slides are landscape
   report pages (2480x1160), so the 560px portrait-preview cap above left
   them at ~47% of the content width. On desktop/tablet widths they get a
   share of the container instead. Mobile (<=760px, portrait -m assets) is
   untouched; the Diagnostic page's carousel keeps the 560px rule. */
@media (min-width:761px){
  #dlc .dg-shot,#dlc .dg-cap{max-width:min(84%,1040px);}
}

/* ==========================================================================
   v7 final pre-review pass — phone evidence, lightbox, checkout density
   ========================================================================== */

/* ------------------------------------ phone detail crops for evidence ---
   Wide desktop captures were being shrunk into a 350px column. On a phone
   each one now shows a detail crop (or a phone re-layout of the same board)
   through <picture>; the complete original stays one tap away in the
   viewer. Desktop always receives the original. */
.tf-shot picture,.chn-shot picture,.dg-shot picture{display:block;}
.mtag{display:none;}
.chn-shot picture,.tf-shot--figpdp picture{height:100%;}
@media (max-width:760px){.chn-shot--m picture{height:auto;}}
@media (max-width:760px){
  /* sits under the image, never over the evidence */
  .mtag{display:block;pointer-events:none;text-align:right;
    font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--ink-soft);background:var(--paper);border-top:1px solid var(--line);padding:6px 8px;}
  .sec--dark .mtag{color:rgba(255,255,255,.7);background:transparent;border-top-color:rgba(255,255,255,.18);}
  .tf-pair--mstack{grid-template-columns:1fr!important;gap:10px;}
  .cx-item .chn-shot--m{aspect-ratio:auto!important;height:auto!important;}
  .cx-item .chn-shot--m img{height:auto!important;object-fit:initial;}
  /* the $450 page's documents: the phone layout replaces the sideways scroll */
  .dl-scroll--m{overflow:visible!important;}
  .dl-scroll--m img{width:100%!important;max-width:100%!important;}
  .dl-scroll--m + .dl-hint{display:none!important;}
}

/* ------------------------------------------------ evidence viewer, v2 ---
   A wide screenshot fitted to a tall phone is barely larger than it was on
   the page. On a phone a wide image opens at a readable height and pans
   sideways; a toggle switches between that and the whole image. Pinch
   zoom stays available because the viewport is never locked. */
.lb{align-items:stretch;justify-content:stretch;padding:0;background:rgba(20,19,16,.97);}
.lb-scroll{position:absolute;inset:62px 0 58px;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;}
.lb-scroll .lb-img{margin:auto;max-width:none;max-height:none;flex:0 0 auto;}
.lb-bar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 16px;color:rgba(255,255,255,.7);
  font-family:'Sora',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.lb-tog{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.45);background:none;
  color:#fff;font:inherit;letter-spacing:inherit;cursor:pointer;}
.lb-tog:hover{background:rgba(255,255,255,.12);}
.lb-tog[hidden]{display:none;}
.lb-img.is-zoomable{cursor:zoom-in;} .lb-img.is-zoomed{cursor:zoom-out;}

/* ------------------------------------------------- journey details ----- */
.fixed-val{margin:0;padding:12px 14px;border:1px solid var(--line);background:var(--shell-deep);
  font-size:14px;font-weight:600;color:var(--ink);}
.fixed-val span{display:block;margin-top:3px;font-size:11.6px;font-weight:400;color:var(--ink-soft);}

/* an optional block collapsed by default, so most buyers never see it open */
.fld-disc{border:1px solid var(--line);margin:0 0 17px;}
.fld-disc summary{list-style:none;cursor:pointer;padding:13px 40px 13px 14px;position:relative;
  font-size:12.8px;line-height:1.5;color:var(--ink-soft);}
.fld-disc summary b{color:var(--ink);font-weight:600;}
.fld-disc summary::-webkit-details-marker{display:none;}
.fld-disc summary::after{content:"";position:absolute;right:15px;top:50%;width:11px;height:1px;
  background:var(--ink-faint);transform:translateY(-50%);}
.fld-disc summary::before{content:"";position:absolute;right:20px;top:calc(50% - 5.5px);width:1px;
  height:11px;background:var(--ink-faint);transition:opacity .15s,transform .15s;}
.fld-disc[open] summary{border-bottom:1px solid var(--line);}
.fld-disc[open] summary::before{opacity:0;transform:rotate(90deg);}
.fld-disc-b{padding:16px 14px 2px;}
.fld-disc-b .fld:last-child{margin-bottom:14px;}
.sum-next{margin:18px 0 0;font-size:12.6px;line-height:1.55;color:var(--ink-soft);}
.sum-next b{color:var(--ink);font-weight:600;}
.sx-sub p{margin:0 0 8px;}
.sx-sub .sx-order{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ox);}
.sx-sub .sx-next{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.3;}
.sx-cta{margin-top:clamp(18px,2vw,26px);}
.sum .sum-next{color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.16);padding-top:14px;}
.sum .sum-next b{color:#fff;}
/* on a phone the order summary comes first, so she sees what she is paying
   for before the billing fields rather than after the pay button */
@media (max-width:1080px){.ckt > .sum{order:-1;}}
/* two-stage $2,750 examples stacked on a phone: side by side they were
   165px wide each, which undid the detail crops */
@media (max-width:760px){.cx-item .chn--2:not(.chn--phone){grid-template-columns:1fr;}}
/* the intake shows only the level that was bought; the other two locked
   cards added a phone-screen of greyed-out options for no decision */
.pick > label.is-locked{display:none;}
/* the one-line upgrade note sat inside .pl-notes, which already draws the
   rule, so two rules and an empty band were showing above one sentence */
.pl-notes .pl-onenote{border-top:0;padding-top:0;margin-top:0;}
/* the chip style comes from the dark audit deliverable section; on the light
   $1,500 proof section it was white on white and invisible */
.sec:not(.sec--dark) .spec-chips .chip{color:var(--ink-soft);border-color:var(--line);}
/* on a phone the diagnostic hero cover and the first preview slide were the
   same page one scroll apart; the preview carousel keeps it */
@media (max-width:760px){.ah .spec--img{display:none;}}