/* ============================================================================
   Lepinguluup: theme 6a. Load AFTER style.css.
   Overrides only; style.css is untouched, so deleting the <link> reverts.

   Guitar-inspired palette (theme change only, no layout/typography changes):
   powder-blue for large display + numerals, an accessible blue for links/small
   text, a rosewood primary (CTA), gold used sparingly on the legal-reference
   markers, over warm ivory surfaces.

   Fonts (all self-hosted under static/fonts/, no third-party request, CSP-clean):
     InstrumentSerif-Regular.ttf   display
     SourceSans3VF-Upright.woff2   body / UI      <- style.css names Hanken Grotesk
     IBMPlexMono-{Regular,Medium,SemiBold}.woff2  metadata
   ============================================================================ */

@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3VF-Upright.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* guitar blues: powder for display, accessible for text/links */
  --powder:#6a90ad;          /* large headings + numerals only (>=3:1 on ivory) */
  --accent:#4f748f;          /* links, small blue text, UI accents (AA on ivory) */
  --accent-strong:#3d5c73;   /* hover / eyebrow */
  --accent-bright:#789cb7;   /* header top-edge highlight */
  --accent-ink:#35505f;      /* darkest blue */
  --accent-soft:#edf3f6;     /* blue-tinted panels */
  --accent-soft-2:#e0eaf0;
  --accent-line:#c3d4df;
  --blue-border:#84a1ba;     /* upload border + controls */

  /* restrained gold hardware (legal-reference markers only) */
  --gold:#b58924;            /* decorative gold */
  --gold-ink:#8a641a;        /* small gold text (AA) */

  /* rosewood primary */
  --rosewood:#352727;
  --rosewood-hover:#422f30;
  --rosewood-active:#291d1d;

  /* warm ivory surfaces + warm neutrals */
  --bg:#f8f5ef;
  --surface:#fffdf8;
  --surface-2:#faf6ef;
  --ink:#2a2020;
  --ink-2:#3a2f2f;
  --muted:#6f6d6e;
  --faint:#948d8b;
  --line:#ddd6ca;
  --line-2:#ece7dd;
}

@keyframes ll-mark{0%,10%{transform:scaleX(0)}32%,100%{transform:scaleX(1)}}
@keyframes ll-scan{0%{transform:translateY(-38px);opacity:0}12%{opacity:1}62%,100%{transform:translateY(96px);opacity:0}}
@keyframes ll-scanx{0%{left:-180px}100%{left:100%}}

/* ---------- material ---------- */
body{background:#f8f5ef;background-attachment:fixed;font-size:16px;color:var(--ink)}
body::before{
  background:
    radial-gradient(38% 46% at 12% 0%, rgba(120,156,183,.14), transparent 70%),
    radial-gradient(44% 52% at 100% 100%, rgba(120,156,183,.08), transparent 72%),
    radial-gradient(125% 62% at 50% -4%, transparent 54%, rgba(42,32,32,.05));
}
/* fine bone-paper grain, layered over the glow (design frame's paper texture) */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(42,32,32,.085) .6px,transparent .6px);
  background-size:4px 4px;
}
/* focus ring + selection follow the powder-blue accent, not style.css's teal.
   Matches style.css's interactive :is(button,a,...):focus-visible ring so every
   focus outline is the same powder blue. */
:focus-visible{outline-color:rgba(120,156,183,.32)}
::selection{background:rgba(120,156,183,.28);color:var(--ink)}
/* Shell spans the viewport on every page; text-heavy pages keep a narrow
   measure inside it. style.css ships .wrap at 840px, which is what made the
   landing look centre-cramped even after the hero went two-column. */
.site-header .wrap,.site-footer .wrap{max-width:1560px;padding:0 56px}
.footer-inner{max-width:none}
.page-landing main.wrap{max-width:1560px;padding:0 56px}
main.wrap{padding-top:44px}
/* the landing wrap sits flush to the top so the hero is tight; when a beta or
   demo notice is injected before it, give that notice clear air under the header */
.page-landing .private-banner:first-child,
.page-landing .demo-banner:first-child{margin-top:34px}

