/* ============================================================
   OOWIA - LEGAL DOCUMENTS (legal.css)
   Shared by /legal · /privacy-policy · /returns-policy
   One doc design system; each page carries its own set-piece.
   ============================================================ */

/* ============ DOC HERO ============ */
.dhero{position:relative;overflow:hidden;padding-top:calc(var(--navh) + clamp(40px,7vh,88px));padding-bottom:clamp(34px,5vw,64px)}
.dhero-glyph{position:absolute;top:50%;right:-1.5vw;transform:translateY(-52%);z-index:0;pointer-events:none;user-select:none;
  font-family:"Inter Tight";font-weight:600;line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px rgba(11,11,12,.14);font-size:clamp(16rem,30vw,30rem);
  animation:dGlyphFloat 11s ease-in-out infinite}
@keyframes dGlyphFloat{0%,100%{transform:translateY(-56%) rotate(-2deg)}50%{transform:translateY(-48%) rotate(2deg)}}
.dhero .wrap{position:relative;z-index:1}
.dkick{font-family:"Inter",sans-serif;font-size:.685rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-40);margin:0 0 clamp(14px,2vw,22px);display:flex;align-items:center;gap:.7em}
.dkick .dot{width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none;transform:translateY(-1px)}
.dhero-h{font-size:clamp(2.6rem,min(6.4vw,5.6rem),6.2rem);margin:0;max-width:18ch}
.dhero-lede{margin:clamp(16px,2.4vh,26px) 0 0;font-size:clamp(1rem,1.24vw,1.22rem);line-height:1.62;color:var(--ink-60);max-width:58ch}
.dmeta{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:clamp(20px,3vh,32px) 0 0;padding:0}
.dmeta li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  background:rgba(253,252,250,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:"Inter Tight",sans-serif;font-size:.78rem;font-weight:500;letter-spacing:-.01em;color:var(--ink-80);white-space:nowrap}
.dmeta li b{font-weight:600;color:var(--ink)}
.dmeta .bdot{width:5px;height:5px;border-radius:50%;background:var(--crimson);flex:none}

/* privacy counter chips */
.dmeta .cnt b{font-family:"Inter Tight";font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums;transition:color .4s}
.dmeta .cnt.hit b{color:var(--crimson)}

/* returns ghost arrow - draws itself, then drifts */
.dhero-ret{position:absolute;top:50%;right:1vw;z-index:0;pointer-events:none;overflow:visible;
  width:clamp(260px,32vw,460px);height:auto;transform:translateY(-52%);
  animation:dRetFloat 11s ease-in-out infinite}
@keyframes dRetFloat{0%,100%{transform:translateY(-57%) rotate(-3deg)}50%{transform:translateY(-46%) rotate(3deg)}}
.dhero-ret path{fill:none;stroke:rgba(11,11,12,.15);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:dRetDraw 1.7s var(--ease-io) .45s forwards}
.dhero-ret .ret-b{stroke-width:9.5;animation-duration:.8s;animation-delay:1.75s}
@keyframes dRetDraw{to{stroke-dashoffset:0}}

/* ============ DOC LAYOUT ============ */
/* .doc-wrap/.toc-rail in public.css; keep legal .doc-grid placement */
.doc-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start;padding-top:clamp(10px,2vh,24px)}
@media(max-width:1080px){.doc-grid{grid-template-columns:1fr}}

