/* Find Me A Product — niche landing template
   One token family per palette: every surface, rule, numeral and label is derived from the
   same ink + accent pair, so sections read as one page (CEO 2026-09-04: "palettes don't match up").
   Default = ink blue. Alternates keep the same roles: [data-palette="manila|broadsheet|blueprint-warm|workshop-green"]. */

:root{
  /* ink family (dark surfaces + text on light) */
  --ink:#0f2440;
  --ink-deep:#0a1a2e;
  --ink-2:#3b5573;        /* secondary text on light */
  --ink-3:#6b8099;        /* muted text / meta on light */
  /* accent pair: --accent fills buttons on any surface; --accent-deep is the same hue at text contrast on light */
  --accent:#7fd3ff;
  --accent-deep:#0b6aa8;
  /* light surfaces, all cool-neutral, same hue as ink */
  --paper:#f5f8fb;
  --surface:#ffffff;
  --surface-2:#e9eff5;
  --line:#d3dde8;
  --line-strong:var(--ink);
  /* text on ink */
  --on-ink:#eef4fb;
  --on-ink-2:#bcd2ea;
  --on-ink-3:#8aa9c9;
  --on-ink-line:rgba(150,196,255,.22);

  --font-serif:'Instrument Serif', serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-body:'Space Grotesk', sans-serif;

  --radius:3px;
  --pad-x:64px;
  --section-y:72px;
  --wrap:1312px;
}

:root[data-palette="manila"]{
  --ink:#26221c; --ink-deep:#1c1812; --ink-2:#5a5245; --ink-3:#857a69;
  --accent:#e2762a; --accent-deep:#a8501a;
  --paper:#f7f3ec; --surface:#ffffff; --surface-2:#efe7d9; --line:#dfd4c2;
  --on-ink:#f2ece1; --on-ink-2:#c8bda9; --on-ink-3:#a8987d; --on-ink-line:rgba(226,118,42,.25);
}
:root[data-palette="broadsheet"]{
  --ink:#14181a; --ink-deep:#0d0f10; --ink-2:#464c4f; --ink-3:#777e82;
  --accent:#8a5a2b; --accent-deep:#6d4520;
  --paper:#f7f6f2; --surface:#ffffff; --surface-2:#ebeae5; --line:#d9d8d2;
  --on-ink:#f7f6f2; --on-ink-2:#c7c9c4; --on-ink-3:#9ea19b; --on-ink-line:rgba(255,255,255,.18);
}
:root[data-palette="blueprint-warm"]{
  --ink:#102a43; --ink-deep:#0b1e30; --ink-2:#3d5570; --ink-3:#6c8096;
  --accent:#f2b84b; --accent-deep:#9a6a10;
  --paper:#f8f7f2; --surface:#ffffff; --surface-2:#ece9e0; --line:#d9d6cc;
  --on-ink:#eaf1f7; --on-ink-2:#b7c9d6; --on-ink-3:#8ea3b3; --on-ink-line:rgba(242,184,75,.25);
}
:root[data-palette="workshop-green"]{
  --ink:#19352f; --ink-deep:#122622; --ink-2:#3f5c55; --ink-3:#6f8880;
  --accent:#d9a441; --accent-deep:#8a6412;
  --paper:#f6f7f3; --surface:#ffffff; --surface-2:#e8ece4; --line:#d3dacf;
  --on-ink:#e9f2ee; --on-ink-2:#b9d0c8; --on-ink-3:#8fac9f; --on-ink-line:rgba(217,164,65,.25);
}
/* FMP brand system (fmahl repo design/fmp-brand, docs/brand/DESIGN.md): teal trust + orange action */
:root[data-palette="fmp"]{
  --ink:#0f3d38; --ink-deep:#0a2d2a; --ink-2:#3d5c58; --ink-3:#6f8683;
  --accent:#f7941d; --accent-deep:#0d9488; --mark:#0d9488;
  --paper:#f7fbfa; --surface:#ffffff; --surface-2:#e6f4f2; --line:#cfe3df;
  --on-ink:#eefaf8; --on-ink-2:#bfe0da; --on-ink-3:#8fbdb5; --on-ink-line:rgba(247,148,29,.25);
}
:root[data-palette="copper"]{
  --ink:#1a1613; --ink-deep:#100e0c; --ink-2:#574b40; --ink-3:#8a7c6e;
  --accent:#e8843a; --accent-deep:#b5561c;
  --paper:#f6f3ee; --surface:#ffffff; --surface-2:#efe9e1; --line:#ddd5ca;
  --on-ink:#f5efe6; --on-ink-2:#d4c8b8; --on-ink-3:#a8998a; --on-ink-line:rgba(232,132,58,.28);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit}
.grid-bg{
  background-image:linear-gradient(var(--on-ink-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--on-ink-line) 1px, transparent 1px);
  background-size:32px 32px;
}
.mono{font-family:var(--font-mono)}
.wrap{max-width:var(--wrap);margin:0 auto}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.ink :focus-visible{outline-color:var(--accent)}

/* shared section heading: eyebrow + serif title, same on light and dark */
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:36px}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)}
.ink .eyebrow{color:var(--accent)}
.section-head h2{margin:0;font-family:var(--font-serif);font-weight:400;font-size:38px;line-height:1.1;letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;color:var(--ink);background:var(--accent);
  border:1.5px solid var(--accent);border-radius:var(--radius);text-decoration:none;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(.94)}
