/* usediscretion.ai stylesheet. Lifted from 2026-08-26_usediscretion-prototype_v6.html on 2026-09-05
   (static build, session 1). Tokens: 07 wins everything; DESIGN-TOKENS.md is the build bridge.

   FONTS. The body face is Open Sans (07, 7.4), self-hosted from /fonts/ so the site makes no outside
   request. One variable woff2 (latin subset, weight axis 300 to 800) serves both 400 and 700; downloaded
   2026-09-05 from Google's font server on Denis's yes (kickoff rule 6). The Google Fonts interim that
   shipped earlier the same day is gone. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/fonts/open-sans-latin-wght.woff2") format("woff2")}

/* ==========================================================================
   Discretion design tokens
   Source: discretion/marketing/assets/brand/claude-design-v2/tokens.css
   (derived export; DESIGN-TOKENS.md wins; 07 wins everything).
   Refreshed 2026-08-05 for prototype v3; carried unchanged into v5 and v6.
   Lifted into styles.css for the static build 2026-09-05 (session 1).
   v6 built 2026-08-26 from 2026-08-26_site-page-copy_v6.md (copy identical to approved v5 plus
   the recorded "Edit what you wrote" line), challenges from 2026-08-25_hero-copy-and-challenges_v2.md,
   visual direction B2 (canvas 865add9f, ruled 2026-08-25), Hero type level per 07 (7.4).
   ========================================================================== */
:root{
  /* Warm neutral ramp */
  --n-50:#FBFAF5; --n-100:#F2EFE9; --n-200:#ECE8DF; --n-300:#D8D2C6;
  --n-400:#B3ABA3; --n-500:#A89F92; --n-600:#8A8175; --n-700:#6B6358;
  --n-800:#3E3830; --n-900:#221C16;
  /* Oxblood accent ramp */
  --ox-50:#F5E7E5; --ox-100:#EBD2CF; --ox-300:#C98E89;
  --ox-600:#7A2222; --ox-700:#641A1A; --ox-ondark:#DB8E86;
  /* Taupe / button family */
  --t-300:#CFC9C0; --t-400:#B3ABA3; --t-500:#9C9388;
  /* Semantic aliases */
  --bg:var(--n-100); --surface:var(--n-50); --sunken:var(--n-200);
  --ink:var(--n-900); --text-2:var(--n-700); --text-strong:var(--n-800);
  --border:var(--n-300);
  --accent:var(--ox-600); --accent-hover:var(--ox-700);
  --accent-tint:var(--ox-50); --accent-on-dark:var(--ox-ondark);
  --button:var(--t-400); --button-hover:var(--t-500); --button-label:var(--ink);
  /* Dark ground (reverse: footers, callout bands, section breaks) */
  --dark-bg:#221C16; --dark-text:#F2EFE9; --dark-text-2:#BCB3A4;
  --dark-accent:#DB8E86; --dark-hairline:#3E3830;
  /* Semantic states */
  --success:#2E6B4D; --warning:#8A5A15; --error:#9B2226; --info:#3C566A;
  /* Typography */
  --font-display:Georgia, "Times New Roman", serif; /* Cambria removed 2026-08-31: retired by 07 on 2026-08-29, still leading this stack */
  --font-body:"Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; /* Open Sans per 07 (7.4, medium rule 2026-08-29); the old stack retained behind it as 07 promises */
  /* Fluid scale (ruled 2026-08-26, Nolla-style glide): each clamp holds the token
     endpoints exactly (76->42 hero per 07 7.4; 46->34 display, 34->27 h1, 26->22 h2
     per A2) and interpolates between 1440px and 600px instead of stepping. */
  --fs-hero:clamp(42px, 4.05vw + 17.7px, 76px);
  --fs-display:clamp(34px, 1.43vw + 25.4px, 46px);
  --fs-h1:clamp(27px, 0.83vw + 22px, 34px);
  --fs-h2:clamp(22px, 0.48vw + 19.1px, 26px);
  --fs-h3:18px;
  --fs-lede:18.5px; --fs-body:16px; --fs-small:13px; --fs-micro:11.5px;
  --fs-eyebrow:12px;
  --w-reg:400; --w-semi:700; --w-bold:700; /* --w-semi 600->700 on 2026-08-31 (A-14): no Discretion surface can render 600 */
  --lh-hero:1.02; --lh-display:1.06; --lh-h1:1.14; --lh-h2:1.22; --lh-h3:1.32;
  --lh-lede:1.58; --lh-body:1.62; --lh-small:1.5;
  --tr-hero:-.02em; --tr-display:-.01em; --tr-h2:-.005em; --tr-eyebrow:.22em;
  /* Motion (A6 "Settle") */
  --dur-fast:120ms; --dur-base:160ms; --dur-draw:220ms;
  --dur-reveal:240ms; --dur-divider:300ms;
  --ease-primary:cubic-bezier(.2,0,0,1);
  --ease-draw:cubic-bezier(.4,0,.2,1);
  --motion-rise:6px;
  --withheld-stop:scaleX(.92);
  /* Component & interaction layer (DESIGN-TOKENS section 8) */
  --radius-none:0; --radius-sm:3px; --radius-control:8px; --radius-card:12px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --content-max:1040px; --grid-gutter:24px;
  --gutter:clamp(22px, 5.2vw, 75px); /* fluid page gutter: 75 at 1440 gliding to 22 */
  --bp-sm:600px; --bp-md:900px; --bp-lg:1200px;
  --focus-ring:2px solid var(--accent);
  --focus-ring-dark:2px solid var(--accent-on-dark);
  --focus-offset:2px;
  --shadow-overlay:0 6px 20px -8px rgba(34,28,22,.22);
}
/* The old 600px type step is retired: the fluid clamps above land on the same
   values at 600px and below, without the snap. */

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
/* The page is a column that fills the viewport, so a short page (404, thank-you) keeps its footer at the foot (static build, 2026-09-05). */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main.page{flex:1 0 auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}

