/* ══════════════════════════════════════════════════════════════════
   SIMPLE LANDLORD TOOLS — v3 design system
   Phase 1 stylesheet.  Supersedes css/style.css, css/nav-dropdown.css
   and css/dark-theme.css.

   Design intent: warm paper + ink, Fraunces display / Inter text,
   emerald / amber / clay accents. Photographic and product-forward.

   IMPORTANT — do not break these contracts:
     .sticky-top-wrap  measured by js/fixed-header-offset.js (body
                       padding-top is set from its height, so it MUST
                       stay position:fixed and must not be renamed)
     .home-sidebar     target for the service-offers injection
     .nav-drop(.open) / .nav-drop-toggle / .nav-drop-panel
                       toggled by js/nav-dropdown.js (click based)
   ══════════════════════════════════════════════════════════════════ */

/* ─── tokens ─────────────────────────────────────────────────────── */
:root{
  --ink:#101C2B; --ink-2:#182B3F; --ink-3:#24405A;
  --paper:#FAF6EF; --paper-2:#F2EADE; --paper-3:#E7DCCC;
  --surface:#FFFFFF;
  --emerald:#0F7A5A; --emerald-2:#0A5C44; --emerald-soft:#E3F2EC;
  --amber:#C98A2B; --amber-soft:#FBEEDA;
  --clay:#C2603F; --clay-soft:#FAE7E0;
  --text:#16273A; --muted:#5C6B7E; --line:#E2D9CB;
  --onink:#FFFFFF; --onink-muted:rgba(255,255,255,.78);
  --shadow-1:0 1px 2px rgba(32,24,12,.05),0 4px 14px rgba(32,24,12,.05);
  --shadow-2:0 18px 44px rgba(32,24,12,.11);
  --shadow-3:0 40px 90px rgba(9,14,22,.34);
  --r:18px; --r-sm:12px;
  --headbg:#FFFFFF; --headline:#EDE7DD;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --wrap:1220px;
}
[data-theme="dark"]{
  --ink:#0A131F; --ink-2:#12202F; --ink-3:#1B3044;
  --paper:#0D1725; --paper-2:#132132; --paper-3:#1B2E42;
  --surface:#152435;
  --emerald:#31B98A; --emerald-2:#25A077; --emerald-soft:#123027;
  --amber:#E0A64B; --amber-soft:#33270F;
  --clay:#E08462; --clay-soft:#3A2018;
  --text:#EAF1F8; --muted:#9AACC0; --line:#24384E;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 18px 44px rgba(0,0,0,.45);
  --shadow-3:0 40px 90px rgba(0,0,0,.6);
  /* the supplied logo art has a baked-in white background, so the
     header stays a light surface even in dark mode rather than
     showing a white box against a dark bar */
  --headbg:#F7F4EE; --headline:#E4DACB;
}

/* ─── base ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* NB: padding-top is injected by fixed-header-offset.js — never set it here */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.015em;margin:0;color:var(--text)}
.container{max-width:var(--wrap);margin:0 auto;padding-left:26px;padding-right:26px;width:100%}
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain::after{mix-blend-mode:screen;opacity:.2}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--emerald);margin:0 0 4px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

