/* ============================================================================
   FoundFlow AI — Home-page DIRECTION layouts
   .dir-a "The Quiet Ledger"  — editorial calm, centered
   .dir-b "Statement"         — asymmetric, structured finance-firm
   .dir-c "Recovered"         — dark-anchored, cinematic
   Each varies: hero · how-it-works steps · the "you approve" trust section.
   ========================================================================== */

/* ===========================================================================
   HERO A — centered editorial + scan card below
   ========================================================================== */
.hero-a{padding:96px 0 60px;text-align:center;position:relative}
.hero-a .glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:900px;height:520px;max-width:120%;
  background:radial-gradient(ellipse at center, rgba(21,73,59,.07), rgba(21,73,59,0) 68%);
  pointer-events:none;z-index:0}
.hero-a .wrap{position:relative;z-index:1}
.hero-a h1{font-size:clamp(40px,5.6vw,66px);font-weight:500;max-width:13ch;margin:0 auto 24px;letter-spacing:-.028em;line-height:1.04}
.hero-a h1 .em{color:var(--pine);font-style:italic}
.hero-a .sub{font-size:clamp(18px,2.1vw,21px);color:var(--stone);max-width:600px;margin:0 auto 34px;text-wrap:pretty}
.hero-a .cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-a .reassure{margin-top:22px;font-size:14px;color:var(--stone);max-width:600px;margin-left:auto;margin-right:auto}
.hero-a .reassure b{color:var(--pine);font-weight:600}
.hero-a .scan-wrap{max-width:760px;margin:54px auto 0;position:relative}
.hero-a .scan-cap{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);margin-bottom:16px}
.hero-a .scan-cap::before,.hero-a .scan-cap::after{content:"";width:30px;height:1px;background:var(--line)}

/* paper-cut wave divider (reuses hero.jpg feel via image) */
.wave-divider{display:block;width:100%;height:auto;margin:0;border:0}

/* ===========================================================================
   HERO B — split: copy left / scan right
   ========================================================================== */
.hero-b{padding:80px 0 72px;border-bottom:1px solid var(--line);background:
  linear-gradient(180deg, var(--white), var(--ivory));position:relative}
