/* CACHET privacy pass. Line loom (build a piece) + timelock dial (try a buy) +
   privacy indicators (nav badge, hero pill, three-step band, public/private
   split, private-by strip). Additive only: no id, data attribute or JS-owned
   markup is touched here, only new wrappers and pure presentation. */

/* --- Nav badge -------------------------------------------------------- */
.nav-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;margin-left:4px;border:1px solid var(--line);border-radius:999px;background:var(--tint);color:var(--ink-soft);font:400 12px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.nav-badge svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--accent-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1023px){.nav-badge{display:none}}

/* --- Hero pill + lock glyph -------------------------------------------- */
.privacy-pill{display:inline-flex;align-items:center;gap:8px}
.privacy-pill .lock-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-sub{max-width:60ch;font-size:clamp(16px,1.6vw,20px);line-height:1.65;color:var(--ink-soft);margin-top:20px}
.hero-secondary{max-width:52ch;font:600 clamp(17px,1.8vw,22px)/1.5 var(--font-display);letter-spacing:-.01em;margin-top:16px}

/* --- Why this is private, three-step band ------------------------------ */
.privacy-band{width:calc(100% - 32px);max-width:1800px;margin:0 auto 48px;padding:32px 24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.privacy-band-kicker{font:500 13px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-deep);margin-bottom:20px}
.privacy-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0;counter-reset:privacy-step}
.privacy-step{position:relative;padding-left:44px;min-width:0}
.privacy-step+.privacy-step{border-left:1px solid var(--line);padding-left:24px;margin-left:0}
.privacy-step:first-child{padding-left:44px}
.privacy-step-lock{position:absolute;left:0;top:2px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent-deep)}
.privacy-step:first-child .privacy-step-lock{position:static;margin-bottom:12px}
.privacy-step-lock .lock-icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.privacy-step-index{display:block;font:400 12px/1.4 var(--font-mono);color:var(--ink-soft);letter-spacing:.06em;margin-bottom:6px}
.privacy-step p{font:600 17px/1.4 var(--font-display);letter-spacing:-.01em;margin:0}
.privacy-step small{display:block;margin-top:6px;font:400 13px/1.5 var(--font-body);color:var(--ink-soft)}
@media(max-width:1023px){.privacy-steps{grid-template-columns:minmax(0,1fr)}.privacy-step{padding-left:44px}.privacy-step+.privacy-step{border-left:0;border-top:1px solid var(--line);padding-top:20px;padding-left:44px}.privacy-step .privacy-step-lock,.privacy-step:first-child .privacy-step-lock{position:absolute;left:0;top:2px;margin-bottom:0}.privacy-step:first-child{padding-top:0}}

/* --- Try a buy: timelock dial ------------------------------------------ */
.dial-frame{position:relative;margin-top:12px}
.dial-face{position:absolute;left:50%;top:50%;width:min(460px,120%);height:auto;transform:translate(-50%,-50%);opacity:.22;pointer-events:none;z-index:0}
.dial-face circle{fill:none;stroke:var(--accent-2);stroke-width:1}
.dial-face circle.dial-ring-outer{stroke-dasharray:3 9}
.dial-face path{stroke:var(--accent-deep);stroke-width:1.5;stroke-linecap:round}
.dial-caption{position:relative;z-index:1;font:400 13px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:12px}
.dial-frame .buy-buttons{position:relative;z-index:1}
.dial-frame .buy-choice{border-radius:20px 20px 40px 40px;transition:transform 220ms var(--ease),border-color 220ms var(--ease),background 180ms var(--ease)}
.dial-frame .buy-choice:nth-child(1){transform:rotate(-3deg)}
.dial-frame .buy-choice:nth-child(2){transform:rotate(-1deg) translateY(-4px)}
.dial-frame .buy-choice:nth-child(3){transform:rotate(1deg) translateY(-4px)}
.dial-frame .buy-choice:nth-child(4){transform:rotate(3deg)}
.dial-frame .buy-choice:hover{transform:translateY(-6px)}
@media(max-width:767px){.dial-face{display:none}.dial-frame .buy-choice{transform:none!important}}
@media(prefers-reduced-motion:reduce){.dial-frame .buy-choice{transition:none}.dial-frame .buy-choice:hover{transform:none}}

