/* ============================================================================
   Cornerstone — "Claim your area" funnel · shared styles
   Steps: step-1 (territory) → step-2 (details) → step-3 (design) → step-4 (thanks)
   ============================================================================ */
:root{
  /* Matches index.html exactly — cool, professional, not nature-coded. */
  --paper:#F8F4EC; --paper-2:#EFE6D6; --panel:#FFFFFF; --panel-2:#FFFFFF;
  --ink:#1C1A15; --ink-2:#4C473C; --muted:#8C8474; --muted-2:#B4AC98;
  --line:rgba(28,26,21,.11); --line-2:rgba(28,26,21,.19);
  --sun:#F5A524; --sun-deep:#D2850A; --sun-lt:#FBD68C;
  --slate:#8A7A5C; --slate-deep:#6A5A3E;
  --brand:#C05621; --brand-deep:#97400F; --brand-lt:#E8925A;
  --red:#D6453F; --grad:linear-gradient(100deg,#97400F,#D2691E 48%,#F2A65A);
  --ease:cubic-bezier(.2,.7,.15,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-synthesis:none;font-family:'Archivo',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(120% 80% at 50% -10%,rgba(242,176,58,.16),transparent 55%)}
h1,h2,h3{font-family:'Plus Jakarta Sans',Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-.015em}
a{color:inherit}
img{display:block;max-width:100%}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap{max-width:720px;margin:0 auto;padding:0 22px}

/* header */
.fhead{padding:26px 0 8px}
.fhead .in{max-width:720px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mk{height:22px;width:auto;display:block}
.brand .wm{height:15px;width:auto;display:block}
.fhead .back{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.04em;color:var(--muted);text-decoration:none;border:1px solid var(--line-2);border-radius:40px;padding:8px 14px;transition:border-color .25s,color .25s}
.fhead .back:hover{border-color:var(--brand);color:var(--brand)}

/* progress stepper */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px auto 4px;max-width:520px;padding:0 22px}
.steps .st{display:flex;align-items:center;gap:8px;flex:1}
.steps .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;
  font-family:'IBM Plex Mono';font-size:12px;font-weight:600;color:var(--muted);background:var(--panel);flex-shrink:0;transition:.3s}
.steps .bar{height:2px;flex:1;background:var(--line-2);border-radius:2px}
.steps .st.done .dot{background:var(--brand);border-color:var(--brand);color:#fff}
.steps .st.active .dot{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px rgba(192,86,33,.12)}
.steps .st.done .bar{background:var(--brand)}
.steps .lbl{font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:620px){.steps .lbl{display:none}}

/* card */
.card{background:linear-gradient(180deg,#FFFFFF,var(--panel));border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 40px 90px -50px rgba(28,26,21,.40);padding:44px;margin:22px auto 40px;max-width:720px;position:relative}
.eyebrow{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-deep);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--slate)}
.card h1{font-size:clamp(28px,4.4vw,40px);margin:16px 0 0}
.card .lead{font-size:17px;color:var(--ink-2);margin-top:14px;max-width:52ch}
.tnote{margin-top:18px;padding:14px 16px;background:rgba(192,86,33,.06);border-left:3px solid var(--brand);
  border-radius:0 8px 8px 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
@media(max-width:600px){.card{padding:28px 22px;border-radius:14px}}

/* form */
.field{margin-top:22px}
.field > label{display:block;font-family:'Archivo';font-weight:600;font-size:14px;color:var(--ink);margin-bottom:7px}
.field .req{color:var(--slate-deep)}
.field .hint{font-weight:400;color:var(--muted);font-size:12.5px}
.inp,textarea,select{width:100%;font-family:'Archivo';font-size:15.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:10px;padding:13px 15px;transition:border-color .2s,box-shadow .2s;outline:none}
textarea{min-height:110px;resize:vertical;line-height:1.5}
.inp:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,86,33,.14)}
.inp::placeholder,textarea::placeholder{color:var(--muted-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.inpwrap{position:relative}
.inpwrap .pre{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.inpwrap .inp.pad{padding-left:34px}

/* checkbox chips (services) */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);
  border-radius:40px;padding:9px 16px;transition:.2s;user-select:none}
.chip input:checked + span{background:rgba(192,86,33,.10);border-color:var(--brand);color:var(--brand-deep);font-weight:600}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(192,86,33,.18)}

