/* ══════════════════════════════════════════════════════════════════════════
   DONE — tenant theme layer (loaded after storefront.css, never in the
   template package, survives storefront redeploys).

   Brand:  DONE Blue #3855E8 · DONE Yellow #FFD85A · Deep Blue #233EB7
           Soft Black #171717 · Off White #FAFAF7
   Voice:  HAIR? DONE. — young, confident, playful, fashion-forward.
           Hard edges, oversized type, flat colour blocks. Never soft,
           never corporate, never generic-luxury-beauty.
   ══════════════════════════════════════════════════════════════════════ */

/* Fonts (Archivo Black + Archivo) are linked from ui_head() in _ui.php. */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --done-blue:#3855E8;
  --done-blue-deep:#233EB7;
  --done-blue-ink:#1B2F8F;
  --done-yellow:#FFD85A;
  --done-yellow-hot:#FFCC2E;
  --done-black:#171717;
  --done-white:#FAFAF7;
  --done-line:#E4E1D9;

  /* Remap every template token so anything not explicitly restyled below
     still lands inside the DONE palette. */
  --blush-pink:var(--done-blue);
  --soft-rose:var(--done-blue-deep);
  --coral:var(--done-blue);
  --coral-hover:var(--done-blue-deep);
  --baby-blue:var(--done-yellow);
  --baby-blue-hover:var(--done-yellow-hot);
  --off-white:var(--done-white);
  --charcoal:var(--done-black);
  --gray:#6B6864;
  --light-gray:var(--done-line);

  --heading-font:'Archivo Black','Archivo',Impact,-apple-system,sans-serif;
  --body-font:'Archivo',-apple-system,'Helvetica Neue',sans-serif;

  /* Block-library tokens, so any dropped-in block inherits DONE. */
  --block-accent:var(--done-blue);
  --block-accent-rgb:56,85,232;
  --block-radius-sm:0px; --block-radius-md:0px; --block-radius-lg:0px;
  --block-border-color:var(--done-black);
  --block-border-width:2px;
  --block-border:2px solid var(--done-black);
  --block-bg:var(--done-white);
  --block-surface:#fff;
  --block-text:var(--done-black);
  --block-font:var(--body-font);
  --block-font-heading:var(--heading-font);
}

html{background:var(--done-white);}
body{font-family:var(--body-font);letter-spacing:-.005em;}
h1,h2,h3,h4{font-family:var(--heading-font);letter-spacing:-.03em;line-height:.94;}
::selection{background:var(--done-yellow);color:var(--done-black);}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--done-blue);outline-offset:2px;
}

/* ── 2. SHARED DEVICES ─────────────────────────────────────────────────── */
.dn-eyebrow{
  display:inline-block;font-family:var(--body-font);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--done-blue);margin-bottom:14px;
}
.dn-eyebrow.on-blue,
.dn-band.black .dn-eyebrow,.dn-band.blue .dn-eyebrow,
.dn-legal-hero .dn-eyebrow,.cx-hero .dn-eyebrow,.dn-hero .dn-eyebrow{color:var(--done-yellow);}
.dn-kicker{font-family:var(--heading-font);text-transform:uppercase;}