/* Screen-scoped oxblood-text rule: links are the only oxblood text on a
   screen surface (tokens.css / DESIGN-TOKENS section 8). Oxblood otherwise
   appears only as rules, marks, and the focus ring. */
a.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.link:hover{color:var(--accent-hover)}
.linklike{display:inline-block;background:none;border:none;font-family:var(--font-body);font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.linklike:hover{color:var(--accent-hover)}

:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.on-dark :focus-visible{outline:var(--focus-ring-dark);outline-offset:var(--focus-offset)}
/* The ring follows the ground it is drawn on: both prompt cards are cream, so their field takes the
   light-ground ring even inside the dark closing section (pre-launch changes, 2026-09-06). */
.prompt-card :focus-visible{outline:var(--focus-ring)}

.eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--w-semi);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-2);margin-bottom:var(--sp-4)}
.prose{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);max-width:64ch;text-align:left}
.prose + .prose{margin-top:var(--sp-4)}

/* B2 shell: 75px side margins at 1440 (canvas), wider than the 1040 document measure. */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* ============ Hero ============ */
.hero{position:relative;height:min(765px,100vh);height:min(765px,100svh);min-height:560px;overflow:hidden;background:var(--dark-bg)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Hide Safari's start-playback button (ruled 2026-09-10). When Power Saver blocks autoplay, WebKit draws
   a centred play button over the video; at full height it lands behind the headline and reads as a broken
   player rather than an invitation. The hero is ambient, silent decoration and the poster is the designed
   fallback, so the still frame is the intended degraded state. Behaviour is unchanged: any click on the
   page still starts it, via the retry in site.js. Non-standard WebKit pseudo-element, and it fails safe -
   if it ever stops applying, the button simply comes back. */
.hero video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
.hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(34,28,22,.78) 0%,rgba(34,28,22,.38) 55%,rgba(34,28,22,.16) 100%)} /* pointer-events (2026-09-10): the scrim is a decorative sibling painted over the video, so it was    swallowing clicks meant for it. When Safari blocks autoplay it draws its own play button on the    video; without this the visitor clicks a dead overlay. Nothing in the scrim is interactive, and    the nav and .hero-content are separate siblings above it, so their clicks are unaffected. */

.nav{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:34px var(--gutter)}
.nav .lockup-svg{display:block;height:90px;width:auto}

.hero-content{position:absolute;z-index:2;bottom:88px;left:var(--gutter);right:var(--gutter)}
.hero-eyebrow{color:var(--dark-text-2);margin-bottom:16px}
h1.display{font-family:var(--font-display);font-weight:var(--w-reg);font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--tr-hero);color:var(--n-50);max-width:760px;margin-bottom:34px}