/* file upload */
.file{margin-top:6px}
.file input{display:none}
.file .drop{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--line-2);border-radius:12px;padding:16px 18px;cursor:pointer;background:#fff;transition:.2s}
.file .drop:hover{border-color:var(--brand);background:rgba(192,86,33,.03)}
.file .drop svg{width:22px;height:22px;color:var(--brand);flex-shrink:0}
.file .drop .t{font-size:14px;color:var(--ink)}
.file .drop .s{font-size:12px;color:var(--muted)}
.file .drop.has{border-style:solid;border-color:var(--brand)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font-family:'Archivo';font-weight:600;font-size:16.5px;padding:18px 28px;border:none;border-radius:8px;cursor:pointer;
  color:#F7F1E1;background:linear-gradient(103deg,var(--brand),var(--brand-deep));
  box-shadow:0 16px 40px -16px rgba(30,78,51,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s var(--ease),box-shadow .2s;overflow:hidden;margin-top:30px}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,225,150,.5),transparent);transition:left .6s}
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 50px -16px rgba(30,78,51,.6)}
.btn:hover::after{left:150%}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(4px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:none;color:var(--ink-2);border:1px solid var(--line-2);box-shadow:none;font-size:14px;font-weight:500;padding:13px 20px;width:auto;margin-top:0}
.btn.ghost::after{display:none}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);transform:none;box-shadow:none}
.finehint{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.02em;color:var(--muted);text-align:center;margin-top:16px}