/* Yellow slab behind a word: <em class="dn-mark">DONE</em> */
.dn-mark{font-style:normal;background:var(--done-yellow);color:var(--done-black);
  padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.dn-blue{color:var(--done-blue);}
.dn-yellow{color:var(--done-yellow);}

/* Scrolling brand band — the site's signature graphic element. */
.dn-marquee{
  background:var(--done-yellow);color:var(--done-black);
  border-top:2px solid var(--done-black);border-bottom:2px solid var(--done-black);
  overflow:hidden;padding:12px 0;white-space:nowrap;
}
.dn-marquee.blue{background:var(--done-blue);color:#fff;border-color:var(--done-blue-ink);}
.dn-marquee-track{display:inline-flex;gap:38px;padding-right:38px;
  animation:dn-scroll 26s linear infinite;will-change:transform;}
.dn-marquee span{font-family:var(--heading-font);font-size:clamp(14px,1.7vw,20px);
  letter-spacing:.02em;text-transform:uppercase;flex:none;}
@keyframes dn-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dn-marquee:hover .dn-marquee-track{animation-play-state:paused;}

/* Full-bleed colour bands */
.dn-band{padding:clamp(56px,7vw,96px) 5%;}
.dn-band.blue{background:var(--done-blue);color:#fff;}
.dn-band.blue h2,.dn-band.blue h3{color:#fff;}
.dn-band.black{background:var(--done-black);color:var(--done-white);}
.dn-band.black h2,.dn-band.black h3{color:#fff;}
.dn-band.yellow{background:var(--done-yellow);color:var(--done-black);}
.dn-band-in{max-width:1180px;margin:0 auto;}

.dn-h2{font-size:clamp(2.1rem,6vw,4.4rem);text-transform:uppercase;margin:0 0 18px;}
.dn-h3{font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase;margin:0 0 12px;}
.dn-lead{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.65;max-width:60ch;opacity:.88;}

/* ── 3. CHROME: announcement, nav ──────────────────────────────────────── */
.announcement{
  background:var(--done-blue);color:#fff;font-family:var(--body-font);
  font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:11px 16px;
}
.announcement span{color:var(--done-yellow);font-weight:800;}

.nav{
  background:var(--done-white);border-bottom:2px solid var(--done-black);
  padding:16px 5%;
}
.nav-wordmark{
  font-family:var(--heading-font);font-size:clamp(24px,2.6vw,30px);
  letter-spacing:-.045em;text-transform:uppercase;color:var(--done-black);line-height:1;
}
.nav-logo a{display:inline-flex;align-items:center;}
.nav-links{gap:26px;font-family:var(--body-font);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;}
.nav-links a{position:relative;padding-bottom:3px;color:var(--done-black);}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--done-yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.nav-links a:hover{color:var(--done-black);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.on{color:var(--done-blue);}
.nav-links a.on::after{transform:scaleX(1);background:var(--done-blue);}
.nav-ico{color:var(--done-black);} .nav-ico:hover{color:var(--done-blue);}
.cc-cart-badge{background:var(--done-blue)!important;border-radius:0!important;
  font-family:var(--body-font);font-weight:800!important;}

/* ── 4. BUTTONS ────────────────────────────────────────────────────────── */
.btn-solid,.btn-add,.pd-add,.cc-checkout-btn,.cc-search-btn,.dn-btn{
  border-radius:0;font-family:var(--body-font);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
.btn-solid{background:var(--done-yellow);color:var(--done-black);
  border:2px solid var(--done-black);padding:12px 24px;font-size:13px;
  transition:background .15s,transform .12s;}
.btn-solid:hover{background:var(--done-yellow-hot);transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--done-black);}
.btn-ghost{border:2px solid var(--done-black);border-radius:0;background:transparent;
  color:var(--done-black);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  font-size:13px;padding:12px 24px;transition:background .15s,color .15s,transform .12s;}
.btn-ghost:hover{background:var(--done-black);color:var(--done-yellow);
  transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--done-blue);}
.dn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;font-size:14px;border:2px solid var(--done-black);cursor:pointer;
  background:var(--done-yellow);color:var(--done-black);
  transition:transform .12s,box-shadow .12s,background .15s;}
.dn-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--done-black);}
.dn-btn.blue{background:var(--done-blue);color:#fff;border-color:var(--done-black);}
.dn-btn.blue:hover{background:var(--done-blue-deep);}
.dn-btn.onblue{background:var(--done-yellow);border-color:#fff;}
.dn-btn.onblue:hover{box-shadow:5px 5px 0 rgba(255,255,255,.85);}
.dn-btn.ghost-white{background:transparent;color:#fff;border-color:#fff;}
.dn-btn.ghost-white:hover{background:#fff;color:var(--done-blue);box-shadow:5px 5px 0 var(--done-yellow);}

/* ── 5. HOMEPAGE HERO ──────────────────────────────────────────────────── */
.dn-hero{
  background:var(--done-blue);color:#fff;position:relative;overflow:hidden;
  border-bottom:2px solid var(--done-black);
}
.dn-hero-in{
  max-width:1380px;margin:0 auto;padding:clamp(44px,6vw,80px) 5% clamp(52px,6vw,84px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;
}
.dn-hero h1{
  font-size:clamp(3.6rem,13vw,10.5rem);line-height:.82;letter-spacing:-.055em;
  text-transform:uppercase;color:#fff;margin:0 0 22px;
}
.dn-hero h1 .l2{display:block;color:var(--done-yellow);}
.dn-hero .dn-sub{
  font-family:var(--heading-font);font-size:clamp(1rem,2.2vw,1.6rem);
  letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0 0 20px;
}
.dn-hero p.dn-hero-copy{font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.6;
  max-width:44ch;color:rgba(255,255,255,.9);margin:0 0 30px;}
.dn-hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
/* Oversized ghost word bleeding off the right edge — the playful graphic layer */
.dn-hero-ghost{
  position:absolute;right:-2%;bottom:-6%;font-family:var(--heading-font);
  font-size:min(28vw,420px);line-height:.7;letter-spacing:-.06em;text-transform:uppercase;
  color:rgba(255,255,255,.085);pointer-events:none;user-select:none;z-index:0;
}
.dn-hero-in>*{position:relative;z-index:1;}

/* Hero card stack (product plates) */
.dn-hero-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.dn-hero-stack .ht-card{
  background:#fff;border:2px solid var(--done-black);border-radius:0;box-shadow:none;
  opacity:0;transition:opacity .4s ease,transform .18s ease;display:flex;flex-direction:column;
}
.dn-hero-stack .ht-card.ht-vis{opacity:1;}
.dn-hero-stack .ht-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--done-yellow);}
.dn-hero-stack .ht-img{aspect-ratio:3/4;flex:none;}
.dn-hero-stack .ht-info{padding:9px 10px 12px;}
.dn-hero-stack .ht-brand{font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--done-blue);}
.dn-hero-stack .ht-name{font-family:var(--heading-font);font-size:12.5px;line-height:1.15;
  text-transform:uppercase;margin:4px 0 6px;color:var(--done-black);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dn-hero-stack .ht-pricing{display:flex;gap:7px;align-items:baseline;}
.dn-hero-stack .ht-member{font-weight:800;font-size:14px;color:var(--done-black);}
.dn-hero-stack .ht-retail{font-size:11px;color:var(--gray);text-decoration:line-through;}

/* ── 6. TRUST BAR ──────────────────────────────────────────────────────── */
.trust-bar{
  background:var(--done-black);color:var(--done-white);
  font-family:var(--body-font);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;gap:clamp(18px,4vw,52px);padding:18px 5%;
  border-bottom:2px solid var(--done-black);
}
.trust-bar span{gap:9px;}
.trust-bar svg{color:var(--done-yellow);}

/* ── 7. SECTIONS + PRODUCT GRID ────────────────────────────────────────── */
.section{padding:clamp(52px,6vw,84px) 5%;}
.dn-band + .section{padding-top:clamp(40px,4.5vw,60px);}
.section-header{align-items:flex-end;margin-bottom:32px;}
.section-header .eyebrow{font-size:11px;letter-spacing:.18em;color:var(--done-blue);
  font-weight:800;text-transform:uppercase;}
.section-header h2{font-family:var(--heading-font);font-size:clamp(1.9rem,4.6vw,3.4rem);
  text-transform:uppercase;letter-spacing:-.035em;line-height:.92;}
.section-header h2 a{color:var(--done-black);}
.section-header a{color:var(--done-blue);font-weight:800;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}

.product-grid{gap:22px;}
.product-card{
  background:#fff;border:2px solid var(--done-black);border-radius:0;padding:0 0 14px;
  transition:transform .15s,box-shadow .15s;
}
.product-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--done-blue);}
.product-img{border-radius:0;margin:0 0 12px;background:#EFEFEA;aspect-ratio:4/5;}
.p-brand{padding:0 14px;font-size:10.5px;letter-spacing:.14em;color:var(--done-blue);font-weight:800;}
.p-name{font-family:var(--heading-font);text-transform:uppercase;font-size:15px;
  line-height:1.12;letter-spacing:-.02em;height:36px;margin:6px 0 10px;padding:0 14px;}
.p-name:hover{color:var(--done-blue);}
.pricing-block,.single-price{border-top:2px solid var(--done-black);padding:11px 14px;margin-bottom:12px;}
.single-price{color:var(--done-black);font-weight:800;font-size:19px;}
.member-val{color:var(--done-black);font-weight:800;}
.p-label{color:var(--gray);letter-spacing:.12em;}
.btn-add{background:var(--done-yellow);color:var(--done-black);border:2px solid var(--done-black);
  border-radius:0;margin:0 14px;width:calc(100% - 28px);padding:12px;font-size:12.5px;}
.btn-add:hover{background:var(--done-yellow-hot);}
.save-badge,.new-badge{border-radius:0;background:var(--done-blue);color:#fff;
  box-shadow:none;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--done-black);padding:4px 9px;}
.save-badge{background:var(--done-yellow);color:var(--done-black);}

/* ── 8. CATEGORY (CURL PATTERN) CARDS ──────────────────────────────────── */
.cat-card{
  border-radius:0;border:2px solid var(--done-black);background:var(--done-blue);
  box-shadow:none;transition:transform .15s,box-shadow .15s;
}
.cat-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--done-yellow);}
.cat-card::after{display:none;}
.cat-card .cat-label{
  font-family:var(--heading-font);font-size:clamp(1.2rem,2.1vw,1.6rem);
  text-transform:uppercase;letter-spacing:-.03em;text-shadow:none;
  padding:16px 20px;width:100%;background:var(--done-black);color:#fff;
  border-top:2px solid var(--done-black);
}
.cat-card .cat-label em{color:var(--done-yellow);font-weight:800;letter-spacing:.12em;
  font-size:.64rem;text-transform:uppercase;opacity:1;margin-top:4px;}
.cat-nav{border-radius:0;border:2px solid var(--done-black);background:var(--done-yellow);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
.cat-nav:hover{background:#fff;}

/* ── 9. FOOTER ─────────────────────────────────────────────────────────── */
.footer{background:var(--done-black);color:var(--done-white);padding:clamp(48px,6vw,76px) 5%;gap:clamp(28px,5vw,60px);}
.footer-col h3{font-family:var(--heading-font);text-transform:uppercase;font-size:13px;
  letter-spacing:.14em;color:var(--done-yellow);margin-bottom:16px;}
.footer-col:first-child h3{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;color:#fff;margin-bottom:10px;}
.footer-col p,.footer-col a{color:#9C9A95;font-size:13.5px;line-height:2;}
.footer-col a:hover{color:var(--done-yellow);}
.footer-bottom{background:var(--done-black);border-top:1px solid #333;color:#6E6C68;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
.social-icons a{color:#9C9A95;} .social-icons a:hover{color:var(--done-yellow);}

/* ── 10. CART DRAWER / SEARCH ──────────────────────────────────────────── */
.cc-cart-drawer,.cc-search-box{border-radius:0;}
.cc-cart-drawer{border-left:2px solid var(--done-black);}
.cc-search-box{border:2px solid var(--done-black);box-shadow:10px 10px 0 var(--done-blue);}
.cc-search-label{font-family:var(--heading-font);text-transform:uppercase;letter-spacing:-.02em;}
.cc-search-input{border-radius:0;}
.cc-search-btn{background:var(--done-blue);color:#fff;border-radius:0;border:2px solid var(--done-black);}
.cc-hint{border-radius:0;border:1.5px solid var(--done-black);background:#fff;
  font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em;}
.cc-hint:hover{background:var(--done-yellow);}
.cc-cart-header{font-family:var(--heading-font);text-transform:uppercase;letter-spacing:-.02em;}
.cc-checkout-btn{background:var(--done-blue);color:#fff;border-radius:0;border:2px solid var(--done-black);}
.cc-checkout-btn:hover{background:var(--done-blue-deep);}
.cc-item-img{border-radius:0;border:1.5px solid var(--done-black);}
.cc-item-name{font-weight:700;}
.cc-item-member{color:var(--done-black);font-weight:800;}
.cc-qty-btn{border-radius:0;border:1.5px solid var(--done-black);}
.cc-ship-fill{background:var(--done-blue);}
.cc-keep-shopping{color:var(--done-blue);font-weight:700;}

/* ── 11. CATEGORY / FACET PAGE (cx-) ───────────────────────────────────── */
.cx-hero{background:var(--done-blue);color:#fff;border-bottom:2px solid var(--done-black);}
.cx-hero h1{color:#fff;font-size:clamp(2.2rem,6vw,4.2rem);text-transform:uppercase;letter-spacing:-.04em;}
.cx-hero p{color:rgba(255,255,255,.9);}
.cx-eyebrow{color:var(--done-yellow);font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.cx-chip,.cx-sort,.cx-fopt,.cx-apill,.cx-fbox{border-radius:0;}
.cx-chip{border:2px solid var(--done-black);font-weight:700;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.08em;background:#fff;}
.cx-chip:hover{background:var(--done-yellow);}
.cx-chip.cx-active{background:var(--done-blue);color:#fff;border-color:var(--done-black);}
.cx-chip.cx-active .cx-chip-n{color:var(--done-yellow);}
.cx-fbox{border:2px solid var(--done-black);background:#fff;}
.cx-flabel{font-family:var(--heading-font);text-transform:uppercase;letter-spacing:-.01em;}
.cx-apill{background:var(--done-yellow);border:1.5px solid var(--done-black);font-weight:700;}
.cx-clear{color:var(--done-blue);font-weight:800;}
.cx-sort{border:2px solid var(--done-black);background:#fff;font-weight:600;}

/* ── 12. PRODUCT DETAIL (pd-) ──────────────────────────────────────────── */
.pd-crumb{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.pd-crumb a:hover{color:var(--done-blue);}
.pd-main,.pd-thumb{border-radius:0;border:2px solid var(--done-black);background-color:#EFEFEA;}
.pd-thumb{border-width:2px;border-color:var(--done-line);}
.pd-thumb:hover,.pd-thumb.on{border-color:var(--done-blue);}
.pd-brand{color:var(--done-blue);letter-spacing:.16em;}
.pd-title{font-family:var(--heading-font);font-size:clamp(2rem,4.4vw,3.2rem);
  text-transform:uppercase;letter-spacing:-.04em;line-height:.94;}
.pd-pricecard{background:var(--done-white);border:2px solid var(--done-black);border-radius:0;}
.pd-member{color:var(--done-black);font-weight:800;font-family:var(--body-font);}
.pd-retail{color:var(--gray);}
.pd-save{background:var(--done-yellow);color:var(--done-black);border:2px solid var(--done-black);
  border-radius:0;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.pd-ship{background:var(--done-yellow);border:2px solid var(--done-black);border-radius:0;
  color:var(--done-black);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.pd-opt label{color:var(--done-black);font-weight:800;letter-spacing:.12em;}
.pd-opt select{border-radius:0;border:2px solid var(--done-black);}
.pd-add{background:var(--done-blue);color:#fff;border:2px solid var(--done-black);
  border-radius:0;padding:17px;font-size:14px;}
.pd-add:hover{background:var(--done-blue-deep);}
.pd-hl{border-top:2px solid var(--done-black);}
.pd-hl svg{color:var(--done-blue);}
.pd-tabs{border-bottom:2px solid var(--done-black);flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;}
.pd-tabs::-webkit-scrollbar{display:none;}
.pd-tab{white-space:nowrap;}
.pd-tab{font-family:var(--heading-font);text-transform:uppercase;font-size:13px;
  letter-spacing:.02em;color:var(--gray);}
.pd-tab.on{color:var(--done-black);border-bottom-color:var(--done-blue);border-bottom-width:4px;margin-bottom:-3px;}
.pd-ki{background:var(--done-white);border:2px solid var(--done-black);border-radius:0;}
.pd-stock.low{color:var(--done-blue);}

/* Two-axis variant picker (DONE: length chips + colour swatches) */
.dn-picker{margin:0 0 20px;}
.dn-picker-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;}
.dn-picker-head label{font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--done-black);}
.dn-picker-head .dn-picked{font-size:12px;font-weight:700;color:var(--gray);}
.dn-opts{display:flex;flex-wrap:wrap;gap:9px;}
.dn-opt{
  border:2px solid var(--done-black);background:#fff;color:var(--done-black);
  font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer;transition:background .13s,transform .1s,box-shadow .1s;
}
.dn-opt:hover:not(.dn-off){background:var(--done-yellow);}
.dn-opt.on{background:var(--done-blue);color:#fff;}
.dn-opt.dn-off{opacity:.4;text-decoration:line-through;}
.dn-opt.dn-off.on{opacity:.75;background:var(--done-black);color:#fff;}
.dn-opt.dn-sw{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;}
.dn-opt.dn-sw i{width:26px;height:26px;display:block;border:2px solid var(--done-black);flex:none;}
.dn-opt.dn-sw.on i{border-color:#fff;}

/* ── 13. HOW IT WORKS / STEP BLOCKS ────────────────────────────────────── */
.dn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--done-black);background:#fff;overflow:hidden;}
.dn-step{padding:clamp(26px,3.4vw,40px);border-right:2px solid var(--done-black);}
.dn-step:last-child{border-right:0;}
.dn-step-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-bottom:2px solid var(--done-black);}
.dn-band.black .dn-step-img,.dn-band.blue .dn-step-img{border-bottom-color:currentColor;}
/* A step carrying a photo hands its padding to an inner body, so the image can
   run the full width of the cell instead of floating inside a gutter. */
.dn-step:has(> .dn-step-img){padding:0;}
.dn-step-body{padding:clamp(26px,3.4vw,40px);}
.dn-band.black .dn-step-img,.dn-band.blue .dn-step-img{border-bottom-color:currentColor;}
.dn-step .n{font-family:var(--heading-font);font-size:clamp(2.6rem,5.5vw,4.2rem);
  line-height:.8;color:var(--done-blue);letter-spacing:-.05em;display:block;margin-bottom:16px;}
.dn-step h3{font-size:clamp(1.1rem,1.9vw,1.5rem);text-transform:uppercase;
  letter-spacing:-.025em;margin:0 0 10px;color:var(--done-black);}
.dn-step p{font-size:14.5px;line-height:1.7;color:#4A4844;margin:0;}
/* 2x2 variant */
.dn-steps.two{grid-template-columns:1fr 1fr;}
.dn-steps.two .dn-step:nth-child(2n){border-right:0;}
.dn-steps.two .dn-step:nth-child(2n+1){border-right:2px solid currentColor;}
.dn-steps.two .dn-step:nth-child(-n+2){border-bottom:2px solid currentColor;}
.dn-steps.two{color:var(--done-black);}
.dn-band.black .dn-steps.two{color:var(--done-yellow);}
.dn-band.blue .dn-steps.two{color:#fff;}
.dn-step:nth-child(2) .n{color:var(--done-blue-deep);}
.dn-step:nth-child(3) .n{color:var(--done-black);}
/* A steps grid dropped into a dark band has to invert: the white card fill and
   near-black step numbers are invisible there, and the band's own h3 colour
   was beating the step's. */
.dn-band.black .dn-steps,.dn-band.blue .dn-steps{background:transparent;}
.dn-band.black .dn-steps{border-color:var(--done-yellow);}
.dn-band.black .dn-step{border-right-color:var(--done-yellow);}
.dn-band.blue .dn-steps{border-color:#fff;}
.dn-band.blue .dn-step{border-right-color:#fff;}
.dn-band.black .dn-step h3,.dn-band.blue .dn-step h3{color:#fff;}
.dn-band.black .dn-step p,.dn-band.blue .dn-step p{color:rgba(255,255,255,.82);}
.dn-band.black .dn-step .n,.dn-band.blue .dn-step .n{color:var(--done-yellow);}
.dn-band.black .dn-stat,.dn-band.blue .dn-stat{color:var(--done-yellow);}
.dn-band.black .dn-stat-l,.dn-band.blue .dn-stat-l{color:#fff;}
@media(max-width:900px){
  .dn-band.black .dn-step,.dn-band.blue .dn-step{border-bottom-color:currentColor;}
  .dn-band.black .dn-step{border-bottom-color:var(--done-yellow);}
  .dn-band.blue .dn-step{border-bottom-color:#fff;}
}

/* ── 14. CURL PATTERN FINDER ───────────────────────────────────────────── */
.dn-finder{max-width:1180px;margin:0 auto;padding:clamp(40px,5vw,64px) 5% clamp(56px,7vw,90px);}
.dn-patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.dn-pattern{
  border:2px solid var(--done-black);background:#fff;display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;
}
.dn-pattern:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--done-blue);}
.dn-pattern-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  background:var(--done-blue);border-bottom:2px solid var(--done-black);}
.dn-pattern-body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1;}
.dn-pattern .code{font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--done-blue);margin-bottom:6px;}
.dn-pattern h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:-.03em;margin:0 0 9px;}
.dn-pattern p{font-size:13.5px;line-height:1.62;color:#4A4844;margin:0 0 16px;}
.dn-pattern .go{margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--done-black);border-top:2px solid var(--done-black);
  padding-top:13px;display:flex;justify-content:space-between;align-items:center;}
.dn-pattern:hover .go{color:var(--done-blue);}

/* Quiz */
.dn-quiz{border:2px solid var(--done-black);background:#fff;padding:clamp(24px,3.6vw,44px);}
.dn-q{display:none;} .dn-q.on{display:block;animation:dn-fade .25s ease both;}
@keyframes dn-fade{from{opacity:0;transform:translateY(8px)}}
.dn-q h3{font-size:clamp(1.35rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:-.03em;margin:0 0 6px;}
.dn-q .qsub{font-size:14px;color:var(--gray);margin:0 0 22px;}
.dn-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.dn-answer{
  border:2px solid var(--done-black);background:#fff;padding:18px 16px;text-align:left;
  font:inherit;cursor:pointer;transition:background .13s,transform .1s,box-shadow .1s;
}
.dn-answer:hover{background:var(--done-yellow);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--done-black);}
.dn-answer b{display:block;font-family:var(--heading-font);font-size:15px;text-transform:uppercase;
  letter-spacing:-.02em;margin-bottom:5px;}
.dn-answer span{font-size:13px;color:#4A4844;line-height:1.55;}
.dn-progress{display:flex;gap:6px;margin-bottom:22px;}
.dn-progress i{height:6px;flex:1;background:var(--done-line);display:block;}
.dn-progress i.on{background:var(--done-blue);}
.dn-result{display:none;} .dn-result.on{display:block;}
.dn-result-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(18px,3vw,36px);align-items:center;}
.dn-result-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  background:var(--done-blue);border:2px solid var(--done-black);}
.dn-restart{background:none;border:0;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--done-blue);cursor:pointer;
  padding:0;margin-top:18px;text-decoration:underline;text-underline-offset:4px;}

/* ── 15. FAQ ACCORDION ─────────────────────────────────────────────────── */
.dn-faq{max-width:860px;margin:0 auto;border-top:2px solid var(--done-black);}
.dn-faq details{border-bottom:2px solid var(--done-black);}
.dn-faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--heading-font);font-size:clamp(.98rem,1.7vw,1.22rem);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.25;color:var(--done-black);
}
.dn-faq summary::-webkit-details-marker{display:none;}
.dn-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;margin-top:-8px;
  background:
    linear-gradient(var(--done-blue),var(--done-blue)) center/100% 3px no-repeat,
    linear-gradient(var(--done-blue),var(--done-blue)) center/3px 100% no-repeat;
  transition:transform .2s;
}
.dn-faq details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--done-blue),var(--done-blue)) center/100% 3px no-repeat;}
.dn-faq summary:hover{color:var(--done-blue);}
.dn-faq .a{padding:0 0 24px;font-size:14.5px;line-height:1.78;color:#4A4844;max-width:70ch;}
.dn-faq .a p{margin:0 0 12px;} .dn-faq .a p:last-child{margin:0;}
.dn-faq .a a{color:var(--done-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.dn-faq-group{font-family:var(--heading-font);text-transform:uppercase;font-size:11px;
  letter-spacing:.18em;color:var(--done-blue);padding:30px 0 10px;}

/* ── 16. CONTACT ───────────────────────────────────────────────────────── */
.dn-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);
  max-width:1180px;margin:0 auto;padding:clamp(44px,5.5vw,72px) 5% clamp(56px,7vw,90px);}
.dn-form{display:flex;flex-direction:column;gap:16px;}
.dn-field label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:7px;color:var(--done-black);}
.dn-field input,.dn-field textarea,.dn-field select{
  width:100%;border:2px solid var(--done-black);background:#fff;border-radius:0;
  padding:13px 14px;font:inherit;font-size:15px;color:var(--done-black);
}
.dn-field input:focus,.dn-field textarea:focus,.dn-field select:focus{
  outline:none;border-color:var(--done-blue);box-shadow:4px 4px 0 var(--done-yellow);
}
.dn-field textarea{min-height:150px;resize:vertical;}
.dn-info{border:2px solid var(--done-black);background:var(--done-blue);color:#fff;
  padding:clamp(24px,3vw,36px);align-self:start;}
.dn-info h3{color:#fff;text-transform:uppercase;font-size:1.4rem;letter-spacing:-.03em;margin:0 0 18px;}
.dn-info dt{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--done-yellow);margin-top:18px;}
.dn-info dd{margin:5px 0 0;font-size:15px;line-height:1.6;}
.dn-info a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.dn-note{border:2px solid var(--done-black);background:var(--done-yellow);
  padding:16px 18px;font-size:13.5px;line-height:1.6;font-weight:600;}
.dn-flash{border:2px solid var(--done-black);padding:14px 16px;font-weight:700;font-size:14px;margin-bottom:20px;}
.dn-flash.ok{background:var(--done-yellow);}
.dn-flash.err{background:#fff;color:var(--done-blue-deep);}

/* ── 17. ABOUT / EDITORIAL ─────────────────────────────────────────────── */
.dn-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--done-black);}
.dn-split>div{padding:clamp(28px,4vw,54px);}
.dn-split>div:first-child{border-right:2px solid var(--done-black);}
.dn-stat{font-family:var(--heading-font);font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:.85;letter-spacing:-.05em;color:var(--done-blue);display:block;}
.dn-stat-l{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--done-black);margin-top:10px;display:block;}
.dn-rule{border:0;border-top:2px solid var(--done-black);margin:clamp(36px,5vw,56px) 0;}
.dn-prose{max-width:70ch;}
.dn-prose p{font-size:15.5px;line-height:1.8;color:#3D3B37;margin:0 0 18px;}
.dn-prose h3{margin:32px 0 12px;}
.dn-prose ul{margin:0 0 18px;padding-left:20px;}
.dn-prose li{font-size:15px;line-height:1.8;color:#3D3B37;margin-bottom:6px;}
.dn-prose a{color:var(--done-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ── 18. LEGAL PAGES ───────────────────────────────────────────────────── */
.dn-legal-hero{background:var(--done-black);color:#fff;padding:clamp(44px,5.5vw,72px) 5%;
  border-bottom:2px solid var(--done-black);}
.dn-legal-hero h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;
  letter-spacing:-.04em;margin:0 0 10px;}
.dn-legal-hero p{color:#A8A6A1;font-size:14.5px;margin:0;max-width:60ch;}
.dn-legal{max-width:800px;margin:0 auto;padding:clamp(40px,5vw,64px) 5% clamp(60px,7vw,92px);}
.dn-legal h2{font-size:clamp(1.15rem,2.2vw,1.5rem);text-transform:uppercase;letter-spacing:-.025em;
  margin:40px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--done-black);}
.dn-legal h2:first-of-type{margin-top:0;}
.dn-legal h3{font-size:1rem;text-transform:uppercase;letter-spacing:-.01em;margin:24px 0 8px;}
.dn-legal p,.dn-legal li{font-size:14.5px;line-height:1.8;color:#3D3B37;}
.dn-legal p{margin:0 0 14px;}
.dn-legal ul,.dn-legal ol{margin:0 0 16px;padding-left:20px;}
.dn-legal li{margin-bottom:6px;}
.dn-legal a{color:var(--done-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.dn-legal table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 18px;}
.dn-legal th{background:var(--done-blue);color:#fff;text-align:left;padding:11px 14px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.dn-legal td{padding:11px 14px;border-bottom:1px solid var(--done-line);}
.dn-legal tr:last-child td{border-bottom:0;}
.dn-todo{border:2px dashed var(--done-blue);background:#EEF1FE;padding:14px 16px;
  font-size:13.5px;line-height:1.65;color:var(--done-blue-ink);margin:0 0 18px;}
.dn-todo b{font-weight:800;}
.dn-missing{background:var(--done-yellow);color:var(--done-blue-ink);border:1.5px solid var(--done-blue);
  padding:1px 7px;font-weight:800;font-size:.92em;white-space:nowrap;}
.dn-legal-cards{max-width:860px;margin:0 auto;padding:clamp(40px,5vw,64px) 5% clamp(60px,7vw,92px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.dn-legal-card{border:2px solid var(--done-black);background:#fff;padding:24px;
  transition:transform .15s,box-shadow .15s;}
.dn-legal-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--done-blue);}
.dn-legal-card h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:-.025em;margin:0 0 7px;}
.dn-legal-card p{font-size:13.5px;color:#4A4844;line-height:1.6;margin:0;}

/* ── 18b. CHECKOUT / CART / ACCOUNT ────────────────────────────────────
   These pages carry their own inline CSS in checkout.php, cart.php and
   account.php. They already read the template tokens (so the palette follows
   DONE automatically); what they don't inherit is the hard-edged geometry, so
   the highest-value pages on the site kept looking like a different brand. */
.co-head h1,.acct-title{font-family:var(--heading-font);text-transform:uppercase;
  letter-spacing:-.04em;font-size:clamp(1.9rem,4vw,2.8rem);}
.co-head a{color:var(--done-blue);font-weight:800;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.1em;}
.co-card,.co-sum,.acct-card,.acct-panel,.sheet{border-radius:0!important;
  border:2px solid var(--done-black)!important;}
.co-card h2,.co-sum h2,.acct-h3{font-family:var(--heading-font);text-transform:uppercase;
  letter-spacing:-.02em;font-size:1.05rem;}
.co-f input,.co-f select,.co-disc input,.acct-input{border-radius:0!important;
  border:2px solid var(--done-black)!important;}
.co-f input:focus,.co-f select:focus,.co-disc input:focus,.acct-input:focus{
  border-color:var(--done-blue)!important;box-shadow:4px 4px 0 var(--done-yellow)!important;}
.co-f input:hover,.co-f select:hover{border-color:var(--done-blue)!important;}
.co-disc button,.acct-link,.pbtn{border-radius:0!important;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;}
.co-pay{border-radius:0!important;background:var(--done-blue)!important;color:#fff!important;
  border:2px solid var(--done-black)!important;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:17px!important;}
.co-pay:hover{background:var(--done-blue-deep)!important;}
.co-pay:disabled{opacity:.45;}
.co-li .ci,.co-ship-opts label,.acct-pill,.acct-tag{border-radius:0!important;}
.co-li .ci{border:1.5px solid var(--done-black);}
.co-li .qb{border-radius:0!important;background:var(--done-blue)!important;}
.co-ship-opts label{border:2px solid var(--done-black)!important;}
.co-ship-opts label.on{border-color:var(--done-blue)!important;background:#EEF1FE!important;}
.co-rows .tot{border-top:2px solid var(--done-black);font-family:var(--body-font);font-weight:800;}
.co-rows .r.free b{color:var(--done-blue)!important;}
.acct-pill,.acct-tag{border:1.5px solid var(--done-black);font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;}
.cart-line,.summary{border-radius:0;}
.summary .row b{font-weight:800;}

/* ── 19. EMPTY / NOTICE ────────────────────────────────────────────────── */
.empty h2{font-family:var(--heading-font);text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.4vw,2.2rem);}
.notice{border-radius:0;border:2px solid var(--done-black);}
.mid-banner{background:var(--done-blue);color:#fff;border-top:2px solid var(--done-black);
  border-bottom:2px solid var(--done-black);}
.mid-banner h2,.mid-banner h2 a{color:#fff;text-transform:uppercase;letter-spacing:-.04em;}
.mid-banner p{color:rgba(255,255,255,.9);}

/* ── 19b. MOBILE MENU ──────────────────────────────────────────────────── */
.nav-burger{display:none;width:38px;height:32px;padding:6px 4px;background:none;border:0;
  cursor:pointer;flex-direction:column;justify-content:space-between;}
.nav-burger span{display:block;height:3px;width:100%;background:var(--done-black);
  transition:transform .18s ease,opacity .15s ease;}
.nav-burger.on span:nth-child(1){transform:translateY(8.5px) rotate(45deg);}
.nav-burger.on span:nth-child(2){opacity:0;}
.nav-burger.on span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);}

.cc-menu{position:fixed;inset:0;z-index:400;background:var(--done-blue);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:80px 8vw 40px;}
.cc-menu[hidden]{display:none;}
.cc-menu-close{position:absolute;top:18px;right:18px;width:44px;height:44px;
  background:var(--done-yellow);color:var(--done-black);border:2px solid var(--done-black);
  font-size:19px;line-height:1;cursor:pointer;font-weight:700;}
.cc-menu-links{display:flex;flex-direction:column;gap:4px;}
.cc-menu-links a{font-family:var(--heading-font);font-size:clamp(2rem,9vw,3.1rem);
  line-height:1.06;letter-spacing:-.04em;text-transform:uppercase;color:#fff;padding:5px 0;}
.cc-menu-links a::after{display:none;}
.cc-menu-links a.on{color:var(--done-yellow);}
.cc-menu-foot{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:9px;
  border-top:2px solid rgba(255,255,255,.35);}
.cc-menu-foot a{color:rgba(255,255,255,.85);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;}
.cc-menu-foot a:hover{color:var(--done-yellow);}

/* ── 20. RESPONSIVE ────────────────────────────────────────────────────── */
@media(max-width:1024px){
  .dn-hero-in{grid-template-columns:1fr;gap:34px;}
  .dn-hero-stack{grid-template-columns:repeat(3,1fr);}
  .dn-result-card{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .dn-steps{grid-template-columns:1fr;}
  .dn-step{border-right:0;border-bottom:2px solid var(--done-black);}
  .dn-step:last-child{border-bottom:0;}
  .dn-split{grid-template-columns:1fr;}
  .dn-split>div:first-child{border-right:0;border-bottom:2px solid var(--done-black);}
  .dn-contact{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .nav{padding:13px 5%;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-actions{gap:16px;}
  .dn-hero h1{font-size:clamp(3.2rem,17vw,6rem);}
  .dn-hero-ghost{display:none;}
  .trust-bar{font-size:10.5px;gap:14px;letter-spacing:.08em;}
  .footer{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .dn-hero-stack{grid-template-columns:repeat(3,1fr);gap:7px;}
  .dn-hero-stack .ht-info{padding:7px 8px 9px;}
  .dn-hero-stack .ht-name{font-size:10.5px;}
  .dn-hero-stack .ht-member{font-size:12px;}
  .footer{grid-template-columns:1fr;}
  .dn-band{padding:44px 5%;}
}

/* ── 21. MOTION ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .dn-marquee-track{animation:none;}
}