/* ---------- header ---------- */
.site-header{
  background:rgba(248,245,239,.82);
  border-bottom:1px solid rgba(42,32,32,.1);
  padding:0;
}
.site-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#4f748f,#789cb7 26%,rgba(120,156,183,.22) 72%,rgba(120,156,183,0));
}
.header-inner{min-height:78px;flex-wrap:nowrap}
.brand{
  font-family:var(--display);font-weight:400;font-size:25px;
  letter-spacing:-.012em;line-height:1.04;
}
.brand span{color:var(--powder)}
.brand::before{width:48px;height:30px;flex-basis:48px;margin-right:14px}
.brand-desc{margin:2px 0 0;font-size:11.5px;color:rgba(42,32,32,.5);letter-spacing:.01em;line-height:1.3}
.beta{
  background:none;border:1px solid rgba(120,156,183,.42);color:var(--accent-strong);
  font-size:9.5px;letter-spacing:.16em;font-weight:500;padding:3px 6px;border-radius:4px;
}
.header-nav{display:flex;align-items:center;gap:22px}
.langnav{background:none;border:0;padding:0;gap:2px}
.langnav a{font-size:11px;font-weight:400;letter-spacing:.08em;padding:5px 9px;border-radius:5px;color:rgba(42,32,32,.5)}
.langnav a:hover{background:var(--line-2);color:var(--ink)}
.langnav a.active{background:var(--rosewood);color:#f8f5ef;font-weight:400}
.topnav{display:flex;gap:22px;padding-left:22px;border-left:1px solid rgba(42,32,32,.14)}
.topnav a{font-size:13.5px;color:rgba(42,32,32,.6);text-decoration:none}
.topnav a:hover{color:var(--accent-strong)}

/* ---------- landing hero: headline left, upload card right ---------- */
.lp-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 428px;
  gap:80px;align-items:start;padding:22px 0 10px;
}
.lp-eyebrow{
  display:flex;align-items:center;gap:13px;margin:0 0 24px;max-width:520px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-strong);white-space:nowrap;
}
.lp-eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(120,156,183,.45),rgba(42,32,32,0))}
.lp-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--powder);box-shadow:0 0 0 4px rgba(120,156,183,.16)}
.lp-hero h1{
  font-family:var(--display);font-weight:400;font-size:clamp(38px,5.7vw,82px);
  line-height:.96;letter-spacing:-.02em;max-width:14ch;margin:0;
  color:var(--ink);text-wrap:pretty;
}
.lp-hero h1 .em{color:var(--powder)}
.lp-subhead{
  margin:24px 0 0;max-width:44ch;font-size:20px;font-weight:500;
  line-height:1.45;letter-spacing:-.012em;color:rgba(42,32,32,.82);text-wrap:pretty;
}
.lp-intro{margin:14px 0 0;max-width:50ch;font-size:17.5px;line-height:1.62;color:rgba(42,32,32,.62);text-wrap:pretty}

/* trust facts as a hairline table */
.lp-trust{margin:40px 0 0;max-width:520px;border-top:1px solid rgba(42,32,32,.13)}
.lp-trust>div{
  display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:center;
  padding:14px 0;border-bottom:1px solid rgba(42,32,32,.09);
}
.lp-trust dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(42,32,32,.48)}
.lp-trust dd{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* ---------- upload card ---------- */
.lp-hero-aside{position:relative;margin-top:-14px}
.lp-hero-aside .card{position:relative;margin:0;padding:26px;border-radius:14px;border-color:rgba(42,32,32,.12)}
/* offset frame behind the card */
.lp-hero-aside .card::before{
  content:"";position:absolute;top:-14px;left:-18px;right:-18px;bottom:-18px;
  border:1px solid rgba(42,32,32,.1);border-radius:20px;pointer-events:none;
}
.card{
  background:var(--surface);border-radius:14px;
  box-shadow:
    0 3px 8px rgba(79,116,143,.08),
    0 16px 38px rgba(53,39,39,.08);
}
.card-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(42,32,32,.48);
}
.card-head span:last-child{color:var(--accent-strong)}
.card .label{font-size:13px;font-weight:650;margin-bottom:9px;color:var(--ink)}
.card .field{margin-bottom:18px}