/* availability result */
.avail{margin-top:24px;border-radius:12px;padding:18px 20px;display:none;align-items:flex-start;gap:13px}
.avail.show{display:flex}
.avail .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.avail.ok{background:rgba(192,86,33,.10);border:1px solid rgba(192,86,33,.30)}
.avail.ok .ic{background:var(--brand);color:#fff}
.avail.no{background:rgba(196,85,43,.08);border:1px solid rgba(196,85,43,.3)}
.avail.no .ic{background:var(--red);color:#fff}
.avail b{font-family:'Plus Jakarta Sans';font-size:17px;display:block;margin-bottom:2px}
.avail small{font-size:13px;color:var(--ink-2)}

/* step 3 — design style samples
   These were screenshots of real outdoor-living sites, which showed an accountant
   four deck-builder businesses. They're now abstract layouts rendered in CSS:
   industry-neutral by construction, zero assets, sharp at any size, and they show
   the design DIRECTION (palette, weight, density) rather than someone's business.
   Each card still has two jobs kept separate so a tap is never ambiguous: the
   media area PREVIEWS (scrolls the layout), the footer radio SELECTS. */
.designs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media(max-width:600px){.designs{grid-template-columns:1fr;gap:16px}}

.tpl{border:2px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff;position:relative;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.tpl:hover{border-color:var(--brand-lt)}
.tpl.sel{border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,86,33,.18)}

.tpl-media{position:relative;width:100%;aspect-ratio:16/10;background:var(--paper-2);cursor:pointer;
  display:block;border:0;padding:0;overflow:hidden}

/* Abstract STYLE-DIRECTION tiles — a mood swatch, not a fake website. The vibe
   comes from type + palette + layout feel, tied to no industry. Still at rest;
   animates/expands on hover (desktop) or tap (mobile) via .playing. */
.mood{position:absolute;inset:0;overflow:hidden;background:var(--m-bg);color:var(--m-ink);
  display:flex;flex-direction:column;justify-content:space-between;padding:16px 16px 15px;
  transition:background .3s}
.mood-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mood-aa{font-family:var(--m-font);font-size:42px;line-height:.82;color:var(--m-ink);
  font-weight:var(--m-weight,600);font-style:var(--m-style,normal);letter-spacing:var(--m-track,0);
  transform-origin:left top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tpl.playing .mood-aa{transform:scale(1.13)}
.mood-pal{display:flex;gap:5px;flex:none;padding-top:4px}
.mood-pal i{display:block;width:13px;height:13px;border-radius:50%;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tpl.playing .mood-pal i{transform:translateY(-3px)}
.tpl.playing .mood-pal i:nth-child(2){transition-delay:.04s}
.tpl.playing .mood-pal i:nth-child(3){transition-delay:.08s}
.tpl.playing .mood-pal i:nth-child(4){transition-delay:.12s}
.mood-mid{display:flex;flex-direction:column;gap:8px}
.mood-line{height:2px;width:34%;background:var(--m-ac);border-radius:2px;
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.tpl.playing .mood-line{width:66%}
.mood-word{font-family:var(--m-font);font-size:var(--m-word-size,13px);color:var(--m-sub);
  font-weight:var(--m-word-weight,500);letter-spacing:var(--m-word-track,0);
  text-transform:var(--m-word-tt,none);font-style:var(--m-style,normal)}
.mood-bars{display:flex;gap:5px;flex:none}
.mood-bars i{flex:1;height:6px;border-radius:3px;background:var(--m-ink);opacity:.15}

/* 1 · Warm & Premium — earthy, editorial serif */
.tpl-warm .mood{--m-bg:#F3E9DA;--m-ink:#3A2A1E;--m-sub:#8A6A4F;--m-ac:#BB6B3D;
  --m-font:Georgia,'Times New Roman',serif;--m-style:italic;--m-weight:600;--m-word-size:13px}
.tpl-warm .mood-pal i:nth-child(1){background:#EFD9BE}
.tpl-warm .mood-pal i:nth-child(2){background:#BB6B3D}
.tpl-warm .mood-pal i:nth-child(3){background:#7A4A2B}
.tpl-warm .mood-pal i:nth-child(4){background:#8D9A6B}

/* 2 · Bold & Modern — high-contrast, heavy sans */
.tpl-bold .mood{--m-bg:#0E0E12;--m-ink:#F6F6F4;--m-sub:#9A9AA2;--m-ac:#FF5B34;
  --m-font:'Archivo',sans-serif;--m-weight:800;--m-track:-.03em;
  --m-word-tt:uppercase;--m-word-track:.18em;--m-word-size:10px;--m-word-weight:700}
.tpl-bold .mood-pal i:nth-child(1){background:#F6F6F4}
.tpl-bold .mood-pal i:nth-child(2){background:#FF5B34}
.tpl-bold .mood-pal i:nth-child(3){background:#2C2C34}
.tpl-bold .mood-pal i:nth-child(4){background:#7A7A85}
.tpl-bold .mood-bars i:nth-child(1){flex:1.6;background:var(--m-ac);opacity:.9}

/* 3 · Clean & Classic — timeless, spacious, refined serif */
.tpl-clean .mood{--m-bg:#FBFAF7;--m-ink:#1F2024;--m-sub:#8A8B90;--m-ac:#B79A5B;
  --m-font:Georgia,'Times New Roman',serif;--m-weight:500;--m-track:.01em;padding:19px 19px 17px;
  --m-word-tt:uppercase;--m-word-track:.30em;--m-word-size:9.5px;--m-word-weight:500}
.tpl-clean .mood-pal i:nth-child(1){background:#1F2024}
.tpl-clean .mood-pal i:nth-child(2){background:#C9CBCE}
.tpl-clean .mood-pal i:nth-child(3){background:#B79A5B}
.tpl-clean .mood-pal i:nth-child(4){background:#FBFAF7;box-shadow:inset 0 0 0 1px #E2E1DC}
.tpl-clean .mood-bars i{height:4px;opacity:.11}

/* 4 · Corporate & Professional — structured, businesslike sans */
.tpl-corporate .mood{--m-bg:#EDF1F7;--m-ink:#14213D;--m-sub:#5B6B85;--m-ac:#2B57D8;
  --m-font:'Plus Jakarta Sans',sans-serif;--m-weight:700;--m-track:-.01em;
  --m-word-tt:uppercase;--m-word-track:.13em;--m-word-size:10px;--m-word-weight:600}
.tpl-corporate .mood-pal i:nth-child(1){background:#14213D}
.tpl-corporate .mood-pal i:nth-child(2){background:#2B57D8}
.tpl-corporate .mood-pal i:nth-child(3){background:#8FA6C8}
.tpl-corporate .mood-pal i:nth-child(4){background:#FFFFFF;box-shadow:inset 0 0 0 1px #CDD7E6}
.tpl-corporate .mood-bars i:nth-child(1){flex:2.2}
.tpl-corporate .mood-bars i:nth-child(3){flex:1.5}

@media(prefers-reduced-motion:reduce){
  .mood-aa,.mood-pal i,.mood-line{transition:none}
  .tpl.playing .mood-aa{transform:none}
  .tpl.playing .mood-line{width:34%}
}

/* affordance: says what the interaction does, and gets out of the way once playing */
.tpl-hint{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 8px;border-radius:40px;background:rgba(20,22,12,.62);color:#fff;
  font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.04em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .2s;pointer-events:none}
.tpl-hint svg{width:13px;height:13px;flex:none}
.tpl.playing .tpl-hint{opacity:0}

/* footer doubles as the select control (a real radio, for keyboard + screen readers) */
.tpl-foot{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  border-top:1px solid var(--line);transition:background .2s}
.tpl-foot:hover{background:rgba(192,86,33,.04)}
.tpl-foot input{position:absolute;opacity:0;width:0;height:0}
.tpl-radio{flex:none;width:21px;height:21px;border-radius:50%;border:2px solid var(--line-2);
  display:grid;place-items:center;transition:.2s;background:#fff}
.tpl-radio svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:.2s}
.tpl.sel .tpl-radio{background:var(--brand);border-color:var(--brand)}
.tpl.sel .tpl-radio svg{opacity:1;transform:none}
.tpl-foot input:focus-visible + .tpl-radio{box-shadow:0 0 0 3px rgba(192,86,33,.30)}
.tpl-name{display:block;font-family:'Plus Jakarta Sans';font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.2}
.tpl-desc{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* thank-you / how it works / recap / faq */
.tyhero{text-align:center;padding:6px 0 4px}
.tyseal{width:88px;height:88px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(192,86,33,.18),transparent 70%);border:1px solid var(--brand)}
.tyseal svg{width:40px;height:40px;color:var(--brand)}
.steps-how{margin-top:8px;display:flex;flex-direction:column;gap:16px}
.how{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.how .n{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-lt),var(--brand-deep));color:#fff;
  font-family:'Plus Jakarta Sans';font-weight:600;font-size:18px;display:grid;place-items:center;flex-shrink:0}
.how h3{font-family:'Archivo';font-weight:700;font-size:16px}
.how p{font-size:14.5px;color:var(--ink-2);margin-top:5px}
.recap{margin-top:12px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff}
.recap .rh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.recap .rh b{font-family:'Plus Jakarta Sans';font-size:18px}
.recap .rh .price{font-family:'Plus Jakarta Sans';font-size:22px;color:var(--brand-deep)}
.recap ul{list-style:none;padding:14px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.recap ul{grid-template-columns:1fr}}
.recap li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2)}
.recap li svg{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:2px}
.faq{margin-top:10px}
.faq details{border-bottom:1px solid var(--line);padding:16px 2px;cursor:pointer}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:'Plus Jakarta Sans';font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{color:var(--slate-deep);font-size:22px;transition:.2s}
.faq details[open] .pm{transform:rotate(45deg)}
.faq p{font-size:14px;color:var(--ink-2);margin-top:9px;max-width:66ch}

.section-title{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-deep);margin:28px 0 12px}
.ffoot{text-align:center;font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.04em;color:var(--muted);padding:10px 22px 40px}
.err{color:var(--red);font-size:12.5px;margin-top:6px;display:none}
.err.show{display:block}


/* footer nav — links on every funnel step and legal/contact page */
.ffoot-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:30px 22px 0}
.ffoot-nav a{font-family:'IBM Plex Mono';font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-decoration:none;transition:color .2s}
.ffoot-nav a:hover{color:var(--ink)}

/* legal / content pages (privacy, terms, contact) */
.legal .lupd{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.02em;color:var(--muted);margin-top:12px}
.legal h2{font-size:clamp(17px,2.2vw,21px);font-weight:600;color:var(--ink);margin:30px 0 0}
.legal p{color:var(--ink-2);line-height:1.72;margin-top:12px;max-width:64ch}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.legal a:hover{text-decoration-color:currentColor}
.contact-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.contact-cta .btn{width:auto;margin-top:0}
.contact-meta{margin-top:30px;display:grid;gap:18px}
.contact-meta p{margin-top:0}
.contact-meta b{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}