/* Prompt card: a plain prompt field, not a chat bar (11.2). Card radius per
   section 8; the 1px n-600 edge carries the control boundary (WCAG 1.4.11);
   flat system, no decorative shadow. */
/* Prompt card (ruled 2026-08-26): raised card, auto-growing with the text it holds,
   placeholder challenges included; caps label + the branded arrow carry the action. */
.prompt-card{background:var(--surface);border:1px solid var(--n-600);border-radius:var(--radius-card);padding:16px 16px 12px;max-width:700px}
.prompt-field{position:relative}
.prompt-field textarea{width:100%;height:24px;border:none;resize:none;background:transparent;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);display:block;overflow:hidden;transition:height var(--dur-base) var(--ease-primary)}
.ghost{position:absolute;top:0;left:0;right:0;pointer-events:none;font-size:16px;line-height:1.5;color:var(--text-2);white-space:pre-wrap}
.prompt-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:10px}
.send-label{font-family:var(--font-body);font-size:11px;font-weight:var(--w-semi);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.arrow-btn{width:40px;height:40px;border-radius:var(--radius-control);background:var(--button);color:var(--ink);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-base) var(--ease-primary);flex:0 0 auto}
.arrow-btn:hover{background:var(--button-hover)}
.arrow-btn svg{display:block}
.ghost .caret{display:inline-block;width:1px;height:1.15em;background:var(--text-2);vertical-align:text-bottom;margin-left:1px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Buttons: DESIGN-TOKENS section 8. The 1px ink edge is REQUIRED (taupe on
   the ground is 1.97:1; the edge carries the boundary). Never oxblood,
   never pure black, never a pill. */
.btn{font-family:var(--font-body);font-size:14px;font-weight:var(--w-semi);padding:10px 18px;border-radius:var(--radius-control);background:var(--button);color:var(--button-label);border:1px solid var(--ink);cursor:pointer;transition:background var(--dur-base) var(--ease-primary)}
.btn:hover{background:var(--button-hover)}
.btn-block{width:100%;padding:14px 18px;font-size:15px}

/* ============ Body sections ============ */
.band{position:relative;padding:72px 0 var(--sp-16)}
.band > .divider{position:absolute;top:0;left:0;width:100%}
/* B2 section grammar: Display-scale heads, content in an offset right column. */
.band h2,.closing h2{font-family:var(--font-display);font-weight:var(--w-reg);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);margin-bottom:var(--sp-8)}
.offset{margin-left:37%}
/* Pinned heading (trial, 2026-09-07): above 900px the heading block sits in the 37% left column and stays
   pinned while the right column's text scrolls past it, so the section name stays in view. Editorial
   version of the stacking-cards idea; nothing is covered, no script, and phones keep the single column. */
@media (min-width:901px){
  .band .wrap{display:grid;grid-template-columns:37% 1fr;align-items:start}
  .band .reveal{grid-column:1;position:sticky;top:var(--sp-8);padding-right:var(--sp-8)}
  .band .offset{grid-column:2;margin-left:0}
  .band .cost-cols{grid-column:2;margin-left:0}
  .band blockquote.testimonial{grid-column:2;margin-left:0} /* in the text column, so nothing scrolls under the pinned heading */
}
.symptoms{list-style:none;margin:0 0 var(--sp-6)}
.symptoms li{position:relative;padding-left:18px;margin-bottom:14px;font-size:var(--fs-body);line-height:1.5}
.symptoms li::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--accent)}
.step-name{font-family:var(--font-display);font-weight:var(--w-bold);font-size:22px;line-height:1.3;margin:var(--sp-6) 0 var(--sp-3)}
.cost-cols{margin-left:37%} /* the price figure moved into the heading block 2026-09-07; the prose keeps the offset column */
.price-figure{font-family:var(--font-display);font-weight:var(--w-reg);font-size:clamp(56px, 3.81vw + 33.1px, 88px);line-height:1;color:var(--ink);margin-top:var(--sp-2);margin-bottom:var(--sp-6)}
.band h2 + .price-figure{margin-top:calc(-1 * var(--sp-4))} /* pulls the figure up under its heading; the h2 keeps its 32px bottom margin for the text column (Denis, 2026-09-07) */