/* ─── buttons ────────────────────────────────────────────────────── */
.button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:.93rem;padding:13px 22px;
  border-radius:12px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s,box-shadow .2s,background .2s,color .2s,border-color .2s;
}
.button:hover,.btn:hover{transform:translateY(-2px)}
.button-primary,.btn-emerald{background:var(--emerald);color:#fff;box-shadow:0 8px 22px rgba(15,122,90,.3)}
.button-primary:hover,.btn-emerald:hover{background:var(--emerald-2);box-shadow:0 14px 30px rgba(15,122,90,.36)}
.button-secondary,.btn-outline{background:transparent;color:var(--text);border-color:var(--line)}
.button-secondary:hover,.btn-outline:hover{border-color:var(--ink);background:var(--surface)}
.btn-navy{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(16,28,43,.24)}
.btn-navy:hover{background:var(--ink-2)}
.btn-lg{padding:16px 28px;font-size:1rem;border-radius:14px}

/* ══════════════════════════════════════════════════════════════════
   HEADER  — fixed wrapper (measured by fixed-header-offset.js)
   ══════════════════════════════════════════════════════════════════ */
.sticky-top-wrap{
  position:fixed;top:0;left:0;right:0;z-index:500;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
}

/* utility strip */
.topstrip{background:var(--ink);color:#96AABF;font-size:.79rem}
.topstrip .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:18px}
.topstrip a{font-weight:600;color:#C3D2E0;transition:color .18s}
.topstrip a:hover{color:#fff}
.topstrip .ts-right{display:flex;gap:20px;align-items:center}
.topstrip .ts-free{color:#7FD9B6;font-weight:700}

/* main bar */
.site-header{background:var(--headbg);border-bottom:1px solid var(--headline);position:relative}
.header-inner{display:flex;align-items:center;gap:22px;min-height:84px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;text-decoration:none}
.brand img{height:50px;width:auto}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;display:none}
.brand-tagline{display:none}
.contact-info{
  margin-left:auto;display:flex;gap:20px;align-items:center;
  font-size:.86rem;font-weight:600;color:var(--muted);white-space:nowrap;
}
.contact-info a{color:var(--muted)}
.contact-info a:hover{color:var(--emerald)}
.theme-toggle-btn{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;font-size:1rem;line-height:1;flex-shrink:0;transition:.18s;
}
.theme-toggle-btn:hover{border-color:var(--ink);color:var(--emerald)}

/* primary nav */
.site-nav{background:var(--headbg);border-bottom:1px solid var(--headline)}
.site-nav .container{display:flex;align-items:center;gap:2px;position:relative}
.site-nav a,.nav-drop-toggle{
  font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:11px 15px;border-radius:10px;
  display:flex;align-items:center;gap:6px;transition:background .18s,color .18s;
  text-decoration:none;white-space:nowrap;
}
.site-nav a:hover,.nav-drop-toggle:hover{background:var(--paper-2);color:var(--emerald)}
.site-nav a.active{color:var(--emerald)}
.nav-drop{position:relative}
.nav-drop-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .2s;display:block;
}
.nav-drop.open .nav-drop-caret{transform:rotate(180deg)}
.nav-drop-panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:216px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:8px;box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;z-index:40;
}
.nav-drop.open .nav-drop-panel{opacity:1;visibility:visible;transform:none}
.nav-drop-panel a{display:block;padding:10px 13px;border-radius:10px;font-size:.89rem;font-weight:600}
.nav-drop-panel a:hover{background:var(--paper-2);color:var(--emerald)}
.account-nav{margin-left:auto}

/* ══════════════════════════════════════════════════════════════════
   HERO — photographic
   ══════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;display:flex;align-items:center;min-height:640px;
  overflow:hidden;background:#0A1420;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url('../images/hero-landlord-tenant.png') center right/cover no-repeat;
  transform:scale(1.02);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(9,17,27,.97) 0%,rgba(9,17,27,.94) 26%,rgba(9,17,27,.80) 44%,
      rgba(9,17,27,.42) 64%,rgba(9,17,27,.10) 84%,rgba(9,17,27,.02) 100%),
    linear-gradient(to top,rgba(9,17,27,.72),transparent 46%);
}
.hero-content{position:relative;z-index:3;width:100%;padding-top:86px;padding-bottom:86px}
.hero-panel{max-width:660px;color:#fff}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 13px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  font-family:var(--sans);font-size:.775rem;font-weight:700;letter-spacing:.04em;
  color:#B9E9D5;text-transform:none;backdrop-filter:blur(6px);
}
.hero h1{
  font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:1.02;font-weight:600;
  letter-spacing:-.033em;margin:24px 0 22px;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero h1 .hl{font-style:italic;font-weight:500;color:#8FE6BE}
.hero p{
  font-size:1.15rem;line-height:1.66;color:rgba(255,255,255,.85);
  max-width:530px;margin:0 0 34px;
}
.hero-panel .button{margin-right:12px;margin-bottom:12px}
.hero-panel .button-secondary{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.hero-panel .button-secondary:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}

/* avatar proof row */
.hero-proof{display:flex;align-items:center;gap:16px;margin-top:38px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.hero-proof .avs{display:flex}
.hero-proof .avs img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(255,255,255,.92);margin-left:-13px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.hero-proof .avs img:first-child{margin-left:0}
.hero-proof .txt{font-size:.855rem;color:rgba(255,255,255,.8);line-height:1.4}
.hero-proof .txt b{color:#fff;display:block;font-size:.9rem;font-family:var(--sans)}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.hero-trust div{font-size:.83rem;font-weight:600;color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:8px}
.tk{width:18px;height:18px;border-radius:50%;background:rgba(127,217,182,.2);color:#7FD9B6;
  display:grid;place-items:center;font-size:.6rem;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════
   TRUST STRIP
   ══════════════════════════════════════════════════════════════════ */
.trust-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding-top:26px;padding-bottom:26px}
.trust-item{text-align:center;font-family:var(--display);font-weight:600;
  font-size:1.02rem;color:var(--ink)}
[data-theme="dark"] .trust-item{color:var(--text)}
.trust-item span{display:block;font-family:var(--sans);color:var(--muted);
  font-size:.86rem;font-weight:500;margin-top:3px}

/* ══════════════════════════════════════════════════════════════════
   WORKSPACE  (main column + revenue sidebar)
   ══════════════════════════════════════════════════════════════════ */
.home-workspace{padding:78px 0;background:var(--paper)}
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.home-main{min-width:0}
.home-tools-section{padding:0}

.section-heading{max-width:660px;margin:0 auto 44px;text-align:center}
.section-heading h2{font-size:clamp(1.9rem,3.3vw,2.7rem);line-height:1.13;
  letter-spacing:-.028em;margin:14px 0 12px}
.section-heading p{color:var(--muted);font-size:1.04rem;margin:0}
.home-section-heading{margin:0 0 32px;text-align:left;max-width:none}
.home-section-heading h2{font-size:clamp(1.8rem,3vw,2.4rem)}

/* ─── tool cards ─────────────────────────────────────────────────── */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.tool-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:6px 16px 16px 16px;box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
.tool-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-2)}
/* index tab — colour set per card via style="--tc:#…" */
.tool-card .tab{
  position:absolute;top:-1px;left:-1px;height:30px;padding:0 15px;
  border-radius:5px 0 12px 0;display:flex;align-items:center;
  font-size:.6rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--tc,#0F7A5A);z-index:2;
}
.tool-card-body{padding:44px 24px 24px;display:flex;flex-direction:column;flex:1}
.tool-card-body.is-plain{padding-top:26px}
/* icon tile — used instead of the old category PNGs */
.tool-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:16px;background:color-mix(in srgb,var(--tc,#0F7A5A) 14%,transparent);
  color:var(--tc,#0F7A5A);transition:transform .25s;
}
[data-theme="dark"] .tool-icon{background:color-mix(in srgb,var(--tc,#31B98A) 22%,transparent)}
.tool-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.tool-card:hover .tool-icon{transform:scale(1.08) rotate(-3deg)}
/* mini document preview */
.tool-card .prev{
  margin-bottom:18px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--paper);
}
[data-theme="dark"] .tool-card .prev{background:var(--ink-2)}
.tool-card .prev .pb{display:flex;align-items:center;gap:6px;padding:7px 10px;
  border-bottom:1px solid var(--line);background:var(--paper-2)}
.tool-card .prev .pb i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.tool-card .prev .pb span{font-size:.53rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:4px}
.tool-card .prev .lines{padding:13px 12px}
.tool-card .prev .lines b{display:block;height:6px;border-radius:3px;
  background:var(--paper-3);margin-bottom:7px}
.tool-card .prev .lines b:nth-child(1){width:52%}
.tool-card .prev .lines b:nth-child(2){width:88%}
.tool-card .prev .lines b:nth-child(3){width:74%}
.tool-card .prev .lines b:nth-child(4){width:80%;margin-bottom:0}
.tool-card h3{font-size:1.11rem;margin:0 0 8px;letter-spacing:-.018em}
.tool-card p{margin:0 0 20px;color:var(--muted);font-size:.895rem;line-height:1.56;flex:1}
.tool-link{
  display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:800;
  color:var(--emerald);margin-top:auto;
}
.tool-link:hover{color:var(--emerald-2)}
.badge-pop{
  position:absolute;top:14px;right:14px;font-size:.575rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);padding:4px 9px;border-radius:100px;z-index:2;
}

/* ─── feature block ──────────────────────────────────────────────── */
.home-feature{
  margin-top:34px;padding:36px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);
  gap:32px;align-items:center;
}
.feature-copy h2{font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.2;
  letter-spacing:-.026em;margin:0 0 14px}
.feature-copy p{color:var(--muted);font-size:.97rem;line-height:1.66;margin:0}
.check-list{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.925rem;
  font-weight:500;position:static;padding:0}
.check-list li::before{
  content:"\2713";width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:2px;
  background:var(--emerald-soft);color:var(--emerald);display:grid;place-items:center;
  font-size:.66rem;font-weight:900;
}
[data-theme="dark"] .check-list li::before{background:rgba(49,185,138,.16);color:var(--emerald)}
.feature-card{
  background:linear-gradient(150deg,var(--ink),var(--ink-2));color:#fff;
  border-radius:20px;padding:30px;box-shadow:var(--shadow-2);
}
.feature-card h3{color:#fff;font-size:1.16rem;margin:0 0 12px;letter-spacing:-.018em}
.feature-card p{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.6;margin:0 0 16px}
.feature-card strong{color:#fff}
.feature-card .button{width:100%}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
.home-sidebar{display:grid;gap:20px;min-width:0}
.sidebar-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-1);
}
.sidebar-card h2{font-size:1.2rem;line-height:1.28;margin:4px 0 10px;letter-spacing:-.02em}
.sidebar-card p{color:var(--muted);font-size:.9rem;line-height:1.58;margin:0 0 14px}
.sidebar-card > a{color:var(--emerald);font-weight:700;font-size:.88rem}
.sidebar-eyebrow{
  margin:0 0 4px;color:var(--emerald);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;font-weight:800;font-family:var(--sans);
}
.sidebar-actions{display:grid;gap:10px;margin-top:4px}
.sidebar-button{
  display:block;text-align:center;border-radius:11px;padding:12px 14px;
  font-weight:700;font-size:.9rem;transition:.18s;
}
.sidebar-button.primary{background:var(--emerald);color:#fff}
.sidebar-button.primary:hover{background:var(--emerald-2)}
.sidebar-button.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
[data-theme="dark"] .sidebar-button.secondary{color:var(--text)}
.sidebar-button.secondary:hover{border-color:var(--emerald)}

/* sidebar accordion (knowledge base) */
.sidebar-card details{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.sidebar-card details:first-of-type{border-top:0;margin-top:0;padding-top:0}
.sidebar-card summary{
  cursor:pointer;font-weight:700;font-size:.87rem;color:var(--text);
  list-style:none;display:flex;align-items:center;gap:10px;padding:6px 0;
}
.sidebar-card summary::-webkit-details-marker{display:none}
.sidebar-card summary::after{content:"+";margin-left:auto;color:var(--emerald);
  font-weight:800;font-size:1rem;line-height:1}
.sidebar-card details[open] summary::after{content:"\2013"}
.sidebar-card details p{font-size:.845rem;margin:6px 0 4px}

/* featured portal card */
.sidebar-card.portal-card{
  background:linear-gradient(150deg,var(--ink),var(--ink-2));
  border-color:transparent;color:#fff;
}
.sidebar-card.portal-card h2{color:#fff}
.sidebar-card.portal-card p{color:rgba(255,255,255,.78)}
.sidebar-card.portal-card .sidebar-eyebrow{color:#7FD9B6}
.sidebar-card.portal-card .sidebar-button.secondary{
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28);
}
.sidebar-card.portal-card .sidebar-button.secondary:hover{background:rgba(255,255,255,.18)}
.sidebar-card.portal-card .sidebar-button.primary{background:#fff;color:var(--ink)}
.sidebar-card.portal-card .sidebar-button.primary:hover{background:#F1EDE4}

/* popular forms list */
.sidebar-card.popular-card nav{display:grid;gap:2px;margin-top:4px}
.sidebar-card.popular-card nav a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;font-size:.885rem;font-weight:600;
  transition:background .18s,color .18s;
}
.sidebar-card.popular-card nav a:hover{background:var(--paper-2);color:var(--emerald)}

/* ─── service-offer overrides ────────────────────────────────────
   js/index-sidebar-offers.js injects its own style block into <head>
   at runtime carrying legacy colours (#173f6d / #e2e8ee / #9bc5a5).
   Those rules land after this file, so these selectors are
   deliberately one class deeper to win on specificity, rather than
   resorting to !important.                                          */
.home-sidebar .service-offer-card{
  display:block;border:1px solid var(--line);border-radius:12px;padding:13px;
  margin-bottom:10px;background:var(--surface);transition:.18s;
}
.home-sidebar .service-offer-card:hover{border-color:var(--emerald);background:var(--paper-2)}
.home-sidebar .offer-headline{
  display:block;font-weight:700;color:var(--ink);font-size:.88rem;line-height:1.32;
}
[data-theme="dark"] .home-sidebar .offer-headline{color:var(--text)}
.home-sidebar .service-offer-image{padding:8px;text-align:center}
.home-sidebar .service-offer-image img{max-width:100%;height:auto;border-radius:8px}
.home-sidebar .service-offers-sidebar-card .service-offer-featured{margin:-1px -1px 12px}
.home-sidebar .service-offers-sidebar-card .service-offer-featured img{
  width:100%;height:100px;object-fit:cover;border-radius:0;margin-bottom:0;display:block;
}
.home-sidebar .service-offers-sidebar-card .service-offer-featured-label{
  position:relative;top:-16px;margin-left:12px;display:inline-block;
  background:var(--emerald);color:#fff;font-weight:700;font-size:.78rem;
  padding:5px 14px;border-radius:999px;
}

/* ══════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════ */
/* full-width FAQ band — used when the FAQ sits outside the workspace grid */
.home-faq{padding:96px 0;background:var(--surface);border-top:1px solid var(--line)}
/* FAQ sitting inside the main column, below the tool grid */
.home-faq-block{padding-top:70px}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;align-items:start}
.faq-list details{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;transition:.22s;
}
.faq-list details[open]{
  border-color:color-mix(in srgb,var(--emerald) 45%,transparent);
  box-shadow:var(--shadow-2);background:var(--surface);
}
.faq-list summary{
  list-style:none;cursor:pointer;padding:20px 22px;font-weight:700;font-size:.945rem;
  display:flex;gap:16px;align-items:center;font-family:var(--sans);
  color:var(--ink);text-decoration:none;
}
[data-theme="dark"] .faq-list summary{color:var(--text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";margin-left:auto;width:24px;height:24px;flex-shrink:0;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--line);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:10px 2px,2px 10px;background-position:center,center;
  background-repeat:no-repeat;transition:.25s;
}
.faq-list details[open] summary::after{
  background-color:var(--emerald-soft);border-color:transparent;color:var(--emerald);
  background-size:10px 2px,0 0;transform:rotate(180deg);
}
.faq-list details p{padding:0 22px 22px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.68}
.faq-list details p a{color:var(--emerald);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
.site-footer{background:var(--ink);color:#A9BCCE;padding:64px 0 30px;font-size:.9rem}
[data-theme="dark"] .site-footer{background:#07101B}
.footer-grid{display:grid;grid-template-columns:1.6fr 1.4fr;gap:40px;align-items:start}
.footer-grid > div:first-child{font-family:var(--display);font-size:1rem;color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:flex-end}
.footer-links a{color:#A9BCCE;transition:color .18s}
.footer-links a:hover{color:#fff}
.site-footer .f-note{
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.11);
  display:grid;gap:14px;
}
.site-footer .f-note p{margin:0;font-size:.8rem;line-height:1.6;color:#8CA1B8;max-width:820px}
.site-footer .f-contact{display:flex;gap:22px;flex-wrap:wrap;font-size:.85rem}

/* ══════════════════════════════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1080px){
  .home-layout{grid-template-columns:1fr;gap:40px}
  .home-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-feature{grid-template-columns:1fr}
  .contact-info{display:none}
}
@media(max-width:900px){
  .hero{min-height:0}
  .hero::before{background-position:78% center}
  .hero::after{
    background:linear-gradient(180deg,rgba(9,17,27,.93) 0%,rgba(9,17,27,.88) 45%,rgba(9,17,27,.72) 100%);
  }
  .hero-content{padding-top:64px;padding-bottom:64px}
  .trust-grid{grid-template-columns:1fr;gap:16px}
  .faq-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-links{justify-content:flex-start}
  .home-faq{padding:72px 0}
}
@media(max-width:640px){
  .container{padding-left:18px;padding-right:18px}
  .topstrip .ts-right a:nth-child(n+2){display:none}
  .header-inner{min-height:70px;gap:12px}
  .brand img{height:40px}
  .site-nav .container{overflow-x:auto;padding-left:10px;padding-right:10px}
  .nav-drop-panel{left:auto;right:0}
  .home-workspace{padding:56px 0}
  .home-sidebar{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr}
  .hero-proof .avs img{width:36px;height:36px}
  .hero-trust{gap:14px 18px}
  .home-feature{padding:26px 22px}
}

/* ══════════════════════════════════════════════════════════════════
   v3 MARKETING SECTIONS
   Full-width bands that sit BELOW the workspace grid on the homepage.
   Added so the live homepage carries the same depth as the approved
   v3 concept, while the tool grid keeps its revenue sidebar above.
   ══════════════════════════════════════════════════════════════════ */

.band{padding:88px 0}
.band-surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-paper{background:var(--paper)}
.band-ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band-ink .glow-a{position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(15,122,90,.34),transparent 68%);
  right:-160px;top:-200px;filter:blur(18px);pointer-events:none}
.band-ink .glow-b{position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,138,43,.24),transparent 70%);
  left:-140px;bottom:-200px;filter:blur(20px);pointer-events:none}
.band-ink .container{position:relative;z-index:2}
.band-ink h2{color:#fff}
.band-ink p{color:rgba(255,255,255,.78)}

/* ── value props ─────────────────────────────────────────────── */
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prop{padding:28px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-1);transition:transform .22s,box-shadow .22s}
.prop:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.prop .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:16px;background:var(--emerald-soft);color:var(--emerald)}
.prop:nth-child(2) .ic{background:var(--amber-soft);color:var(--amber)}
.prop:nth-child(3) .ic{background:var(--clay-soft);color:var(--clay)}
.prop:nth-child(4) .ic{background:var(--paper-2);color:var(--ink-2)}
.prop .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.prop h3{font-size:1.06rem;margin:0 0 7px;letter-spacing:-.015em}
.prop p{margin:0;color:var(--muted);font-size:.905rem;line-height:1.58}

/* ── generic 2-col split ─────────────────────────────────────── */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split2 h2{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1.15;
  letter-spacing:-.028em;margin:16px 0 16px}
.split2 > div > p{color:var(--muted);font-size:1rem;line-height:1.68;margin:0}
.split2 .button{margin-top:30px}

/* ── app mock: form fills in, document builds ────────────────── */
.appwin{background:#0E1926;border:1px solid rgba(255,255,255,.13);border-radius:18px;
  box-shadow:var(--shadow-2);overflow:hidden}
.appbar{display:flex;align-items:center;gap:8px;padding:12px 15px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.09)}
.appbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.appbar i:first-child{background:#E0664D}
.appbar i:nth-child(2){background:#D9A33F}
.appbar i:nth-child(3){background:#4E9C78}
.appbar .t{margin-left:10px;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.5)}
.appbody{display:grid;grid-template-columns:1fr 1fr;min-height:340px}
.pane{padding:20px}
.pane-form{background:rgba(255,255,255,.028);border-right:1px solid rgba(255,255,255,.09)}
.pane-label{font-size:.63rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:16px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:.63rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.fld .box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:9px;padding:9px 11px;font-size:.83rem;color:#EAF1F8;font-weight:600;
  min-height:38px;display:flex;align-items:center;overflow:hidden}
.fld.focus .box{border-color:rgba(127,217,182,.65);background:rgba(15,122,90,.16);
  box-shadow:0 0 0 3px rgba(15,122,90,.16)}
.typed{white-space:nowrap;overflow:hidden;border-right:2px solid #7FD9B6;
  animation:type 3.4s steps(19) infinite,blink .8s step-end infinite}
@keyframes type{0%,6%{width:0}46%,88%{width:100%}100%{width:0}}
@keyframes blink{50%{border-color:transparent}}
.ghost{color:rgba(255,255,255,.3);font-weight:500}
.prog{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.prog .lb{display:flex;justify-content:space-between;font-size:.68rem;font-weight:700;
  color:rgba(255,255,255,.5);margin-bottom:8px}
.pbar{height:6px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,#0F7A5A,#7FD9B6);animation:fill 3.4s ease-in-out infinite}
@keyframes fill{0%,6%{width:18%}46%,88%{width:88%}100%{width:18%}}
.pane-doc{display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.017) 0 12px,transparent 12px 24px)}
.page{width:100%;max-width:236px;background:#fff;border-radius:8px;padding:18px;
  color:#16273A;box-shadow:0 20px 44px rgba(0,0,0,.42)}
.page .ph{display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid #EAF0F7;padding-bottom:10px;margin-bottom:13px}
.page .ph b{font-family:var(--display);font-size:.82rem;color:#0B1520}
.page .ph .seal{width:26px;height:26px;border-radius:7px;background:#E3F2EC;color:#0A5C44;
  display:grid;place-items:center;font-size:.72rem}
.pr{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px dashed #E7EDF4}
.pr span{font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#9AA9BC}
.pr b{font-size:.68rem;font-weight:700;color:#16273A;text-align:right}
.psig{display:flex;justify-content:space-between;align-items:flex-end;margin-top:14px}
.psig small{font-size:.53rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9AA9BC}
.mocknote{margin:16px 0 0;font-size:.74rem;color:rgba(255,255,255,.42);text-align:center}

/* ── how it works ────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
.steps::before{content:"";position:absolute;top:31px;left:9%;right:9%;height:2px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 19px)}
.step{position:relative;text-align:center;padding:0 8px}
.step .med{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  margin:0 auto 20px;font-family:var(--display);font-size:1.4rem;background:var(--surface);
  border:2px solid var(--line);color:var(--ink);box-shadow:var(--shadow-1);position:relative;z-index:2}
.step:nth-child(2) .med{background:var(--ink);color:#fff;border-color:var(--ink)}
.step:nth-child(3) .med{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.step h3{font-size:1.1rem;margin:0 0 9px}
.step p{margin:0;color:var(--muted);font-size:.92rem}
.step .time{display:inline-block;margin-top:13px;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}

/* ── guided-sections form mock ───────────────────────────────── */
.formmock{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:26px;box-shadow:var(--shadow-2)}
.formmock .fm-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:20px}
.formmock .fm-head b{font-family:var(--display);font-size:1rem}
.stepdots{display:flex;gap:6px;flex-shrink:0}
.stepdots i{width:7px;height:7px;border-radius:50%;background:var(--paper-3);display:block}
.stepdots i.on{background:var(--emerald);width:20px;border-radius:100px}
.fgrp{margin-bottom:16px}
.fgrp .lbl{display:flex;justify-content:space-between;gap:10px;font-size:.68rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.fgrp .lbl em{font-style:normal;color:var(--emerald);white-space:nowrap}
.inp{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:.87rem;
  background:var(--paper);color:var(--text);font-weight:600}
.inp.filled{background:var(--emerald-soft);
  border-color:color-mix(in srgb,var(--emerald) 35%,transparent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hintcard{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 16px;
  background:var(--amber-soft);border-radius:12px}
.hintcard .hi{width:26px;height:26px;border-radius:8px;background:#fff;color:var(--amber);
  display:grid;place-items:center;font-size:.8rem;flex-shrink:0}
[data-theme="dark"] .hintcard .hi{background:rgba(0,0,0,.25)}
.hintcard p{margin:0;font-size:.82rem;line-height:1.5;font-weight:500;color:var(--text)}

/* ── portal showcase ─────────────────────────────────────────── */
.portal-head{text-align:center;max-width:660px;margin:0 auto 46px}
.portal-head h2{font-size:clamp(1.9rem,3.3vw,2.7rem);line-height:1.13;
  letter-spacing:-.028em;margin:16px 0 14px}
.portal-head p{margin:0}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.shot{border-radius:20px;overflow:hidden;position:relative;min-height:340px;
  border:1px solid rgba(255,255,255,.14)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;
  background:linear-gradient(to top,rgba(9,17,27,.88),transparent)}
.shot .cap b{display:block;font-family:var(--display);font-size:1.02rem;color:#fff}
.shot .cap span{font-size:.78rem;color:rgba(255,255,255,.66)}
.portal-ui{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow-3)}
.pu-bar{display:flex;align-items:center;gap:9px;padding:13px 16px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1)}
.pu-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);display:block}
.pu-bar .url{margin-left:8px;flex:1;background:rgba(0,0,0,.28);border-radius:8px;
  padding:6px 12px;font-size:.7rem;color:rgba(255,255,255,.5);font-weight:600}
.pu-body{padding:20px;display:grid;gap:13px}
.pu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pu-stat{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:14px}
.pu-stat b{display:block;font-family:var(--display);font-size:1.35rem;color:#fff}
.pu-stat span{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.pu-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px}
.pu-row .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-size:.68rem;font-weight:800;color:#fff;flex-shrink:0}
.pu-row .tx{flex:1;min-width:0}
.pu-row .tx b{display:block;font-size:.8rem;color:#fff}
.pu-row .tx span{font-size:.7rem;color:rgba(255,255,255,.5)}
.pu-row .st{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;background:rgba(127,217,182,.16);color:#7FD9B6}

/* ── closing CTA band ────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;border-radius:28px;
  background:linear-gradient(126deg,#0B1520,#152C44 52%,#0C4A38);color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 72%);
  mask-image:linear-gradient(120deg,#000,transparent 72%)}
.cta-in{position:relative;z-index:2;padding:58px 54px;display:flex;justify-content:space-between;
  align-items:center;gap:40px;flex-wrap:wrap}
.cta-in h2{font-size:clamp(1.75rem,3.1vw,2.5rem);line-height:1.12;
  letter-spacing:-.03em;margin:0 0 12px;max-width:620px}
.cta-in p{margin:0;color:rgba(255,255,255,.78);max-width:520px;font-size:1rem}
.cta-in .button-secondary{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.cta-in .button-secondary:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}
.cta-wrap{padding:0 0 88px}

/* ── responsive for the added bands ──────────────────────────── */
@media(max-width:1080px){
  .props{grid-template-columns:1fr 1fr}
  .split2{grid-template-columns:1fr;gap:40px}
  .portal-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .band{padding:68px 0}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .step{text-align:left;display:grid;grid-template-columns:62px 1fr;gap:20px;
    align-items:start;padding:0}
  .step .med{margin:0;grid-row:span 3}
  .cta-in{padding:44px 30px}
}
@media(max-width:640px){
  .props{grid-template-columns:1fr}
  .appbody{grid-template-columns:1fr}
  .pane-form{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
  .pane-doc{padding:28px 20px 34px}
  .shot{min-height:250px}
  .cta-band{border-radius:20px}
  .two{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS
   IMPORTANT: only ever populate this with quotes a real, identifiable
   customer actually gave. Never generate copy into it.
   ══════════════════════════════════════════════════════════════════ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s;
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.stars{display:flex;gap:3px;margin-bottom:16px;color:var(--amber);font-size:.85rem;letter-spacing:.04em}
.quote blockquote{
  margin:0 0 22px;font-family:var(--display);font-size:1.045rem;line-height:1.52;
  font-weight:500;letter-spacing:-.012em;flex:1;color:var(--text);
}
.quote .who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line)}
.quote .who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--line)}
.quote .who b{display:block;font-size:.87rem;font-family:var(--sans);color:var(--text)}
.quote .who span{font-size:.78rem;color:var(--muted)}
/* initials fallback avatars — the honest alternative to stock faces */
.quote .who .avinit{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-weight:800;font-size:.85rem;color:#fff;letter-spacing:.02em;
}
/* unmistakable "not final" state, so it can never be deployed by accident */
.quote.is-placeholder{border:2px dashed var(--amber);background:var(--amber-soft)}
.quote.is-placeholder blockquote{color:var(--muted);font-style:italic;font-size:.98rem}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}