/* file picker as a document being scanned */
.file-picker{
  position:relative;overflow:hidden;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
  margin-top:0;padding:66px 20px 18px;text-align:left;
  border:1.5px dashed var(--blue-border);border-radius:11px;background:var(--surface);
}
.file-picker::before{
  content:"";position:absolute;left:20px;right:20px;top:20px;height:38px;opacity:.5;
  width:auto;border-radius:0;
  background-color:transparent;
  background-image:
    linear-gradient(rgba(42,32,32,.3),rgba(42,32,32,.3)),
    linear-gradient(rgba(42,32,32,.2),rgba(42,32,32,.2)),
    linear-gradient(#4f748f,#4f748f),
    linear-gradient(rgba(42,32,32,.2),rgba(42,32,32,.2)),
    linear-gradient(rgba(42,32,32,.2),rgba(42,32,32,.2));
  background-size:76% 2px,92% 2px,44% 2px,84% 2px,62% 2px;
  background-position:0 0,0 9px,0 18px,0 27px,0 36px;
  background-repeat:no-repeat;
}
.file-picker::after{
  content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(120,156,183,.18),transparent);
  animation:ll-scan 5.6s ease-in-out infinite;
}
.file-picker:hover,.file-picker:focus-within,.file-picker.dragover{background:#f2f6f7;border-color:var(--accent)}
.file-picker .btn.ghost.sm{
  background:linear-gradient(180deg,#fffdf8,#f6f2ea);border:1px solid rgba(132,161,186,.5);
  color:var(--accent);border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:650;
  box-shadow:0 1px 2px rgba(53,39,39,.06);
}
.file-name{font-size:11px;color:rgba(42,32,32,.48)}
.consent{font-size:12px;line-height:1.5;color:rgba(42,32,32,.6);gap:10px}
.consent input{width:15px;height:15px;margin-top:2px}
.consent a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(79,116,143,.4)}
.card textarea{
  border:1.5px solid rgba(42,32,32,.14);border-radius:10px;background:var(--surface-2);
  font-size:12.5px;line-height:1.55;padding:11px 12px;
}
.card textarea::placeholder{color:rgba(42,32,32,.42)}

/* ---------- primary CTA: rosewood, warm-ivory text ---------- */
.btn{
  background:var(--rosewood);color:#f8f5ef;
  border:1px solid rgba(120,156,183,.45);
  border-radius:12px;letter-spacing:-.012em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 16px rgba(53,39,39,.2),
    0 0 0 1px rgba(120,156,183,.08);
}
.btn:hover{
  background:var(--rosewood-hover);
  transform:translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 11px 24px rgba(53,39,39,.26),
    0 0 0 1px rgba(120,156,183,.12);
}
.btn:active{background:var(--rosewood-active);transform:translateY(0)}
.card>.btn{justify-content:space-between;padding:15px 15px 15px 20px;font-size:15px;margin-top:22px}
.card>.btn::after{
  content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.15)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 12 12" fill="none"><path d="M1.5 6h9M7 2.5 10.5 6 7 9.5" stroke="%23f8f5ef" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    center no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.card>.btn:hover::after{transform:translateX(2px)}
.card>.btn:disabled::after{opacity:.5}
.btn.ghost{background:linear-gradient(180deg,#fffdf8,#f6f2ea);color:var(--accent);box-shadow:0 1px 2px rgba(53,39,39,.06)}
.btn.ghost:hover{background:var(--accent-soft);transform:none}
.btn-buy{background:#fffdf8;color:var(--rosewood)}
.btn-buy:hover{background:#f2f6f7;color:var(--rosewood)}

/* ---------- Action Pack teaser (result page): dark rosewood, no teal ---------- */
.actionpack-teaser{background:linear-gradient(165deg,#2b2020,#3a2b2b);color:#e8e0d4}
.actionpack-teaser::after{background:radial-gradient(circle,rgba(120,156,183,.20),transparent 65%)}
.actionpack-teaser h2{color:#fdfaf4}
.actionpack-teaser .ap-lead{color:#d8cfc4}
.actionpack-teaser .ap-includes li{color:#e4dccf}
.actionpack-teaser .ap-includes li::before{
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="%23a9c6db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
}
.actionpack-teaser .ap-note{color:#b8aa9b}
.ap-field span{color:#d8cfc4}
.ap-field input::placeholder{color:#a99a8b}
.ap-field input:focus{border-color:#84a1ba;box-shadow:0 0 0 3px rgba(120,156,183,.28)}
.ap-consent{color:#d8cfc4}
.ap-consent input{accent-color:#84a1ba}

/* ---------- pricing page: blue check marks, not teal ---------- */
.price-features li::before{
  background:var(--accent-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="%234f748f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
}

/* form focus: blue border + visible 3px ring */
:is(button,a,input,textarea,select):focus-visible{outline:3px solid rgba(120,156,183,.32);outline-offset:2px}

/* privacy note under the card: hairline, not a green box */
.lp-hero-aside .privacy.slim{
  margin:16px 0 0;padding:13px 0 0;background:none;border:0;
  border-top:1px solid rgba(42,32,32,.09);border-radius:0;
  font-family:var(--mono);font-size:10px;line-height:1.6;color:rgba(42,32,32,.5);
}
.lp-hero-aside .privacy.slim strong{color:rgba(42,32,32,.62);font-weight:500}

/* ---------- document-analysis strip ---------- */
.lp-analysis{margin:52px 0 0;border:0;padding:0}
.lp-analysis-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 18px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(42,32,32,.48);
}
.lp-analysis-refs{color:var(--gold-ink);letter-spacing:.14em;white-space:nowrap;text-transform:none}
.lp-analysis-body{
  position:relative;overflow:hidden;padding:28px 0;
  border-top:1px solid rgba(42,32,32,.13);border-bottom:1px solid rgba(42,32,32,.13);
}
.lp-analysis-body::before{
  content:"";position:absolute;top:0;bottom:0;left:-180px;width:180px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,156,183,.12),transparent);
  animation:ll-scanx 9s linear infinite;
}
.lp-analysis-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.lp-acol{display:flex;flex-direction:column;gap:8px}
.lp-acol-h{
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(42,32,32,.45);margin-bottom:5px;
}
.lp-bar{height:2px;border-radius:0;background:rgba(42,32,32,.16)}
.lp-bar:first-of-type{background:rgba(42,32,32,.22)}
.lp-bar-row{display:flex;align-items:center;gap:9px;min-height:3px}
.lp-seg{height:3px;border-radius:0;flex:0 0 auto;transform-origin:left;animation:ll-mark 7s ease-in-out infinite}
.lp-seg-med{background:var(--gold)}
.lp-seg-ok{background:var(--accent);animation-delay:.9s}
.lp-bar-row i{font-family:var(--mono);font-size:9px;font-style:normal;letter-spacing:.1em;white-space:nowrap;color:var(--gold-ink)}
.lp-seg-ok+i{color:var(--accent)}

/* ---------- how it works: staircase, serif numerals ---------- */
.steps{margin:56px 0 4px}
.steps h2{font-family:var(--display);font-weight:400;font-size:42px;line-height:1;letter-spacing:-.015em;margin:0 0 32px}
.steps-grid{grid-template-columns:repeat(3,1fr);gap:52px;align-items:start}
.steps-grid li{
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
}
.steps-grid li:hover{transform:none;box-shadow:none}
.steps-grid li:nth-child(2){margin-top:26px}
.steps-grid li:nth-child(3){margin-top:52px}
.step-num{
  display:block;width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--display);font-weight:400;font-size:40px;line-height:.9;letter-spacing:-.02em;
  color:var(--powder);margin:0 0 15px;padding-bottom:13px;
  border-bottom:1px solid rgba(42,32,32,.14);
}
.steps-grid h3{font-size:17.5px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.steps-grid p{font-size:14px;line-height:1.62;color:rgba(42,32,32,.6)}

/* ---------- other pages pick up the display face ---------- */
.pricing-hero h1,.guide h1,.legal-document h1,.gate-card h1{
  font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.02;
}
.pricing-hero h1{font-size:clamp(34px,4.4vw,56px)}
.guide h1,.legal-document h1{font-size:clamp(32px,4vw,48px)}
.gate-card h1{font-size:30px}
.gate-card .brand{font-size:25px}
.overlay-title{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.015em}

@media (max-width:1180px){
  .lp-hero{grid-template-columns:minmax(0,1fr) 380px;gap:48px}
  .lp-hero h1{font-size:clamp(38px,5.4vw,64px)}
}
@media (max-width:920px){
  .site-header .wrap,.site-footer .wrap,.page-landing main.wrap{padding:0 28px}
  .lp-hero{grid-template-columns:1fr;gap:34px;padding-top:14px}
  .lp-hero h1{font-size:clamp(34px,7.2vw,52px);max-width:none}
  .lp-hero-aside{margin-top:0}
  .lp-hero-aside .card::before{display:none}
  .lp-subhead{max-width:none}
  .lp-analysis-grid{grid-template-columns:1fr;gap:26px}
  .steps-grid{grid-template-columns:1fr;gap:30px}
  .steps-grid li:nth-child(2),.steps-grid li:nth-child(3){margin-top:0}
}
@media (max-width:720px){
  .brand-desc,.topnav{display:none}
  .header-inner{min-height:64px}
  .lp-hero h1{font-size:45px;line-height:.98}
  .lp-subhead{font-size:16px;margin-top:15px}
  .lp-intro{font-size:14.5px}
  .lp-trust>div{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .steps h2{font-size:31px;margin-bottom:20px}
  .step-num{font-size:30px}
  .brand{font-size:21px}
}

/* print: keep the teaser dark rosewood, not the old dark green */
@media print{.actionpack-teaser{background:#2b2020 !important}}