/* ============================================================================
   LENDUH — HOMEPAGE
   Sections unique to /. Depends on the tokens + primitives in styles.css.
   ========================================================================== */

/* ============================================================================
   HERO
   Asymmetric split: copy on paper (left), product on a full-bleed ink plate
   (right) that runs off the edge of the viewport. The dark plate exists so the
   light app screenshots read as the subject of the page rather than decoration.
   ========================================================================== */

#hero{padding:0;background:var(--paper);overflow:hidden;position:relative}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(2rem,4vw,3.5rem);
}

.hero-copy{
  padding:clamp(3.25rem,6vw,5.75rem) clamp(1.5rem,3vw,2.5rem) clamp(3.25rem,6vw,5.75rem)
          max(var(--gutter),calc((100vw - var(--wrap)) / 2));
  position:relative;z-index:2;
  /* A grid item's automatic minimum is min-content, and the CTA buttons are
     white-space:nowrap — so at 320px the track was forced to 360px and the whole
     page scrolled sideways. min-width:0 lets the track hold the viewport and the
     buttons wrap instead. */
  min-width:0;
}

.hero-kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1px solid var(--line);
  color:var(--text-2);padding:.42rem 1rem .42rem .8rem;border-radius:999px;
  font-size:.78rem;font-weight:600;margin-bottom:1.6rem;
  box-shadow:var(--sh-sm);
}
.hero-kicker-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none;box-shadow:0 0 0 3px var(--brand-wash)}

#hero h1{
  font-size:clamp(2.5rem,5.2vw,4.15rem);
  line-height:1.02;letter-spacing:-.038em;
  margin-bottom:1.4rem;max-width:15ch;
}
#hero h1 em{font-style:normal;position:relative;white-space:nowrap;color:var(--brand-deep)}
/* Hand-drawn-feeling underline on the emphasised word — one small piece of
   warmth in an otherwise precise layout. */
#hero h1 em::after{
  content:'';position:absolute;left:-.04em;right:-.04em;bottom:.03em;height:.28em;
  background:var(--brand-wash-2);border-radius:.14em;z-index:-1;
}
#hero h1 em{isolation:isolate}

#hero .hero-sub{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--muted);max-width:52ch;margin-bottom:2rem;line-height:1.7}