/* ============ PROSE / CLAUSES ============ */
.prose{max-width:76ch}
.clause{margin-bottom:clamp(38px,5vw,64px)}
.clause-head{position:relative;margin-bottom:clamp(14px,1.8vw,20px)}
.cl-no{position:absolute;top:-.14em;left:-.06em;z-index:0;font-family:"Instrument Serif";font-style:italic;
  font-size:clamp(3.4rem,5vw,4.6rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(200,16,46,.4);user-select:none}
.cl-t{position:relative;z-index:1;display:block;padding-left:clamp(46px,4.6vw,64px);overflow:hidden}
.cl-t .ln{padding-block:.08em .12em;margin-block:-.08em -.12em}
.clause-head .cl-bar{display:block;width:56px;height:2px;background:var(--ink);margin:10px 0 0 clamp(46px,4.6vw,64px);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.clauses .clause.is-in .cl-bar{transform:scaleX(1)}
.prose p{margin:0 0 1.05em;font-size:.98rem;line-height:1.75;color:var(--ink-80)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--crimson);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(200,16,46,.35);transition:text-decoration-color .3s}@media(hover:hover){
.prose a:hover{text-decoration-color:var(--crimson)}}
.prose ul.doc-list{list-style:none;margin:0 0 1.05em;padding:0;display:flex;flex-direction:column;gap:.55em}
.prose ul.doc-list li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.65;color:var(--ink-80)}
.prose ul.doc-list li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;background:var(--crimson)}
.note{margin:1.15em 0 0;padding:13px 18px;border-radius:14px;background:var(--crimson-soft);
  border:1px solid rgba(200,16,46,.2);font-size:.84rem;line-height:1.6;color:var(--ink-80)}
.note b{font-weight:600;color:var(--crimson)}
.note.mute{background:var(--ink-08);border-color:var(--line)}
.note.mute b{color:var(--ink)}

/* ============ TERMS - signature + seal ============ */
.signwrap{margin-top:clamp(44px,6vw,72px);padding-top:clamp(26px,3.4vw,40px);border-top:2px solid var(--ink);
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.sign-meta .sk{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);display:block;margin-bottom:6px}
.sign-meta h3{font-family:"Inter Tight";font-weight:600;font-size:1.15rem;letter-spacing:-.02em;margin:0 0 4px}
.sign-meta p{margin:0;font-size:.84rem;color:var(--ink-60)}
.sign-svg{width:min(320px,68vw);height:auto;overflow:visible}
.sign-svg path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000}
.sign-svg .s2{stroke-width:1.8;opacity:.65}
.is-in .sign-svg path.s1{transition:stroke-dashoffset 1.9s var(--ease-io) .3s}
.is-in .sign-svg path.s2{transition:stroke-dashoffset 1.1s var(--ease-io) 2s}
.is-in .sign-svg path{stroke-dashoffset:0}
.sealbox{position:relative;width:128px;height:128px;flex:none;opacity:0}
.signwrap.is-in .sealbox{animation:sealStamp .7s cubic-bezier(.34,1.45,.44,1) 2.5s forwards}
@keyframes sealStamp{0%{opacity:0;transform:scale(1.7) rotate(6deg)}55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-7deg)}}
.seal-ring{position:absolute;inset:0;animation:sealSpin 26s linear infinite}
@keyframes sealSpin{to{transform:rotate(360deg)}}
.sealbox svg{width:100%;height:100%;color:var(--crimson)}
.seal-core{position:absolute;inset:0;display:grid;place-items:center;font-family:"Instrument Serif";font-style:italic;
  font-size:2.4rem;color:var(--crimson)}

/* ============ PRIVACY - ledger + cookies ============ */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);margin:1.3em 0 0}
.panel{border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2vw,22px);background:var(--ivory-pure)}
.panel.good{border-color:rgba(200,16,46,.28);box-shadow:0 18px 44px -34px rgba(200,16,46,.45)}
.panel h3{display:flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);margin:0 0 12px}
.panel h3 .pdot{width:7px;height:7px;border-radius:50%;flex:none}
.panel.hold h3 .pdot{background:var(--ink)}
.panel.never h3 .pdot{background:var(--crimson);animation:livePulse 1.8s ease-in-out infinite}
.lrow{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px dashed var(--line);font-size:.88rem;color:var(--ink-80)}
.lrow:last-child{border-bottom:0}
.lrow svg{flex:none;color:var(--ink-40)}
.panel.never .lrow svg{color:var(--crimson)}
.lrow b{font-weight:550;color:var(--ink)}
.lrow span{margin-left:auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);white-space:nowrap}
.cookiecard{margin:1.3em 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ivory-pure)}
.cookiecard table{width:100%;border-collapse:collapse;font-size:.85rem}
.cookiecard th{text-align:left;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);
  padding:12px 16px;border-bottom:2px solid var(--ink)}