.hero-b .grid{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center}
.hero-b .copy{position:relative;padding-left:26px}
.hero-b .copy::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--pine),rgba(21,73,59,.15))}
.hero-b h1{font-size:clamp(36px,4.4vw,56px);font-weight:500;letter-spacing:-.026em;line-height:1.05;margin-bottom:22px}
.hero-b h1 .em{color:var(--pine);font-style:italic}
.hero-b .sub{font-size:19px;color:var(--stone);max-width:30ch;margin-bottom:30px;text-wrap:pretty}
.hero-b .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.hero-b .reassure{font-size:14px;color:var(--stone);max-width:34ch}
.hero-b .reassure b{color:var(--pine);font-weight:600}
.hero-b .scan-side{position:relative}
.hero-b .scan-side .scan-cap{display:flex;align-items:center;gap:9px;font-size:12px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--stone);margin-bottom:14px}
.hero-b .scan-side .scan-cap .lamp{width:8px;height:8px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 3px rgba(21,73,59,.12)}
@media(max-width:880px){
  .hero-b .grid{grid-template-columns:1fr;gap:44px}
  .hero-b .sub,.hero-b .reassure{max-width:none}
}
/* inline trust strip under hero B */
.hero-b-strip{background:var(--ink);color:#cdd6d0}
.hero-b-strip .row{display:flex;flex-wrap:wrap;gap:30px 48px;justify-content:center;padding:20px 0;font-size:14px}
.hero-b-strip .row span{display:inline-flex;align-items:center;gap:10px}
.hero-b-strip .row svg{color:var(--mint);flex:0 0 16px}

/* ===========================================================================
   HERO C — dark cinematic
   ========================================================================== */
.hero-c{background:radial-gradient(120% 100% at 80% -10%, #1A3A30 0%, #0E1A17 55%);
  color:var(--ivory);padding:104px 0 92px;position:relative;overflow:hidden}
.hero-c .tex{position:absolute;inset:0;background-image:url('assets/texture.png');background-size:520px;
  opacity:.05;mix-blend-mode:screen;pointer-events:none}
.hero-c .wave{position:absolute;right:-6%;top:-12%;width:62%;max-width:920px;opacity:.5;
  pointer-events:none;mask-image:linear-gradient(to left, #000 35%, transparent 92%);
  -webkit-mask-image:linear-gradient(to left, #000 35%, transparent 92%)}
.hero-c .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-c h1{font-size:clamp(40px,5.4vw,64px);font-weight:500;color:var(--ivory);letter-spacing:-.028em;line-height:1.04;margin-bottom:24px}
.hero-c h1 .em{color:var(--mint);font-style:italic}
.hero-c .sub{font-size:clamp(18px,2.1vw,21px);color:#b8c2bc;max-width:34ch;margin-bottom:34px;text-wrap:pretty}
.hero-c .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.hero-c .reassure{font-size:14px;color:#9aa9a2;max-width:38ch}
.hero-c .reassure b{color:var(--mint);font-weight:600}
.hero-c .btn-ghost{color:var(--ivory);border-color:rgba(255,255,255,.24)}
.hero-c .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:880px){
  .hero-c{padding:84px 0 72px}
  .hero-c .grid{grid-template-columns:1fr;gap:44px}
  .hero-c .wave{width:120%;right:-30%;opacity:.32}
  .hero-c .sub,.hero-c .reassure{max-width:none}
}

/* ===========================================================================
   STEPS A — refined 3-up cards (illustrations)
   ========================================================================== */
.steps-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.steps-cards{grid-template-columns:1fr;gap:20px}}
.s-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease)}
.s-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#d8d3c5}
.s-card .step-illo{width:64px;height:64px;background:var(--ivory);padding:6px;border-radius:12px;border:1px solid var(--line)}
.s-card .n{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:15px;color:var(--pine);
  font-weight:600;margin-bottom:12px}
.s-card .n b{font-size:13px;font-family:var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:600}
.s-card h3{font-size:22px;font-weight:500;margin-bottom:12px}
.s-card p{color:var(--stone);font-size:15.5px}

/* ===========================================================================
   STEPS B — vertical numbered timeline w/ hairline connector
   ========================================================================== */
.steps-timeline{max-width:880px;margin:0 auto;position:relative}
.tl-item{display:grid;grid-template-columns:74px 1fr;gap:30px;padding:0 0 44px;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-num{width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;font-weight:500;color:var(--pine);
  flex:0 0 auto;z-index:1}
.tl-line{width:1px;flex:1;background:var(--line);margin-top:8px;min-height:30px}
.tl-item:last-child .tl-line{display:none}
.tl-body{padding-top:8px}
.tl-body .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:600;margin-bottom:6px;display:block}
.tl-body h3{font-size:25px;font-weight:500;margin-bottom:12px}
.tl-body p{color:var(--body-ink);font-size:17px;max-width:56ch}
.tl-body .callout{margin-top:16px;background:var(--white);border:1px solid var(--line);border-left:2px solid var(--pine);
  border-radius:8px;padding:13px 16px;font-size:14.5px;color:var(--stone)}
.tl-body .callout b{color:var(--pine)}
@media(max-width:560px){
  .tl-item{grid-template-columns:46px 1fr;gap:20px}
  .tl-num{width:42px;height:42px;font-size:18px}
}

/* ===========================================================================
   STEPS C — large alternating rows w/ imagery + big numerals
   ========================================================================== */
.steps-stack{display:flex;flex-direction:column;gap:8px;max-width:var(--maxw);margin:0 auto}
.st-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:none}
.st-row:nth-child(even) .st-media{order:-1}
.st-idx{font-family:var(--display);font-size:clamp(48px,7vw,82px);font-weight:400;color:var(--pine);line-height:.9;opacity:.9;
  display:block;margin-bottom:18px;letter-spacing:-.02em}
.st-text .tag{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);font-weight:600;display:block;margin-bottom:10px}
.st-text h3{font-size:clamp(26px,3vw,34px);font-weight:500;margin-bottom:14px;letter-spacing:-.02em}
.st-text p{color:var(--body-ink);font-size:18px;max-width:46ch;text-wrap:pretty}
.st-media{position:relative}
.st-media img{width:100%;height:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line)}
.st-media .illo{background:var(--ivory);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);border:1px solid var(--line);padding:30px;max-height:320px}
.st-media .illo img{width:170px;height:170px;border:0;border-radius:14px}
@media(max-width:820px){
  .st-row{grid-template-columns:1fr;gap:26px;padding:32px 0}
  .st-row:nth-child(even) .st-media{order:0}
  .st-media img{max-height:240px}
}

/* ===========================================================================
   TRUST A — refined 2-col hairline list
   ========================================================================== */