.hero-risk{
  display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;margin:1.25rem 0 0;
  font-size:.8rem;color:var(--muted);
}
.hero-risk span{display:inline-flex;align-items:center;gap:.4rem}
.hero-risk span::before{content:'';width:14px;height:14px;flex:none;border-radius:50%;background:var(--brand-wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.8-5.1' fill='none' stroke='%230F7238' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* The three-surface index. Repeats as a motif down the page. */
.surface-strip{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:2.75rem;border-top:1px solid var(--line);
}
.surface-strip li{padding:1.1rem 1.1rem 0 0;display:grid;gap:.15rem;position:relative}
.surface-strip li + li{padding-left:1.1rem}
.surface-strip li + li::before{content:'';position:absolute;left:0;top:1.1rem;bottom:.2rem;width:1px;background:var(--line)}
.surface-ico{display:flex;color:var(--brand-deep);margin-bottom:.3rem}
.surface-ico svg{width:20px;height:20px}
.surface-name{font-size:.865rem;font-weight:700;color:var(--text);line-height:1.3}
.surface-note{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted-2);letter-spacing:.01em}

/* ---- The ink stage ---- */
.hero-stage{
  position:relative;align-self:stretch;min-width:0;
  display:flex;align-items:center;
  background:var(--ink);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  padding:clamp(2.5rem,4vw,4.25rem) 0 clamp(2.5rem,4vw,4.25rem) clamp(2.25rem,4.5vw,4.5rem);
  margin:clamp(1.5rem,3vw,2.75rem) 0;
  isolation:isolate;
}
.hero-stage::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background-image:
    linear-gradient(to right,rgba(200,241,105,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(200,241,105,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(100% 100% at 10% 0%,#000,transparent 78%);
          mask-image:radial-gradient(100% 100% at 10% 0%,#000,transparent 78%);
}
/* Emerald bloom under the screenshot. */
.hero-stage::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-10%;right:20%;top:-12%;bottom:20%;
  background:radial-gradient(55% 55% at 45% 45%,rgba(34,197,94,.42),transparent 72%);
  filter:blur(46px);
}
.hero-stage-inner{position:relative;width:100%;min-width:0}

.hero-browser{width:min(158%,940px)}
.hero-browser .shot-viewport,.hero-browser img{display:block}
.hero-browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* Phone overlaps the plate edge onto the paper — the layered depth that makes
   the composition read as one product family rather than two images. */
.hero-phone{
  position:absolute;left:-13%;bottom:-9%;
  width:clamp(124px,18.5%,182px);z-index:3;
}
.hero-phone .phone-frame{width:100%}

.hero-chip{
  position:absolute;right:14%;top:-1.75rem;z-index:4;
  display:inline-flex;align-items:center;gap:.65rem;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;padding:.55rem 1rem .55rem .8rem;
  box-shadow:0 12px 30px rgba(8,33,26,.28);
}
.hero-chip strong{display:block;font-size:.8rem;font-weight:700;color:var(--text);line-height:1.25}
.hero-chip em{display:block;font-style:normal;font-size:var(--fs-micro);color:var(--muted);line-height:1.3}
.hero-chip .num{font-weight:600;color:var(--brand-deep)}
.hero-chip-pulse{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;position:relative}
.hero-chip-pulse::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--brand);opacity:.35;animation:chip-pulse 2.4s var(--ease-out) infinite}
@keyframes chip-pulse{0%{transform:scale(.6);opacity:.5}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-chip-pulse::after{animation:none;opacity:.3}}

/* ============================================================================
   TRUST STRIP
   ========================================================================== */

.trust-strip{padding:1.75rem var(--gutter);background:var(--surface);border-block:1px solid var(--line)}
.trust-strip .container{display:flex;align-items:flex-start;gap:1rem 2rem;flex-wrap:wrap}
.trust-label{
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);flex:none;margin:0;padding-top:.4rem;
}
.trust-pills{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;flex:1;min-width:0}

/* ============================================================================
   WHAT IS LENDUH
   ========================================================================== */

.what-inner{max-width:1000px}
/* The diagram restates the paragraph above it visually. Below 860px its labels
   would be too small to read, so it drops out and the prose carries the answer. */
.what-diagram{margin-top:2.75rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:1.5rem 1.25rem;overflow-x:auto}
.what-diagram img{width:100%;min-width:820px;height:auto;margin:0 auto}
@media(max-width:860px){.what-diagram{display:none}}

/* ============================================================================
   SPLIT SECTION HEAD — eyebrow + title on the left, standfirst on the right.
   Replaces the stacked label/title/sub column so section openers stay compact.
   ========================================================================== */

.split-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:1.5rem clamp(2rem,5vw,4.5rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,4vw,3.75rem);
  padding-bottom:clamp(1.5rem,2.5vw,2.25rem);
  border-bottom:1px solid var(--line);
}
.band-ink .split-head,#security .split-head{border-bottom-color:var(--ink-line)}
.split-head .section-title{margin-bottom:0}
.split-head-sub{color:var(--muted);font-size:1rem;line-height:1.72;margin:0}
.band-ink .split-head-sub,#security .split-head-sub{color:var(--on-ink-2)}

/* ============================================================================
   01 · PROBLEM — numbered ledger
   ========================================================================== */

.pain-ledger{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(2rem,4vw,3.5rem);
}
.pain-row{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:1.35rem 0;border-bottom:1px solid var(--line);
  transition:padding-left .25s var(--ease);
}
.pain-row:hover{padding-left:.5rem}
.pain-num{font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--brand-deep);padding-top:.2rem;letter-spacing:.02em}
.pain-body{display:grid;gap:.3rem;min-width:0;align-content:start}
.pain-body strong{font-size:.98rem;font-weight:700;color:var(--text);line-height:1.35}
.pain-body span{font-size:.875rem;color:var(--muted);line-height:1.6}

.pull-note{
  margin-top:2.5rem;padding:1.5rem 1.75rem;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 var(--r) var(--r) 0;
  font-size:1rem;line-height:1.7;color:var(--text-2);box-shadow:var(--sh-card);
}
.pull-note-label{
  display:block;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:.5rem;
}

/* ============================================================================
   02 · PLATFORM (ink)
   ========================================================================== */