/* Withheld-draw divider: draws to 92% and never closes (A6). Content is
   visible by default; the .pending state is applied by JS only when motion
   is allowed and the observer is live, so nothing is ever JS-gated. */
/* Section rules: full-bleed, sitting exactly on the seam between blocks, so a
   ground change (the sunken price band) starts at its rule and nowhere earlier. */
.divider{height:1px;background:var(--border);transform-origin:left center}
.draw.pending .divider{transform:scaleX(0)}
.draw.pending.in-view .divider{transition:transform var(--dur-divider) var(--ease-draw);transform:none}

/* One-signal reveal: the section's heading block settles in (A6). */
.reveal{opacity:1}
.draw.pending .reveal{opacity:0;transform:translateY(var(--motion-rise))}
.draw.pending.in-view .reveal{transition:opacity var(--dur-reveal) var(--ease-primary),transform var(--dur-reveal) var(--ease-primary);opacity:1;transform:none}

/* B2: C's sunken price ground. A recessed well (value step, not shadow). */
.cost-band{background:var(--sunken)}

/* B2: C's surface-panel testimonial. Raised surface + hairline; flat system, no shadow. */
blockquote.testimonial{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--sp-12);margin:var(--sp-12) 0 0 17%}
blockquote.testimonial::before{content:"";display:block;width:52px;height:2px;background:var(--accent);margin-bottom:var(--sp-8)}
blockquote.testimonial p{font-family:var(--font-display);font-size:24px;line-height:1.5;color:var(--text-strong);max-width:40em}
blockquote.testimonial footer{margin-top:var(--sp-8);font-family:var(--font-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:var(--lh-small);color:var(--text-2)}

/* B2: ink closing block; fuses with the dark footer into the closing bookend. */
.closing{padding:var(--sp-16) 0 var(--sp-12)}
.closing-cols{display:grid;grid-template-columns:42% 1fr;column-gap:var(--sp-16);align-items:start}
.closing-prose{color:var(--dark-text-2);max-width:38em}
.closing .eyebrow{color:var(--dark-text-2)}
.closing .prompt-card{max-width:none}

/* ============ Footer (dark ground) ============ */
.on-dark{background:var(--dark-bg);color:var(--dark-text)}
.on-dark a.link{color:var(--dark-accent)}
.on-dark a.link:hover{color:var(--dark-text)}
footer.site{padding:var(--sp-12) 0}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);justify-content:space-between}
.footer-row .wordmark-svg{display:block;height:22px;width:auto}
.wordmark-link{display:block;line-height:0} /* the footer wordmark links home, like the header lockup (ruled 2026-09-06) */
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);font-size:var(--fs-small);line-height:var(--lh-small)}
.footer-meta .sep{color:var(--dark-text-2)}
.footer-copy{color:var(--dark-text-2);font-size:var(--fs-small)}

/* ============ Contact view (B2: ink over the vignette ground, two columns) ============ */
.contact{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.contact-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--dark-bg)}
.contact-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,28,22,.93) 0%,rgba(34,28,22,.78) 55%,rgba(34,28,22,.58) 100%)}
.contact-shell{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:0 var(--gutter)}
.contact-shell .nav{position:static;padding:34px 0}
.contact-grid{display:grid;grid-template-columns:44% 1fr;column-gap:96px;align-items:center;flex:1;max-width:1290px;width:100%;margin:0 auto}
.rule-under::after{content:"";display:block;width:48px;height:2px;background:var(--dark-accent);margin-top:10px}
.challenge-quote{font-family:var(--font-display);font-size:clamp(22px, 0.71vw + 17.7px, 28px);line-height:1.45;color:var(--dark-text);margin:26px 0 0}
.contact h2.step-head{font-family:var(--font-display);font-weight:var(--w-reg);font-size:clamp(32px, 0.95vw + 26.3px, 40px);line-height:1.1;letter-spacing:var(--tr-display);margin-bottom:var(--sp-3)}
.contact .lede{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--dark-text-2);margin-bottom:30px;max-width:56ch}
.contact form{max-width:390px}
form .row{margin-bottom:14px}
.field{width:100%;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--n-600);border-radius:var(--radius-control);padding:14px 16px;transition:border-color var(--dur-base) var(--ease-primary)}
.field:hover{border-color:var(--n-700)}
.field:focus-visible{border-color:var(--n-700)}
.field::placeholder{color:var(--text-2)}
.contact .btn-block{max-width:390px}
.thanks .check{margin-bottom:var(--sp-4)}
.thanks h2.step-head{margin-bottom:var(--sp-3)}
.thanks p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--dark-text-2);max-width:46ch}
.editwrap{margin-top:var(--sp-6)}
.thanks .thanks-back{margin-top:var(--sp-6);font-size:var(--fs-body)}
.contact .eyebrow{color:var(--dark-text-2)}
.contact .linklike{color:var(--dark-accent)}
.contact .linklike:hover{color:var(--dark-text)}
.contact-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding:30px 0 34px;max-width:1290px;width:100%;margin:0 auto}
.contact-foot .wordmark-svg{display:block;height:22px;width:auto}
.contact-foot .footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);font-size:12px;line-height:1.5;color:var(--dark-text-2)}