/* Sealed flat-lines readout beside the demo result. Decorative and static:
   no live round exists yet, so it previews the format rather than counting
   down to anything real. */
.timelock-panel{position:relative;z-index:1;margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--tint);text-align:center}
.timelock-panel-label{margin-bottom:12px}
.timelock-panel .tag{display:inline-block}
.timelock-lines{width:100%;max-width:220px;height:auto;margin:0 auto}
.timelock-lines line{stroke:var(--accent-2);stroke-width:2;stroke-linecap:round}
.timelock-panel-copy{margin-top:14px;font:600 16px/1.4 var(--font-display);letter-spacing:-.01em}
.timelock-panel-clock{margin-top:6px;font:400 28px/1.2 var(--font-mono);letter-spacing:.04em;color:var(--accent-deep)}
.timelock-panel-note{margin-top:6px;font-size:12px;color:var(--ink-soft)}

/* --- What is public, what stays private --------------------------------- */
.public-private{width:calc(100% - 32px);max-width:1800px;margin:64px auto}
.public-private .component-title{font-size:clamp(1.5rem,2.4vw,2rem)}
.public-private .component-caption{max-width:64ch}
.public-private-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.public-private-col{padding:24px;border:1px solid var(--line);border-radius:16px}
.public-private-col.is-public{background:var(--card)}
.public-private-col.is-private{background:linear-gradient(180deg,var(--tint),var(--card))}
.public-private-kicker{font:500 13px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.is-public .public-private-kicker{color:var(--ink-soft)}
.is-private .public-private-kicker{color:var(--accent-deep)}
.public-private-col ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.public-private-col li{padding-left:20px;position:relative;font-size:16px;line-height:1.5}
.is-public li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--ink-soft)}
.is-private li::before{content:'';position:absolute;left:2px;top:5px;width:8px;height:10px;border:1px solid var(--accent-deep);border-radius:2px}
@media(max-width:767px){.public-private-grid{grid-template-columns:minmax(0,1fr)}}

/* --- Private by strip, above the footer --------------------------------- */
.private-by-strip{width:calc(100% - 32px);max-width:1800px;margin:0 auto 32px;padding:16px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.private-by-strip p{font:400 13px/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.private-by-label{color:var(--ink)}
.private-by-strip span[aria-hidden]{color:var(--accent-deep);margin-inline:6px}

/* --- Line loom, build a piece ------------------------------------------- */
.build-controls-frame{position:relative}
.loom-caption{font:400 13px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:16px}
#buildControls .segments{position:relative;align-items:flex-end}
#buildControls .segments::before{content:'';position:absolute;left:8px;right:8px;bottom:34px;height:1px;background:linear-gradient(90deg,var(--accent-2),var(--accent-deep));opacity:.3;pointer-events:none}
#buildControls .segments button{position:relative;flex:1 1 96px;min-height:96px;justify-content:flex-end;align-items:center;text-align:center;overflow:visible}
#buildControls .segments button::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:20px;background:linear-gradient(180deg,var(--accent-2),var(--accent-deep));transform:translateX(-50%) scaleY(.55);transform-origin:bottom;transition:transform 220ms var(--ease),opacity 220ms var(--ease);opacity:.55}
#buildControls .segments button:hover::before{transform:translateX(-50%) scaleY(.85) skewX(-4deg);opacity:.85}
#buildControls .segments button[aria-pressed="true"]{border-color:var(--accent-deep)}
#buildControls .segments button[aria-pressed="true"]::before{transform:translateX(-50%) scaleY(1) skewX(-7deg);opacity:1}
.loom-readout{border:1px solid var(--line);border-radius:16px;padding:24px;background:repeating-linear-gradient(90deg,var(--hairline) 0 1px,transparent 1px 24px),var(--card)}
.loom-readout-label{font:400 12px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:12px}
@media(prefers-reduced-motion:reduce){#buildControls .segments button::before{transition:none}}