.rail-label{
  font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-ink-3);margin:0 0 1rem;
}
.flow-rail{
  list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin:0 0 clamp(2.5rem,4vw,3.5rem);
}
.flow-node{
  position:relative;padding:.5rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  font-size:.8rem;font-weight:600;color:var(--on-ink-2);white-space:nowrap;
}
.flow-node.is-key{background:rgba(200,241,105,.10);border-color:rgba(200,241,105,.34);color:var(--signal)}
.flow-node + .flow-node{margin-left:1rem}
.flow-node + .flow-node::before{
  content:'';position:absolute;left:-1rem;top:50%;width:1rem;height:1px;
  background:rgba(255,255,255,.18);
}

.surface-cards{
  display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:1.25rem;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.surface-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:1.6rem 1.6rem 0;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.surface-card:hover{border-color:rgba(200,241,105,.30);background:rgba(200,241,105,.045)}
.surface-card header{margin-bottom:1.5rem}
.surface-card-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:1rem;
  color:var(--signal);background:rgba(200,241,105,.10);
  border:1px solid rgba(200,241,105,.24);
}
.surface-card-ico svg{width:22px;height:22px;stroke-width:1.7}
.surface-card h3{font-family:var(--font-sans);font-size:1rem;font-weight:700;letter-spacing:0;color:var(--on-ink);margin-bottom:.5rem}
.surface-card p{font-size:.84rem;color:var(--on-ink-3);line-height:1.6}
.surface-shot{margin-top:auto;display:flex;justify-content:center}
/* Screenshots sink into the bottom of the card so the card frames the product
   rather than sitting beside it. */
.surface-shot .phone-frame{width:min(150px,62%);margin-bottom:-14%}
.surface-shot--wide{justify-content:flex-start}
.surface-shot--wide .browser-frame{width:112%;margin-bottom:-4%}
.surface-shot--wide img{aspect-ratio:16/10;object-fit:cover;object-position:top center}

/* ============================================================================
   03 · PRODUCT TOUR
   ========================================================================== */

.tour-tabs{
  display:flex;gap:.4rem;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:2rem;padding-bottom:.75rem;
}
.tour-tab{
  display:inline-flex;align-items:center;gap:.55rem;
  background:transparent;border:1px solid transparent;border-radius:999px;
  padding:.6rem 1.1rem;cursor:pointer;
  font-family:var(--font-sans);font-size:.9rem;font-weight:600;color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.tour-tab svg{width:18px;height:18px;opacity:.6;transition:opacity .2s var(--ease)}
.tour-tab:hover{color:var(--text);background:var(--paper)}
.tour-tab[aria-selected="true"]{background:var(--brand-wash);border-color:var(--brand-wash-2);color:var(--brand-darkest)}
.tour-tab[aria-selected="true"] svg{opacity:1}
.tour-count{
  font-size:var(--fs-micro);color:var(--muted-2);background:var(--surface);
  border-radius:999px;padding:.1rem .45rem;font-weight:500;
}
.tour-tab[aria-selected="true"] .tour-count{background:var(--surface);color:var(--brand-deep)}

/* With JS off every panel stays open (all screenshots crawlable + visible);
   main.js sets [hidden] on the inactive ones. */
.tour-panel[hidden]{display:none}
.tour-panel + .tour-panel{margin-top:2.5rem}

.shot{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.shot figcaption{font-size:.83rem;color:var(--muted);line-height:1.55}
.shot .browser-frame{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.shot:hover .browser-frame{transform:translateY(-4px);box-shadow:var(--sh-xl)}
.shot-viewport{position:relative;width:100%;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.shot-viewport--wide{aspect-ratio:2.1/1}
.shot-viewport img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot--hero{margin-bottom:2.25rem}
.shot--hero figcaption{font-size:.9rem;color:var(--text-2)}
.shot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1.25rem}

.phone-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);justify-items:center;max-width:900px;margin:0 auto}
.phone-item{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:280px}
.phone-item .phone-mockup{width:100%;max-width:250px;transition:transform .3s var(--ease)}
.phone-item:hover .phone-mockup{transform:translateY(-6px)}
.phone-item figcaption{text-align:center;font-size:.83rem;color:var(--muted);line-height:1.55}
.phone-item figcaption strong{display:block;font-size:.9rem;color:var(--text);margin-bottom:.2rem}

.tour-note{
  margin-top:2.5rem;padding:1.35rem 1.6rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);
  font-size:.9rem;color:var(--muted);line-height:1.7;
}
.tour-note strong{color:var(--text)}