.cookiecard td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-80)}
.cookiecard tr:last-child td{border-bottom:0}
.cookiecard code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;color:var(--crimson);
  background:var(--crimson-soft);padding:2px 7px;border-radius:7px}

/* ============ RETURNS - reverse clock + eligibility ============ */
.revtl{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.revtl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink-08)}
.revtl::after{content:"";position:absolute;right:0;top:7px;height:2px;width:100%;background:var(--crimson);
  transform:scaleX(0);transform-origin:right;transition:transform 1.7s var(--ease) .25s}
.revtl.is-in::after{transform:scaleX(1)}
.rev-arrow{position:absolute;top:-9px;left:0;width:18px;height:18px;color:var(--crimson);
  opacity:0;transition:opacity .4s 1.7s}
.revtl.is-in .rev-arrow{opacity:1}
.rev-i{position:relative;padding-top:30px}
.rev-i::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--ivory-pure);
  border:2.5px solid var(--crimson);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.45,.44,1);transition-delay:var(--d,0ms)}
.rev-i.is-in::before{transform:scale(1)}
.rev-i b{display:block;font-family:"Inter Tight";font-weight:600;font-size:clamp(1.02rem,1.4vw,1.24rem);letter-spacing:-.03em;margin-bottom:5px}
.rev-i span{font-size:.82rem;color:var(--ink-60);line-height:1.5;display:block;max-width:22ch}
@media(max-width:900px){
  .revtl{grid-template-columns:1fr 1fr;gap:24px 18px}
  .revtl::before,.revtl::after,.rev-arrow{display:none}
  .rev-i{padding-top:0;padding-left:28px}
  .rev-i::before{left:0;top:4px}
}
.elig{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);margin:1.3em 0 0}
.ecard{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--ivory-pure);
  opacity:0;transform:translateY(18px) rotate(var(--tilt,0deg));transition:opacity .6s var(--ease),transform .7s var(--ease),border-color .35s,box-shadow .45s var(--ease);transition-delay:var(--d,0ms)}
.ecard.is-in{opacity:1;transform:none}@media(hover:hover){
.ecard:hover{border-color:rgba(200,16,46,.4);box-shadow:0 22px 44px -28px rgba(200,16,46,.35)}}
.eic{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  transform:scale(0);transition:transform .5s cubic-bezier(.34,1.45,.44,1) calc(var(--d,0ms) + 220ms)}
.ecard.is-in .eic{transform:scale(1)}
.ecard.ok .eic{background:var(--crimson-soft);color:var(--crimson)}
.ecard.no .eic{background:var(--ink-08);color:var(--ink-40)}
.ecard.no{--tilt:-.6deg;background:rgba(253,252,250,.5)}
.ecard.ok{--tilt:.6deg}
.ecard h3{margin:0 0 4px;font-family:"Inter Tight";font-weight:600;font-size:.94rem;letter-spacing:-.02em;color:var(--ink)}
.ecard p{margin:0;font-size:.78rem;line-height:1.55;color:var(--ink-60);max-width:34ch}

/* ============ BAND (subset shared with catalogue/category) ============ */
/* band in public.css */
.sec-band{padding-block:0 clamp(80px,10vw,160px)}

/* ============ RESPONSIVE ============ */
@media(max-width:720px){
  .dhero-glyph{right:-8vw;opacity:.6}
  .dhero-ret{right:-6vw;opacity:.55;width:220px}
  .ledger{grid-template-columns:1fr}
  .elig{grid-template-columns:1fr}
  .signwrap{flex-direction:column;align-items:flex-start}
  .cl-no{font-size:3rem}
}