.btn:active{transform:translateY(1px)}
.btn-nav{font-size:14px;padding:9px 16px}
.btn-hero{font-size:17px;padding:16px 26px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:transparent;border:1.5px solid var(--line);
  border-radius:var(--radius);font-size:15px;font-weight:500;padding:14px 20px;text-decoration:none;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.btn-ghost:hover{border-color:var(--ink-2);color:var(--ink)}

/* ---------- header ---------- */
.site-header{background:var(--ink);color:var(--on-ink);border-bottom:1px solid var(--on-ink-line)}
.site-header .wrap{padding:0 var(--pad-x);height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.mark{width:38px;height:38px;flex:none;display:block}
.mark-large{width:96px;height:96px}
.wordmark{display:flex;flex-direction:column;gap:3px;line-height:1}
.wordmark-top{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-2)}
.wordmark-noun{font-family:var(--font-body);font-weight:700;font-size:19px;letter-spacing:.01em;text-transform:uppercase;color:var(--accent)}
.site-nav{display:flex;align-items:center;gap:30px;font-size:14px}
.site-nav a.nav-link{color:var(--on-ink-2);text-decoration:none}
.site-nav a.nav-link:hover{color:var(--on-ink)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--on-ink)}
.hero .wrap{padding:80px var(--pad-x) 88px;display:grid;grid-template-columns:1fr 560px;gap:64px;align-items:center}
.hero-copy{min-width:0;display:flex;flex-direction:column;gap:22px}
.hero h1{margin:0;font-family:var(--font-serif);font-weight:400;font-size:64px;line-height:1.03;letter-spacing:-.02em;max-width:640px;overflow-wrap:break-word}
.hero p.subhead{margin:0;font-size:19px;line-height:1.6;color:var(--on-ink-2);max-width:560px}
.subhead strong{color:var(--accent);font-weight:600}
.hero-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.trust-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--on-ink-3)}
.trust-bullets li::before{content:"\2014\00a0"}
.hero-illustration{width:100%;display:block;overflow:hidden}
.hero-illustration.is-framed{border:1px solid var(--on-ink-line);border-radius:var(--radius)}
.hero-illustration img{width:100%;height:auto;display:block}

/* ---------- steps ---------- */
.steps{background:var(--paper);border-bottom:1px solid var(--line)}
.steps .wrap{padding:var(--section-y) var(--pad-x)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 28px 30px;display:flex;flex-direction:column;gap:18px;position:relative;
}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.step-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.step-art{height:140px;display:flex;align-items:center;justify-content:center}
.step-art-svg{height:100%;width:auto;max-width:100%}
.step-badge{width:52px;height:52px;border-radius:var(--radius);background:var(--surface-2);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:none}
.step-icon{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.step-num{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.step p{margin:0;font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}

/* ---------- request section ---------- */
.request-section{background:var(--surface-2)}
.request-section .wrap{padding:var(--section-y) var(--pad-x) 80px}
.request-grid{display:grid;grid-template-columns:1fr 330px;gap:32px;align-items:start}
.form-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--radius)}