/* ============================================================================
   04 · COLLECTOR'S DAY
   ========================================================================== */

.day-steps{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.85rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.day-steps .cf-step{counter-increment:none}
.cf-disclaimer{font-size:.73rem;color:var(--muted-2);margin:.65rem 0 0;text-align:center}

/* ============================================================================
   06 · MARKET
   ========================================================================== */

.market-links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.5rem}

/* ============================================================================
   10 · FAQ
   ========================================================================== */

.faq-more{margin-top:2rem}

/* ============================================================================
   11 · CLOSING CTA (ink)
   ========================================================================== */

#cta .cta-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
#cta .cta-title{color:var(--on-ink);max-width:16ch}
#cta .cta-sub{color:var(--on-ink-2);max-width:52ch}
.cta-assurances{list-style:none;display:grid;gap:.6rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--ink-line)}
.cta-assurances li{display:flex;align-items:flex-start;gap:.65rem;font-size:.88rem;color:var(--on-ink-2);line-height:1.6}
.cta-assurances li::before{
  content:'';width:16px;height:16px;flex:none;margin-top:.25rem;border-radius:50%;
  background:rgba(200,241,105,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.8-5.1' fill='none' stroke='%23C8F169' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.cta-mail{margin-top:1.75rem;font-size:.88rem;color:var(--on-ink-3)}
.cta-mail a{color:var(--signal);border-bottom:1px solid rgba(200,241,105,.35)}
.cta-form .form-card{box-shadow:0 30px 70px rgba(0,0,0,.45)}
.form-error{color:var(--danger);font-size:.85rem;margin-bottom:.75rem;font-weight:500}
.form-success{color:var(--brand-deep);font-size:.9rem;margin-bottom:.75rem;font-weight:600}

/* Footer trust ticks pick up the lime accent from CSS, not from markup. */
.footer-trust-item .tick{color:var(--signal)}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:1180px){
  .surface-cards{grid-template-columns:1fr 1fr}
  .surface-card:first-child{grid-column:1/-1}
  .surface-shot--wide .browser-frame{width:100%}
}

@media(max-width:900px){
  /* Once the pills wrap, a side-by-side label reads as a stray fragment. */
  .trust-strip .container{flex-direction:column;gap:.9rem}
  .trust-label{padding-top:0}
}

@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{padding:clamp(2.75rem,7vw,4rem) var(--gutter) 2.5rem;max-width:760px;margin:0 auto;width:100%}
  #hero h1{max-width:18ch}
  .hero-stage{
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    margin:0 0 0;padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,2rem) clamp(3rem,7vw,4rem);
    margin-inline:var(--gutter);
  }
  .hero-browser{width:100%}
  .hero-phone{left:auto;right:2%;bottom:-6%;width:clamp(96px,18%,140px)}
  /* Stacked, the chip's top-left position lands squarely on the browser chrome
     and obscures the URL. Anchor it to the lower edge instead, where it reads as
     an annotation on the dashboard rather than a sticker over the address bar. */
  .hero-chip{right:auto;left:.75rem;top:auto;bottom:8%}
  .split-head{grid-template-columns:1fr;align-items:start}
  .shot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  #cta .cta-inner{grid-template-columns:1fr}
}

@media(max-width:720px){
  .pain-ledger{grid-template-columns:1fr}
  .surface-cards{grid-template-columns:1fr}
  .surface-card:first-child{grid-column:auto}
  .surface-shot .phone-frame{width:min(160px,52%)}
  .shot-grid{grid-template-columns:1fr}
  .phone-row{grid-template-columns:1fr;max-width:300px}
  .day-steps{grid-template-columns:1fr 1fr}
  .surface-strip{grid-template-columns:1fr}
  .surface-strip li + li{padding-left:0;padding-top:1rem;border-top:1px solid var(--line)}
  .surface-strip li + li::before{display:none}
  /* The label + pills sit on one row on desktop. Below this the pills have
     nowhere to shrink to (each is white-space:nowrap), so stack instead of
     letting them run off the viewport. */
  .trust-pills{flex:1 1 100%}
  .hide-sm{display:none}
  .hero-chip{display:none}
  .hero-phone{width:clamp(88px,22%,120px);right:4%;bottom:-4%}
}

@media(max-width:460px){
  .day-steps{grid-template-columns:1fr}
  .shot-viewport--wide{aspect-ratio:16/11}
}