/* ============ Plain page shell (policy pages, 404): ink header, cream body, wordmark footer ============ */
.page-head{background:var(--dark-bg);color:var(--dark-text)}
.page-head .nav{position:static;padding:20px 0} /* 34 -> 20 and lockup 90 -> 48 on every width (ruled 2026-09-06): the band is a running header, not a hero */
.page-head .nav .lockup-svg{height:48px}
.page{padding:var(--sp-16) 0 calc(var(--sp-16) + var(--sp-8))}
.page-body{max-width:64ch}
.page-body h1{font-family:var(--font-display);font-weight:var(--w-reg);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);margin-bottom:var(--sp-6)}
.page-body .page-date{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-2);margin:calc(-1 * var(--sp-3)) 0 var(--sp-8)}
.page-body p{font-size:var(--fs-body);line-height:var(--lh-body)}
.page-body p + p{margin-top:var(--sp-4)}
.page-body strong{font-weight:var(--w-semi);color:var(--text-strong)}
.page-body .fill{background:var(--accent-tint);padding:0 4px}

.fade-in{animation:rise var(--dur-reveal) var(--ease-primary)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Reduced motion is honored; focus states are never withheld. Withheld-draw
   dividers rest at their 92% stop rather than animating. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ghost .caret{animation:none}
  .fade-in{animation:none}
  .btn,.field{transition:none}
  .draw.pending .divider,.draw.pending.in-view .divider{transition:none;transform:none}
  .draw.pending .reveal,.draw.pending.in-view .reveal{transition:none;opacity:1;transform:none}
}
@media (max-width:900px){
  .footer-meta > .sep{display:none} /* the pipes dangle at line ends once the footer row wraps (static build, 2026-09-05) */
  .footer-meta{gap:var(--sp-3) var(--sp-4)}
  .offset{margin-left:0}
  .cost-cols{margin-left:0}
  blockquote.testimonial{margin-left:0}
  .closing-cols{grid-template-columns:1fr;row-gap:var(--sp-8)}
  .contact-grid{grid-template-columns:1fr;row-gap:56px;align-content:center}
}
@media (max-width:640px){
  .nav{padding-top:20px;padding-bottom:20px}
  .page-head .nav{padding:20px 0}
  .page{padding:var(--sp-12) 0}
  .nav .lockup-svg{height:48px}
  .hero{height:min(765px,88svh);min-height:520px} /* phones: the hero stops short of the screen so the next eyebrow peeks below the card (ruled 2026-09-06) */
  .hero-content{bottom:44px}
  .hero .scrim{background:linear-gradient(0deg,rgba(34,28,22,.66) 0%,rgba(34,28,22,.5) 50%,rgba(34,28,22,.18) 82%)} /* mid-stop added: the eyebrow sits near half height, where the old gradient had faded (ruled 2026-09-06) */
  .band{padding:var(--sp-12) 0}
  blockquote.testimonial{padding:var(--sp-6)}
  blockquote.testimonial p{font-size:19px}
  .contact form,.contact .btn-block{max-width:none}
  .contact-foot{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .footer-row{flex-direction:column;align-items:flex-start}
  .footer-row .wordmark-svg,.contact-foot .wordmark-svg{height:18px}
}