/* progress: three segments, current = ink, done = surface-2 with check, upcoming = plain */
.form-progress{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1.5px solid var(--ink)}
.form-tab{
  display:flex;align-items:center;gap:12px;padding:16px 20px;text-align:left;
  background:transparent;border:none;border-right:1px solid var(--line);cursor:pointer;color:var(--ink-3);
  transition:background .18s ease,color .18s ease;
}
.form-tab:last-child{border-right:none}
.form-tab-num{
  width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;
}
.form-tab-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.form-tab-title{font-size:14.5px;font-weight:600;color:inherit}
.form-tab-sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.8}
.form-tab.is-active{background:var(--ink);color:var(--on-ink)}
.form-tab.is-active .form-tab-num{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.form-tab.is-done{color:var(--ink-2);background:var(--surface-2)}
.form-tab.is-done .form-tab-num{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.form-tab.is-done .form-tab-num::before{content:"\2713"}
.form-tab.is-done .form-tab-num span{display:none}

.form-body{padding:32px 32px 32px;display:flex;flex-direction:column;gap:24px}
.form-body[hidden]{display:none}
.stage-head{display:flex;flex-direction:column;gap:8px}
.stage-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.stage-head h2{margin:0;font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.1;letter-spacing:-.01em}
.stage-note{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:560px}

.field{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.field:first-of-type{padding-top:0;border-top:none}
.field-label-row{display:flex;align-items:baseline;gap:9px}
.field-label-row label{font-size:15px;font-weight:600}
.field-req{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.pill-group{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  font-size:14px;padding:10px 14px;border-radius:var(--radius);background:var(--surface);
  color:var(--ink-2);border:1.5px solid var(--line);cursor:pointer;user-select:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.pill:hover{border-color:var(--ink-3);color:var(--ink)}
.pill.is-selected{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
select.field-select,input.field-text,textarea.field-text{
  width:100%;font-size:15px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-body);
  transition:border-color .15s ease;
}
select.field-select{max-width:320px}
select.field-select:hover,input.field-text:hover,textarea.field-text:hover{border-color:var(--ink-3)}
select.field-select:focus,input.field-text:focus,textarea.field-text:focus{border-color:var(--accent-deep);outline:none}
textarea.field-text{min-height:96px;resize:vertical}
.more-detail-toggle{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;
  border:1.5px dashed var(--line);border-radius:var(--radius);padding:11px 14px;background:transparent;
  cursor:pointer;color:var(--ink-2);
}
.more-detail-toggle:hover{border-color:var(--ink-3);color:var(--ink)}
.more-detail-body{display:flex;flex-direction:column;gap:20px;margin-top:18px}
.more-detail-body[hidden]{display:none}

.form-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1.5px solid var(--ink)}
.form-actions .btn-ghost{order:0}
.form-actions .btn{order:1;margin-left:auto}
.next-hint{margin:0;font-size:13px;color:var(--ink-3);flex:1;min-width:0}

.consent-box{
  padding:18px 20px;border:1.5px dashed var(--line);border-radius:var(--radius);
  background:var(--paper);display:flex;flex-direction:column;gap:12px;
}
.consent-box p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.consent-label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consent-label input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.consent-label span{font-size:13.5px;line-height:1.5}
.consent-link{color:var(--accent-deep);border:none;border-bottom:1px solid currentColor;cursor:pointer;background:none;padding:0;font:inherit;text-align:left}
.consent-full{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.consent-full[hidden]{display:none}
.error-text{display:none;color:#b3423e;font-size:12.5px;font-family:var(--font-mono)}
.error-text.is-visible{display:block}
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.submit-error{font-family:var(--font-body);font-size:14px}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- summary rail ---------- */
.summary{display:flex;flex-direction:column;gap:18px;position:sticky;top:24px}
.summary-card{border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--surface)}
.summary-head{padding:14px 18px;border-bottom:1.5px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.summary-head span:first-child{font-family:var(--font-serif);font-size:21px}
.summary-live{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.summary-row span:first-child{font-size:14px;color:var(--ink-2)}
.summary-row span:last-child{font-family:var(--font-mono);font-size:13px;text-align:right;color:var(--ink)}
.summary-next span:last-child{color:var(--ink-3);font-size:12px}
.summary-sent{padding:14px 18px;background:var(--ink);color:var(--on-ink)}
.summary-sent span{font-family:var(--font-serif);font-size:19px;line-height:1.3;display:block}
.operator-line{margin:0;font-family:var(--font-mono);font-size:11px;line-height:1.75;color:var(--ink-3)}

/* ---------- one-page layout (html[data-layout="one-page"]) ---------- */
html[data-layout="one-page"] .form-progress{display:none}
html[data-layout="one-page"] .next-hint{display:none}
html[data-layout="one-page"] .form-body[data-tab-panel="1"] .form-actions,
html[data-layout="one-page"] .form-body[data-tab-panel="2"] .form-actions{display:none}
html[data-layout="one-page"] .form-col-left .form-body + .form-body{border-top:1px solid var(--line)}
html[data-layout="one-page"] .request-grid{grid-template-columns:1fr 420px}
html[data-layout="one-page"] .summary-next{display:none}
html[data-layout="one-page"] aside.summary > .summary-card,
html[data-layout="one-page"] aside.summary > .operator-line{margin-left:32px;margin-right:32px}
html[data-layout="one-page"] aside.summary > .operator-line{margin-bottom:32px}

/* ---------- questions ---------- */
.questions{background:var(--ink);color:var(--on-ink)}
.questions .wrap{padding:var(--section-y) var(--pad-x)}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;margin:0}
.faq-item{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--on-ink-line)}
.faq-item dt{font-size:16.5px;font-weight:600;margin:0}
.faq-item dd{margin:0;font-size:15px;line-height:1.6;color:var(--on-ink-2)}

/* ---------- closing ---------- */
.closing{background:var(--ink-deep);color:var(--on-ink);border-top:1px solid var(--on-ink-line)}
.closing .wrap{padding:64px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:44px}
.closing p{margin:0;flex:1;font-family:var(--font-serif);font-size:46px;line-height:1.08;max-width:640px}
.closing em{font-style:italic;color:var(--accent)}
.closing .btn{white-space:nowrap}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-deep);color:var(--on-ink-3);border-top:1px solid var(--on-ink-line);font-size:13px;line-height:1.8}
.site-footer .wrap{padding:28px var(--pad-x) 36px;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-left{display:flex;flex-direction:column;gap:3px}
.footer-left a{color:var(--accent);text-decoration:none}
.footer-links{display:flex;gap:22px}
.footer-links a{color:var(--on-ink-3);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- tablet (<=1024px) ---------- */
@media (max-width:1024px){
  :root{--pad-x:32px;--section-y:56px}
  .hero .wrap{grid-template-columns:1fr 1fr;gap:40px}
  .hero h1{font-size:52px}
  .request-grid{grid-template-columns:1fr}
  .summary{position:static}
  .faq-grid{grid-template-columns:1fr}
  html[data-layout="one-page"] .request-grid{grid-template-columns:1fr}
}

/* ---------- mobile (<=680px), one responsive page ---------- */
@media (max-width:680px){
  :root{--pad-x:20px;--section-y:40px}
  .site-header .wrap{height:auto;min-height:58px}
  .mark{width:30px;height:30px}
  .wordmark-noun{font-size:15px}
  .mark-large{width:64px;height:64px}
  .site-nav{gap:10px}
  .site-nav .nav-link{display:none}
  .btn-nav{font-size:12px;padding:8px 11px;line-height:1.3}

  .hero .wrap{grid-template-columns:1fr;padding:32px var(--pad-x) 36px;gap:24px}
  .hero h1{font-size:40px;max-width:100%}
  .hero p.subhead{font-size:16px;max-width:100%}
  .hero-actions{width:100%}
  .hero-actions .btn-hero{width:100%}
  .trust-bullets{font-size:11.5px}

  .section-head{margin-bottom:24px}
  .section-head h2{font-size:30px}
  .steps-grid{grid-template-columns:1fr;gap:12px}
  .step{padding:20px 20px 22px;gap:14px}
  .step-art{height:110px}
  .step p{font-size:17px}

  .form-progress{grid-template-columns:repeat(3,auto);justify-content:start}
  .form-tab{padding:12px 14px;gap:0}
  .form-tab-text{display:none}
  .form-tab.is-active{flex:1}
  .form-tab.is-active .form-tab-text{display:flex;margin-left:12px}
  .form-body{padding:20px;gap:20px}
  .stage-head h2{font-size:28px}
  .form-actions{flex-direction:column;align-items:stretch;gap:10px}
  .form-actions .btn{order:0;margin-left:0;width:100%}
  .form-actions .btn-ghost{order:1;width:100%}
  .next-hint{order:2;text-align:center}
  select.field-select{max-width:100%}
  html[data-layout="one-page"] aside.summary > .summary-card,
  html[data-layout="one-page"] aside.summary > .operator-line{margin-left:20px;margin-right:20px}
  html[data-layout="one-page"] aside.summary > .operator-line{margin-bottom:20px}

  .faq-item{grid-template-columns:1fr;gap:6px;padding:18px 0}

  .closing .wrap{flex-direction:column;align-items:flex-start;gap:16px;padding:32px var(--pad-x)}
  .closing p{font-size:34px;max-width:100%}
  .closing .btn{width:100%}

  .site-footer .wrap{padding:24px var(--pad-x) 30px;flex-direction:column;gap:8px}
}