.trust-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;max-width:920px;margin:0 auto}
@media(max-width:780px){.trust-list{grid-template-columns:1fr}}
.trust-list .ti{display:flex;gap:16px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line)}
.trust-list .tick{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--pine);color:var(--pine);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.trust-list .tick svg{width:13px;height:13px}
.trust-list .ti b{font-family:var(--display);font-size:18px;font-weight:600;display:block;margin-bottom:4px}
.trust-list .ti span{color:var(--stone);font-size:15px}
/* the lead "you approve" gets a quiet emphasis */
.trust-list .ti.lead{grid-column:1/-1;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px;margin-bottom:8px}
.trust-list .ti.lead .tick{background:var(--pine);color:var(--white)}

/* ===========================================================================
   TRUST B — featured "approve every message" panel
   ========================================================================== */
.approve-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;max-width:var(--maxw);margin:0 auto}
@media(max-width:880px){.approve-wrap{grid-template-columns:1fr;gap:40px}}
.approve-copy h2{font-size:clamp(28px,3.3vw,40px);font-weight:500;letter-spacing:-.02em;margin-bottom:18px;text-align:left;max-width:none}
.approve-copy p{color:var(--body-ink);font-size:18px;margin-bottom:22px;max-width:46ch;text-wrap:pretty}
.approve-mini{list-style:none;margin:0;padding:0}
.approve-mini li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;font-size:15.5px;color:var(--body-ink)}
.approve-mini .tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--pine);color:var(--pine);display:flex;align-items:center;justify-content:center;margin-top:1px}
.approve-mini .tick svg{width:12px;height:12px}
/* the drafted-message card */
.msg-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.msg-head{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--ivory)}
.msg-head .avatar{width:34px;height:34px;border-radius:9px;background:var(--pine);color:var(--ivory);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:15px}
.msg-head .who{display:flex;flex-direction:column;line-height:1.3}
.msg-head .who b{font-size:14px;color:var(--ink)}
.msg-head .who span{font-size:12px;color:var(--stone)}
.msg-head .draft{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--pine);background:rgba(21,73,59,.08);padding:4px 10px;border-radius:999px}
.msg-body{padding:22px;font-size:15px;color:var(--body-ink);line-height:1.62}
.msg-body p{margin-bottom:12px}
.msg-body .discl{font-size:12.5px;color:var(--stone);border-top:1px dashed var(--line);padding-top:12px;margin-top:14px}
.msg-actions{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--line);background:var(--ivory);align-items:center}
.msg-actions .ab{font-family:var(--body);font-weight:600;font-size:14px;border-radius:8px;padding:9px 16px;cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--ink);transition:all .18s var(--ease)}
.msg-actions .ab.primary{background:var(--pine);color:var(--ivory);border-color:var(--pine)}
.msg-actions .ab.primary:hover{background:var(--pine-deep)}
.msg-actions .ab.ghost:hover{background:rgba(21,73,59,.05)}
.msg-actions .hint{margin-left:auto;font-size:12.5px;color:var(--stone);display:flex;align-items:center;gap:7px}
.msg-actions .hint::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pine)}
.msg-card.approved .msg-actions .state{display:flex}
.msg-actions .state{display:none;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--pine)}
.msg-actions .state svg{width:18px;height:18px}

/* ===========================================================================
   TRUST C — dark relationship band + approve points
   ========================================================================== */
.trust-band{background:var(--ink);color:var(--ivory);position:relative;overflow:hidden}
.trust-band .grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:520px}
@media(max-width:880px){.trust-band .grid{grid-template-columns:1fr}}
.trust-band .photo{position:relative}
.trust-band .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:880px){.trust-band .photo{height:320px}.trust-band .photo img{position:static}}
.trust-band .panel{padding:72px 64px}
@media(max-width:560px){.trust-band .panel{padding:48px 28px}}
.trust-band h2{color:var(--ivory);font-size:clamp(28px,3.3vw,40px);font-weight:500;text-align:left;max-width:none;letter-spacing:-.02em;margin-bottom:20px}
.trust-band .lede{color:#b8c2bc;font-size:18px;margin-bottom:28px;max-width:42ch;text-wrap:pretty}
.trust-band .tlist{list-style:none;margin:0;padding:0}
.trust-band .tlist li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid rgba(255,255,255,.1)}
.trust-band .tlist li:first-child{border-top:none}
.trust-band .tlist .tick{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--mint);color:var(--mint);display:flex;align-items:center;justify-content:center;margin-top:2px}
.trust-band .tlist .tick svg{width:13px;height:13px}
.trust-band .tlist b{display:block;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ivory);margin-bottom:3px}
.trust-band .tlist span{color:#9aa9a2;font-size:14.5px}

/* ===========================================================================
   Shared: section intro alignment + small inline trust ticks
   ========================================================================== */
.inline-trust{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;margin-top:30px}
.inline-trust span{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--stone)}
.inline-trust svg{color:var(--pine);flex:0 0 16px}