/* FullFlow hosted estimator. Theme comes from the tenant: --brand, --brand-ink, --accent, --accent-ink.
   v2 visual system (2026-10-09): one type scale, an 8 px spacing rhythm, layered shadows, three radii, and every
   tint derived from --brand with color-mix(), so any tenant colour works. --accent is decoration only (stripes,
   icons): its tenant ink is not always AA on it, so no text ever sits on --accent. */
:root{--brand:#173f32;--brand-ink:#fff;--accent:#b08f0e;--accent-ink:#111;
  --ink:#16202a;--ink-2:#2b3640;--muted:#56616d;--line:#e3e7ec;--line-strong:#cbd3dc;--bg:#f4f5f2;--card:#fff;
  --brand-soft:color-mix(in srgb,var(--brand) 7%,#fff);--brand-tint:color-mix(in srgb,var(--brand) 14%,#fff);--brand-deep:color-mix(in srgb,var(--brand) 86%,#000);
  --radius-sm:10px;--radius:14px;--radius-lg:20px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 2px rgba(16,24,40,.04),0 4px 14px -2px rgba(16,24,40,.07);
  --sh-3:0 2px 6px rgba(16,24,40,.05),0 18px 40px -12px rgba(16,24,40,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* the product's sans: no serif anywhere (look-1) */
  --ok:#1f7a4d;--bad:#b42318}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--font);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.015em}
.ff-wrap{max-width:880px;margin:0 auto;padding:0 16px}

/* ---- header: logo left, phone as a quiet pill right, licence under it */
.ff-head{background:#fff;border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--brand)}
.ff-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.ff-brand{display:flex;align-items:center;gap:10px;color:var(--brand);font-weight:700;text-decoration:none;min-width:0}
.ff-brand img{height:46px;width:auto;max-width:180px;object-fit:contain}
.ff-brand span{font-size:18px;line-height:1.2;letter-spacing:-.01em}
.ff-brand.has-logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ff-contact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:14px;color:var(--muted)}
.ff-phone{gap:8px;color:var(--brand);font-weight:700;font-size:16px;text-decoration:none;padding:0 14px 0 12px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;
  font-variant-numeric:tabular-nums;transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.ff-phone:empty{display:none!important}
.ff-phone::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.ff-phone:hover{background:var(--brand-soft);border-color:var(--brand)}}
.ff-license{padding-right:4px}
/* phones: logo and phone stay on one row; the licence sits under the phone in small type */
@media (max-width:520px){
  .ff-head-row{flex-wrap:nowrap;min-height:64px;gap:10px}
  .ff-brand{flex:0 1 auto}
  .ff-brand img{height:38px;max-width:128px}
  .ff-brand span{font-size:16px}
  .ff-contact{flex:0 0 auto;gap:0}
  .ff-phone{font-size:15px;padding:0 12px 0 10px;gap:6px}
  .ff-phone::before{width:14px;height:14px}
  .ff-license{line-height:1.25;max-width:200px;text-align:right;font-size:13px!important}
  /* the review band: two lines at most on a phone (the full review is in the card at the bottom) */
  .ff-reviews-top{font-size:15px;min-height:0;padding:8px 14px}
  .ff-reviews-top .ff-fade{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}
}
@media (max-width:340px){.ff-brand img{max-width:104px}.ff-phone{font-size:14px;padding:0 10px 0 8px}}

/* ---- reviews. Top: a slim band in the brand colour. Bottom: a testimonial card. Stars sit in a white pill, so
   they read on any brand colour (amber #8a5a00 on white is 5.9:1). */
.ff-reviews{background:var(--brand);color:var(--brand-ink);font-size:16px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:10px 16px;text-align:center;line-height:1.45}
.ff-reviews .ff-stars{display:inline-block;color:#8a5a00;background:#fff;border-radius:999px;padding:0 8px;letter-spacing:1px;margin-right:10px;font-size:14px;line-height:22px;vertical-align:1px}
.ff-reviews .ff-who{opacity:.85;margin-left:8px;white-space:nowrap}
.ff-reviews-bottom{display:block;position:relative;max-width:848px;margin:40px auto 0;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-2);
  padding:28px 28px 26px 72px;text-align:left;justify-content:flex-start;font-family:var(--font);font-size:18px;line-height:1.55}
.ff-reviews-bottom::before{content:"\201C";position:absolute;left:22px;top:6px;font:800 72px/1 var(--font-display);color:var(--brand);opacity:.22}
.ff-reviews-bottom .ff-fade{display:block}
.ff-reviews-bottom .ff-stars{display:block;width:max-content;margin:0 0 8px;padding:0;background:none;color:#8a5a00;font-family:var(--font);font-size:17px;letter-spacing:2px}
.ff-reviews-bottom .ff-who{display:block;margin:10px 0 0;font:600 15px/1.4 var(--font);color:var(--muted);opacity:1;white-space:normal}
.ff-reviews.ff-reviews-bottom{max-width:848px}
@media (max-width:880px){.ff-reviews.ff-reviews-bottom{margin-left:16px;margin-right:16px;max-width:none}}
@media (max-width:520px){.ff-reviews-bottom{padding:22px 20px 20px 20px;font-size:17px}.ff-reviews-bottom::before{position:static;display:block;height:30px;margin-bottom:-2px;font-size:56px}}

/* ---- hero */
.ff-hero{padding:36px 0 10px}
.ff-eyebrow{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.ff-hero h1{font-family:var(--font-display);font-weight:750;font-size:clamp(30px,6vw,44px);line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink);text-wrap:balance}
.ff-hero p#ff-tagline{margin:0;color:var(--muted);font-size:17px}
.ff-trust{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:16px 0 0;padding:0;font-size:15px;color:var(--ink-2)}
.ff-trust li{position:relative;padding-left:28px;line-height:1.45}
.ff-trust li::before{content:"\2713";position:absolute;left:0;top:1px;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:12px;font-weight:800}

/* ---- the form card */
.ff-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px 0;margin:22px 0;box-shadow:var(--sh-3)}
@media (max-width:600px){.ff-card{padding:18px 16px 0;border-radius:var(--radius)}}

/* ---- stepper: a progress track, then numbered steps (done = check, current = filled, next = outline) */
.ff-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;list-style:none;margin:0 0 26px;padding:14px 0 0;font-size:15px;color:var(--muted);counter-reset:ffstep;--p:0}
.ff-steps::before,.ff-steps::after{content:"";position:absolute;top:0;left:0;height:4px;border-radius:999px}
.ff-steps::before{right:0;background:var(--line)}
.ff-steps::after{width:calc(var(--p) * 1%);background:var(--brand);transition:width .35s var(--ease)}
.ff-steps:has(li[data-dot="1"] [aria-current=step]){--p:10}.ff-steps:has(li[data-dot="2"] [aria-current=step]){--p:30}.ff-steps:has(li[data-dot="3"] [aria-current=step]){--p:50}
.ff-steps:has(li[data-dot="4"] [aria-current=step]){--p:70}.ff-steps:has(li[data-dot="5"] [aria-current=step]){--p:100}
.ff-steps li{counter-increment:ffstep;min-width:0;border:0;padding:0;text-align:center}
.ff-step-tab{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:0 4px;border-radius:12px;cursor:pointer;
  font-size:inherit;color:inherit;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)}
.ff-step-tab::before{content:counter(ffstep);display:inline-grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;
  font-size:13px;font-weight:700;color:var(--muted);transition:all .2s var(--ease)}
@media (hover:hover){.ff-step-tab:hover{background:var(--brand-soft);color:var(--ink)}}
.ff-steps li.on .ff-step-tab{color:var(--ink)}
.ff-steps li.on .ff-step-tab::before{content:"\2713";background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.ff-steps li .ff-step-tab[aria-current=step]{font-weight:700;color:var(--ink)}
.ff-steps li .ff-step-tab[aria-current=step]::before{content:counter(ffstep);background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 4px var(--brand-tint)}
@media (max-width:760px){
  /* phones: six numbered dots, each a 44 px+ target; the step's own heading right below names it */
  .ff-steps{gap:0;margin-bottom:18px}
  .ff-step-tab{font-size:0;gap:0;padding:0}
  .ff-step-tab::before{font-size:13px;width:30px;height:30px}
}
/* phones: Good / Better / Best as three full-width rows: the badge and the title on one line, the words under both at the
   card's full width (look-1: three squeezed columns put "Pressure-/treated/wood" one word per line). Three columns or
   one, never two (a 2 + 1 grid leaves a hole): stacked up to 640px, three equal columns from 641px (04-UI-SPEC.md 12) */
@media (max-width:640px){
  .ff-step .ff-tiers{grid-template-columns:1fr;gap:8px}
  .ff-step .ff-tier{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;column-gap:10px;row-gap:4px;text-align:left;padding:12px 40px 12px 14px;min-height:0}
  .ff-step .ff-tier i,#ff-presets .ff-tier i{padding:3px 10px;font-size:12px}
  .ff-step .ff-tier b{margin:0;font-size:16px;line-height:1.3}
  .ff-step .ff-tier span{grid-column:1 / -1}
}
/* a folded phone's 280 px cover screen: the badge on its own line, the words under it (swarm fold-phone) */
@media (max-width:340px){
  .ff-step .ff-tier{grid-template-columns:minmax(0,1fr)}
  .ff-tier b,.ff-tier span{min-width:0;max-width:100%;overflow-wrap:break-word}
}

/* ---- steps, labels, help */
.ff-step{border:0;margin:0;padding:0 0 8px;min-width:0}
.ff-step legend{font-size:24px;line-height:1.2;font-weight:750;letter-spacing:-.02em;margin-bottom:16px;padding:0;color:var(--ink)}
@media (max-width:600px){.ff-step legend{font-size:21px}}
.ff-label{font-weight:650;font-size:16px;margin:22px 0 10px;color:var(--ink)}
.ff-help{margin:-4px 0 10px;color:var(--muted);font-size:15px;line-height:1.5}
.ff-muted{color:var(--muted);font-size:16px}

/* ---- fields: clear labels above, 52 px inputs, a brand halo + ink ring on focus, red with an icon on error,
   a quiet green tick once a required field is filled in correctly */
.ff-field{display:block;margin:0 0 18px;font-weight:650;font-size:16px;color:var(--ink)}
.ff-field input,.ff-field textarea,.ff-field select{display:block;width:100%;margin-top:8px;padding:13px 14px;min-height:52px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;font-weight:400;font-size:16px;
  box-shadow:var(--sh-1);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background-color .15s var(--ease)}
.ff-field textarea{min-height:88px;line-height:1.5;resize:vertical}
.ff-field input::placeholder,.ff-field textarea::placeholder{color:#737d88}
@media (hover:hover){.ff-field input:hover,.ff-field textarea:hover,.ff-field select:hover{border-color:#9aa5b1}}
.ff-field small{display:block;font-weight:400;color:var(--muted);margin-top:6px;font-size:14px}
.ff-field input[required]:user-valid:not(:placeholder-shown):not(.ff-invalid){border-color:color-mix(in srgb,var(--ok) 55%,var(--line-strong));padding-right:42px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231f7a4d'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.ff-field-error{display:flex;gap:8px;align-items:flex-start;color:var(--bad);font-weight:600;font-size:15px;margin:-10px 0 14px;line-height:1.4}
.ff-field-error::before{content:"!";flex:0 0 auto;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--bad);color:#fff;font-size:12px;font-weight:800}
.ff-choices + .ff-field-error{margin-top:8px}
.ff-draw-preview + .ff-field-error{margin-top:10px} /* not tucked under the drawing card (swarm three-tier) */
.ff-invalid,.ff-field input.ff-invalid,.ff-field textarea.ff-invalid{border-color:var(--bad)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 14%,transparent)!important;background-color:#fffbfa}
.ff-error{color:var(--bad);font-weight:600}
.ff-check{display:flex;gap:8px;align-items:center;min-height:44px;margin:12px 0 4px;font-size:16px;cursor:pointer;line-height:1.4}
.ff-check input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.ff-sub{margin-left:34px}

/* ---- choice buttons + Good / Better / Best quick start: cards that lift on hover, ring + tick when chosen */
.ff-choices{display:grid;gap:10px}
.ff-choices.two{grid-template-columns:1fr 1fr}.ff-choices.four{grid-template-columns:repeat(4,1fr)}.ff-choices.three{grid-template-columns:repeat(3,1fr)}.ff-choices.five{grid-template-columns:repeat(5,1fr)}.ff-choices.seven{grid-template-columns:repeat(7,1fr)}
@media (max-width:520px){.ff-choices.five{grid-template-columns:repeat(3,1fr)}.ff-choices.seven{grid-template-columns:repeat(4,1fr)}}
.ff-choice,.ff-tier{position:relative;border:1.5px solid var(--line);background:#fff;border-radius:var(--radius);padding:12px 30px;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;min-height:56px;min-width:0;
  box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease)}
.ff-choice b,.ff-tier b{font-weight:650;color:var(--ink)}
.ff-choice span,.ff-tier span{font-size:14px;color:var(--muted);line-height:1.35}
@media (hover:hover){.ff-choice:hover:not([disabled]),.ff-tier:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--sh-2);transform:translateY(-1px)}}
.ff-choice:active:not([disabled]),.ff-tier:active{transform:translateY(0);box-shadow:var(--sh-1)}
/* ONE selected look on every choice in all three estimators (look-1): the brand border with a 1.5 px ring, a light brand
   tint, and a 22 px brand check inside the top-right corner (catalog-cards.css .ffc-tick is the same badge) */
.ff-choice[aria-pressed=true],.ff-tier[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1.5px var(--brand),var(--sh-2)}
.ff-choice[aria-pressed=true]::after,.ff-tier[aria-pressed=true]::after{content:"\2713";position:absolute;top:7px;right:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:12px;font-weight:800;line-height:1;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(16,24,40,.22)}
/* phones: the words start at the left with room on the right for the check, and a choice with a second line gets a whole
   row (look-1: "Wheelbarrows" ran out of its card, "Inside my yard / A few inches in from the line" took 6 lines) */
@media (max-width:520px){
  .ff-choice{align-items:flex-start;text-align:left;padding:12px 34px 12px 14px}
  .ff-choices.three:has(.ff-choice > span){grid-template-columns:minmax(0,1fr)}
  .ff-choices.three .ff-choice > span{font-size:14px}
}
.ff-choice[disabled]{opacity:.55;cursor:not-allowed}
.ff-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:641px){.ff-tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}}
.ff-tier{justify-content:flex-start;padding:14px 30px}
.ff-tier i,#ff-presets .ff-tier i{font-style:normal;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:var(--brand-tint);color:var(--brand-deep);border-radius:999px;padding:3px 12px}
.ff-tier b{font-size:15px;margin-top:6px}
.ff-tiers.off{opacity:.45;pointer-events:none}

/* ---- buttons: primary (brand), ghost (outline), link. Real hover / active / focus states */
.ff-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--brand-ink);border:1.5px solid var(--brand);border-radius:12px;padding:13px 24px;font-weight:700;font-size:16px;letter-spacing:.005em;cursor:pointer;min-height:50px;flex:1;max-width:280px;
  box-shadow:0 1px 2px rgba(16,24,40,.12),inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease),border-color .15s var(--ease)}
@media (hover:hover){.ff-btn:hover:not([disabled]){background:var(--brand-deep);border-color:var(--brand-deep);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--brand) 60%,transparent)}}
.ff-btn:active:not([disabled]){transform:translateY(1px);box-shadow:0 1px 1px rgba(16,24,40,.12)}
#ff-next::after{content:"\2192";font-weight:700;transition:transform .15s var(--ease)}
@media (hover:hover){#ff-next:hover::after{transform:translateX(3px)}}
.ff-btn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--line-strong);flex:0 0 auto;box-shadow:var(--sh-1)}
@media (hover:hover){.ff-btn.ghost:hover:not([disabled]){background:var(--brand-soft);border-color:var(--brand);box-shadow:var(--sh-1)}}
.ff-btn[disabled]{opacity:.6;cursor:wait}
.ff-btn.small{flex:0 0 auto;min-height:44px;padding:8px 16px;font-size:15px;max-width:none}
.ff-linkbtn{font:inherit;font-size:15px;background:none;border:0;padding:10px 2px;min-height:44px;color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;font-weight:600}
@media (hover:hover){.ff-linkbtn:hover{text-decoration-thickness:2px}}

/* ---- sticky Back / Continue bar: opaque, and the page keeps focused fields above it */
html{scroll-padding-bottom:calc(var(--ff-nav-h,90px) + 16px)}
/* (senior tester Dorothy: the note box was half under the bar) every field keeps the bar's height clear below it when it is
   scrolled to, and each step ends with room so its last box never sits under the bar */
.ff-card :is(.ff-field,.ff-check,.ff-choices,.ffc-section,textarea,input,select){scroll-margin-bottom:calc(var(--ff-nav-h,90px) + 16px)}
.ff-step{padding-bottom:4px}
/* the step ends at its last box: no empty band above the Back / Continue bar (look-1) */
.ff-step > :last-child,.ff-send > :last-child:not(.ff-error){margin-bottom:6px}
.ff-nav{display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 20px -14px rgba(16,24,40,.25);
  margin:14px -28px 0;padding:12px 28px calc(12px + env(safe-area-inset-bottom));border-radius:0 0 var(--radius-lg) var(--radius-lg)}
@media (max-width:600px){.ff-nav{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;border-radius:0 0 var(--radius) var(--radius)}
  /* no Back (step 1, the embed): Continue takes the whole row, lined up with the fields above (look-1) */
  .ff-nav:not(:has(#ff-back:not([hidden]))) .ff-btn{max-width:none}}

/* ---- price: a quote document. Big range, financing callout, a clean breakdown, the options as cards */
/* the price is part of the step, not a card inside the card (look-1: two left edges, a third nesting level on a phone):
   its words line up with the fields of the Send form under it */
.ff-price{position:relative;padding:0 0 12px;margin-bottom:8px;background:none}
.ff-price > .ff-muted:only-child{margin:8px 0 4px}
.ff-range-label{margin:0;padding:6px 0 0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ff-range{font-size:clamp(34px,8vw,52px);font-weight:800;color:var(--brand);line-height:1.05;letter-spacing:-.03em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.ff-range-sm{font-size:24px;letter-spacing:-.01em;margin-top:22px}
.ff-review-range{font-size:17px}
.ff-finance{position:relative;display:block;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--radius);padding:14px 16px 14px 58px;margin:16px 0 8px;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,#fff),#fff 70%)}
.ff-finance::before{content:"$";position:absolute;left:14px;top:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--brand-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,#fff);font-weight:800;font-size:17px}
.ff-finance b{font-size:19px;color:var(--ink);letter-spacing:-.01em}
.ff-finance-tag{color:var(--muted)}
.ff-finance-fine{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.ff-break{width:100%;border-collapse:collapse;margin:18px 0 6px;font-size:16px;font-variant-numeric:tabular-nums}
.ff-break td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ff-break tr:first-child td{border-top:1px solid var(--line-strong)}
.ff-break tr:last-child td{border-bottom:1px solid var(--line-strong)}
.ff-break td:last-child{text-align:right;white-space:nowrap;padding-left:12px;font-weight:650;color:var(--ink)}
/* a part's plain-words line runs the full width under its row (look-1: "Permits & engineering plans" wrapped to 8 lines in
   half the width on a phone) */
.ff-break tr.ff-has-why td{border-bottom:0;padding-bottom:2px}
.ff-break tr.ff-why-row td,.ff-break tr.ff-why-row td:last-child{padding:0 0 12px;text-align:left;white-space:normal;font-weight:400}
.ff-break tr.ff-why-row .ff-break-why{margin:0}
.ff-sum-h{font-size:17px;font-weight:700;margin:24px 0 8px;color:var(--ink)}
.ff-summary{font-size:16px;color:var(--ink-2);margin:4px 0 0;padding-left:0;list-style:none;columns:2 260px;column-gap:28px}
.ff-summary li{position:relative;padding:3px 0 3px 26px;break-inside:avoid}
/* "What we priced" on the price step: each line at most two lines until "Show every detail" (look-1: a wall of text that
   pushed the price story away from the Send form) */
#ff-price .ff-summary{font-size:15px;line-height:1.45}
#ff-price .ff-summary:not(.ff-sum-open) li:not(.ff-note-li){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ff-sum-toggle{margin:2px 0 0}
.ff-summary li::before{content:"\2713";position:absolute;left:0;top:5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:11px;font-weight:800}
.ff-done .ff-summary{text-align:left}
.ff-notes{margin:18px 0 0;padding:12px 16px 12px 34px;color:var(--ink-2);font-size:15px;background:#f7f8f6;border:1px solid var(--line);border-radius:var(--radius)}
.ff-notes li{margin:3px 0}
.ff-note-li{list-style:none;margin-left:-18px;background:var(--brand-soft);border-left:4px solid var(--brand);padding:6px 10px;border-radius:0 8px 8px 0}
/* Good / Better / Best: the options table drawn as comparison cards; "Your pick" first, across the top */
.ff-options{border-collapse:separate}
.ff-options tbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ff-options tr{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;box-shadow:var(--sh-1)}
.ff-options td,.ff-options tr:first-child td,.ff-options tr:last-child td{display:contents;border:0;padding:0}
.ff-options td:first-child > b{order:1;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--brand)}
.ff-options tr > td:last-child{display:block;order:2;text-align:left;white-space:normal;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink);padding:0}
.ff-options .ff-opt-note{order:3;display:block;font-size:14px;color:var(--muted);font-weight:400;line-height:1.45}
/* the homeowner's own pick is the strongest of the four (look-1: it was set lighter than the tiers it was compared with) */
.ff-options tr.ff-opt-pick{order:-1;grid-column:1 / -1;border:1.5px solid var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1.5px var(--brand),var(--sh-2)}
.ff-options tr.ff-opt-pick td{background:none}
.ff-options tr.ff-opt-pick > td:last-child{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
@media (max-width:640px){.ff-options tbody{grid-template-columns:1fr}}
.ff-send{margin-top:8px;padding:22px 0 4px;border-top:1px solid var(--line)}
.ff-send h2{font-size:22px;margin:0 0 4px;letter-spacing:-.015em}
.ff-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ff-done{text-align:center;padding:20px 4px 28px}
.ff-done h2{color:var(--ink);font-size:28px;margin:0 0 8px}
.ff-done-range{font-size:22px;font-weight:800;color:var(--brand)}
/* "Here's the deck you designed" (deck-design.css .ffd): left-aligned inside the centered thank-you */
.ff-done-design{text-align:left;margin:18px 0 8px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-2);--ffd-brand:var(--brand)}
.ff-done-copy{text-align:left;margin:8px 0}
@media (max-width:599px){.ff-done-design{padding:12px 10px}}
/* the confirmation's plan drawn again at the phone's width (estimator.js fitDonePlan): all of it shows, no sideways swipe */
.ff-done-design .ffd-plan-sm.ff-fit{overflow:visible}
.ff-done-design .ffd-plan-sm.ff-fit svg{width:100%!important;max-width:100%!important;height:auto;max-height:none}
.ff-done-copy .ffd-btn{--ffd-brand:var(--brand)}
.ff-done .ff-next-steps{text-align:left}
.ff-next-steps{text-align:left;padding-left:22px;margin:4px 0 12px}
.ff-next-steps li{margin:4px 0}

/* ---- crew, area, footer */
.ff-crew{margin:36px 0 8px}
.ff-crew h2{font-size:20px;color:var(--ink);margin:0 0 14px}
.ff-crew-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.ff-person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;text-align:center;box-shadow:var(--sh-1)}
.ff-person img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#eef1f4;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.ff-person b{display:block;margin-top:10px}
.ff-person span{font-size:14px;color:var(--muted)}
.ff-area{color:var(--muted);font-size:14px;text-align:center;margin:20px 0 0}
.ff-foot{padding:24px 16px 26px;text-align:center;color:var(--muted);font-size:14px}
.ff-foot .ff-wrap{margin-bottom:8px}
/* "Powered by FullFlow": small and quiet, but still 4.5:1 */
.ff-powered{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#5b6570;text-decoration:none;font-size:13px}
.ff-powered img{opacity:.7;filter:grayscale(1)}
@media (hover:hover){.ff-powered:hover{color:var(--ink)}.ff-powered:hover img{opacity:1;filter:none}}
body.embed .ff-head,body.embed .ff-hero{display:none}
/* the embed (an iframe on the contractor's own site) opens on the question, not a testimonial: the review band moves to
   the card under the estimator (look-1) */
body.embed .ff-reviews-top{display:none}
body.embed .ff-card{margin-top:16px}

/* ---- motion: restrained, and none at all with prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .ff-reviews span.ff-fade{animation:ffFade .5s ease}
  .ff-step:not([hidden]){animation:ffRise .28s var(--ease)}
  .ff-price > *{animation:ffFade .35s ease}
}
@keyframes ffFade{from{opacity:0}to{opacity:1}}
@keyframes ffRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* ---- levels, stairs, inline errors */
.ff-level{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:14px 0;background:#fff;box-shadow:var(--sh-1)}
.ff-level h3{margin:0 0 6px;font-size:18px;color:var(--ink)}
.ff-height{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.ff-height .ff-check{margin:0 0 18px;min-height:44px;align-items:center}
.ff-size{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
@media (max-width:520px){.ff-size{grid-template-columns:1fr}}
.ff-dims{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ff-size .ff-dims{grid-template-columns:1fr}
@media (max-width:520px){.ff-size .ff-dims{grid-template-columns:1fr 1fr}}
.ff-dims.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.ff-dims.three{grid-template-columns:1fr}}
.ff-shape{width:100%;max-height:170px;background:#fafbfc;border:1px dashed var(--line);border-radius:12px}
.ff-builder{margin:6px 0 4px;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.ff-builder summary{cursor:pointer;font-weight:600;color:var(--brand)}
.ff-builder[open] summary{margin-bottom:10px}
.ff-options .ff-opt-note{display:block}

/* ---- the Deck step leads with the drawing: starting shapes, the plan itself (tap it to edit), "Open the drawing
   tool", quick ways into adding a level / stairs / add-ons, the levels on the drawing, and the typed size behind a link */
.ff-draw{margin:0 0 14px;min-width:0}
.ff-deck-intro{margin:-8px 0 14px}
.ff-draw .ff-label{margin:16px 0 8px}
.ff-shapes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.ff-shape-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 14px 2px 6px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  box-shadow:var(--sh-1);transition:border-color .15s var(--ease),background-color .15s var(--ease),box-shadow .15s var(--ease)}
@media (hover:hover){.ff-shape-btn:hover{border-color:var(--brand);box-shadow:var(--sh-2)}}
.ff-shape-short{display:none}
@media (max-width:420px){.ff-shape-long{display:none}.ff-shape-short{display:inline}}
.ff-shape-btn[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.ff-shape-ico{display:inline-flex;width:32px;height:30px;align-items:center;justify-content:center;overflow:hidden}
.ff-shape-ico svg{display:block;max-width:32px;max-height:30px;width:auto;height:auto}
.ff-draw-preview{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:#fafbfc;cursor:pointer;min-height:120px;box-shadow:var(--sh-1);transition:border-color .15s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover){.ff-draw-preview:hover{border-color:var(--brand);box-shadow:var(--sh-2)}}
.ff-draw-preview svg{display:block;max-width:100%;height:auto;margin:0 auto}
.ff-btn.ff-draw-main{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:none;margin:12px 0 0;font-size:18px;min-height:56px}
.ff-btn.ff-draw-main::before{content:"\270E";font-size:20px}
.ff-quick{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.ff-quick .ff-btn{flex:1 1 auto;white-space:nowrap}
.ff-quick .ff-btn[disabled]{opacity:1;cursor:not-allowed;color:#4b5563;background:#f1f3f5;border-style:dashed}
.ff-lvl-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:14px 0 0;font-size:16px}
.ff-lvl-summary b{color:var(--brand)}
.ff-lvl-of{color:var(--muted)}
}
.ff-lvl-names,.ff-lvl-extra{color:var(--muted);font-size:15px;flex-basis:100%}
.ff-lvl-dots{display:inline-flex;gap:4px}
.ff-lvl-dots i{width:12px;height:12px;border-radius:3px;border:2px solid var(--brand);display:inline-block}
.ff-lvl-dots i.on{background:var(--brand)}
.ff-type-toggle{display:block;margin:6px 0 0}
.ff-type{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:4px 0 0;background:#fcfcfd}
.ff-type .ff-help{margin:0 0 8px}
@media (max-width:360px){.ff-shape-btn{padding:2px 8px 2px 3px;font-size:14px}.ff-quick .ff-btn{padding:8px 10px;font-size:14px}.ff-btn.ff-draw-main{font-size:17px}}
.ff-drawn{display:flex;flex-direction:column;gap:4px;background:#f7f8f6;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:6px 0 14px}
.ff-drawn b{color:var(--brand);font-size:17px}
.ff-drawn span{font-size:15px;color:var(--muted)}
.ff-drawn span.ff-drawn-stairs{color:var(--ink)}
.ff-drawn-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ff-stair-where{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* the plan in the chosen deck boards (catalog-cards.js sets --board-color / --border-color + data-board-color on <html> and on the
   plan box, and draws #ff-board-pat): board colour, a faint stripe per board along the house, and the border colour as
   a frame line. Labels get a light halo so they read on any board colour. */
html[data-board-color] #ff-draw-preview svg > polygon[stroke="none"]{fill:var(--ff-board-fill,url(#ff-board-pat));fill-opacity:.82} /* (--ff-board-fill: the level's own copy, started at its first corner: estimator.js paintBoards) */
html[data-board-color] #ff-draw-preview svg text:not([data-plate]){paint-order:stroke;stroke:#fafbfc;stroke-width:.2em;stroke-linejoin:round} /* (a level's name and area sit on a light plate instead: plan-geometry.js) */

/* ---- materials: photo-card pickers mount here (ff-pick-*), advanced ones behind "More options" */
.ff-more{margin:18px 0 4px;border:1px solid var(--line);border-radius:var(--radius);padding:4px 16px;background:#fff;box-shadow:var(--sh-1)}
.ff-more summary{cursor:pointer;font-weight:700;color:var(--brand);min-height:48px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ff-more summary span{font-weight:400;color:var(--muted);font-size:15px}
.ff-pick:empty{display:none}
.ff-materials-note{margin:14px 0 6px}
.ff-fire-help{margin-top:8px}

/* "Anything we missed?" box at the end of each main step */
.ff-step-note{margin-top:22px}
.ff-step-note .ff-opt{font-weight:400;color:var(--muted)}
.ff-step-note textarea{min-height:72px}

/* "Continue your design?" (a draft saved in this browser) */
.ff-resume{border:1px solid var(--brand);background:var(--brand-soft);border-radius:var(--radius);padding:16px 18px;margin:0 0 18px;box-shadow:var(--sh-1)}
.ff-resume h2{margin:0 0 4px;font-size:18px;color:var(--brand)}
.ff-resume p{margin:0 0 10px}
.ff-resume-actions{display:flex;flex-wrap:wrap;gap:10px}
.ff-resume-actions .ff-btn{flex:0 1 auto}

/* 320 px phones: a long reviewer name no longer pushes the page sideways */
.ff-reviews{overflow-wrap:anywhere;max-width:100%}
@media (max-width:420px){.ff-reviews .ff-who{white-space:normal}}

/* readable sizes: questions/labels/body 16px+, secondary captions 14px+, tap targets 44px+ */
.ff-field small,.ff-choice span,.ff-tier span,.ff-contact,.ff-license,.ff-person span{font-size:14px}
.ff-phone,.ff-powered{display:inline-flex;align-items:center;min-height:44px}

/* focus ring: 3 px solid dark ink with a 2 px gap on every control (about 16:1 on white, 3:1+ on every card colour) */
:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.ff-field input:focus,.ff-field textarea:focus,.ff-field select:focus{outline:2px solid #1d232b;outline-offset:2px;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.ff-step-tab:focus-visible,.ff-choice:focus-visible,.ff-tier:focus-visible,.ff-btn:focus-visible,.ff-draw-btn:focus-visible,.ff-check input:focus-visible,.ff-more summary:focus-visible,.ff-shape-btn:focus-visible,.ff-linkbtn:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.ff-step-tab:focus-visible{outline-offset:-3px}
legend:focus{outline:none}
legend:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
.ff-done h2:focus{outline:none}
.ff-legend{list-style:none;margin:0;padding:10px 14px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--ink,#1d232b);border-top:1px solid var(--line);background:#fff}
.ff-legend b{color:#92400e;margin-right:2px}
.ff-rail-low{margin:14px 0;padding:12px 14px;border:1px solid #f3d9a4;border-left:4px solid #f0b95b;background:#fff8ea;border-radius:10px}
.ff-rail-low p{margin:0 0 8px;font-size:15px;color:#7a3a00}
.ff-rail-hint{background:#fff8ea;border-left:4px solid #f0b95b;padding:8px 10px;border-radius:8px}
/* short landscape phones: past step 1 the review band and the big heading step aside, so the step gets the screen (landscape-phone r3 #4) */
@media (max-height:520px) and (orientation:landscape){body.ff-past1 .ff-reviews-top,body.ff-past1 .ff-hero{display:none}body.ff-past1 .ff-head-row{min-height:44px;padding-top:4px;padding-bottom:4px}}

/* Send waits on stairs that stop short of their level: fix them, or send anyway (the contractor is told) */
.ff-stair-ask{border:1px solid #e8908a;border-left:4px solid #d9534f;background:#fff4f3;color:#8a1c12;border-radius:10px;padding:12px 14px;margin:12px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ff-stair-ask p{margin:0 0 4px;flex:1 1 100%;font-weight:600}
/* short screens (200% zoom on a laptop, phones on their side): the sticky Back / Continue bar is one slim row, so the
   page keeps most of the screen (senior-a11y r4 #5); buttons stay 44 px tall */
@media (max-height:500px){
  .ff-nav{padding:4px 12px calc(4px + env(safe-area-inset-bottom));margin-top:8px;gap:8px;box-shadow:0 -3px 8px -6px rgba(0,0,0,.2)}
  .ff-nav .ff-btn{min-height:44px;padding-top:4px;padding-bottom:4px}
  html{scroll-padding-bottom:calc(var(--ff-nav-h,60px) + 12px)}
  .ff-hero{padding-top:14px}
  .ff-steps{padding-top:10px}
}
/* "None" handrails on 4+ steps: code needs one, and it is in the price (wrap-stepdown r5 #3) */
.ff-hr-code{margin:8px 0;padding:8px 12px;border-left:4px solid #f0b95b;background:#fff8ea;border-radius:8px;font-size:15px;color:#7a3a00}
.ff-hr-code[hidden]{display:none}
/* a field's red message starts below the focus ring (3 px + 1 px out), never under it (phone-kitchen r5: "Enter the length
   in" was half hidden while the field had focus) */
.ff-field input + .ff-field-error,.ff-field textarea + .ff-field-error,.ff-field select + .ff-field-error{margin-top:10px}
/* short landscape screens: the Deck step's chrome gives the drawing the room (landscape-phone r5, Step 2 chrome): a slim
   stepper, the draw button on one line without its description, and the preview sized to the screen (estimator.js) */
@media (max-height:500px) and (orientation:landscape){
  .ff-steps{margin-bottom:6px}
  .ff-step legend{margin-bottom:4px;font-size:20px}
  .ff-draw-btn span{display:none}
  .ff-draw-btn{padding-top:6px;padding-bottom:6px;min-height:44px}
}

/* "Not sure" height: the plain-words note shows only when it is ticked (edge-cases r6 #2) */
.ff-unsure-note { font-size: 0.85em; color: #5f6b76; }
.ff-check input:not(:checked) ~ .ff-unsure-note { display: none; }

/* step 1 address suggestions (address-field.js): functional only, the list drops below the box */
.ff-addr-box{position:relative;z-index:7} /* its list above the sticky Back / Continue bar (z-index 5) */
.ff-addr-pop{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:4px;background:#fff;border:1px solid #c7ced6;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.12);overflow:hidden}
.ff-addr-list{list-style:none;margin:0;padding:4px 0;max-height:min(320px,50vh);overflow-y:auto}
.ff-addr-opt{padding:10px 12px;min-height:44px;font-weight:400;cursor:pointer;line-height:1.35}
.ff-addr-opt.on,.ff-addr-opt:hover{background:color-mix(in srgb,var(--brand) 10%,#fff)}
.ff-addr-attr{margin:0;padding:4px 12px 6px;font-size:12px;font-weight:400;color:var(--muted);text-align:right;border-top:1px solid var(--line)}
.ff-addr-picked{color:var(--brand)!important;font-weight:600!important}
.ff-addr-picked:empty{display:none}
.ff-addr-note{display:block;font-size:13px;color:var(--muted)}

/* Deck step: "About your yard" (the ground under the deck), under the level cards */
.ff-yard{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.ff-yard-h{margin:0 0 6px;font-size:17px}

/* Extras: the joist tape card (photo, name, why) */
.ff-tape img{flex:0 0 auto;width:72px;height:54px;object-fit:cover;border-radius:8px}
.ff-tape small{display:block;margin:2px 0 0}

/* phones: the price range stays on one line */
@media (max-width:600px){
  .ff-price{padding:0 0 12px}
  .ff-range-label{margin:0;padding:4px 0 0}
  .ff-range{font-size:clamp(24px,7.2vw,34px);white-space:nowrap}
  .ff-range.ff-range-sm{white-space:normal;font-size:21px}
}
.ff-choices + .ff-help{margin-top:10px}
/* phones: a compact hero, so the step heading (and the field it focuses) shows above the Back / Continue bar on
   arrival and after "Continue your design" (the trust points are in the steps themselves) */
@media (max-width:600px){
  /* the heading names the trade already, so the eyebrow steps aside; a two-line heading at 24 px (three at 28 px on a
     320 px phone pushed step 1 under the bar), and the review band is one line (the full review is the card at the end) */
  .ff-hero{padding:12px 0 0}
  .ff-eyebrow{display:none}
  .ff-hero h1{font-size:24px;line-height:1.15;margin-bottom:4px}
  .ff-hero p#ff-tagline{font-size:15px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .ff-trust{display:none}
  .ff-other-trades{margin-top:8px;font-size:14px;line-height:1.5}
  .ff-card{margin-top:12px;padding-top:14px}
  .ff-steps{margin-bottom:12px;padding-top:10px}
  .ff-reviews-top{padding:6px 14px}
  .ff-reviews-top .ff-fade{-webkit-line-clamp:1;line-clamp:1}
}
/* short landscape phones on step 1 too (later steps hide the hero, above): the heading alone, small, so the address
   field is on the first screen */
@media (max-height:520px) and (orientation:landscape){
  .ff-reviews-top{display:none}
  .ff-head-row{min-height:44px;padding-top:4px;padding-bottom:4px}
  .ff-contact{flex-direction:row;align-items:center;gap:12px}
  .ff-hero{padding:8px 0 0}
  .ff-eyebrow,.ff-trust,.ff-hero p#ff-tagline{display:none}
  .ff-hero h1{font-size:21px;line-height:1.2;margin:0}
  .ff-other-trades{margin-top:4px;font-size:14px}
  .ff-card{margin-top:8px}
}

/* address lookup status row (address-field.js) */
.ff-addr-status{padding:12px;color:var(--muted);font-size:15px;line-height:1.35}
.ff-stair-note{margin:4px 0 8px;padding:8px 10px;border-radius:8px;background:#fff4e5;color:#7a3e00;font-size:14px;line-height:1.4}
.ff-rail-levels{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.ff-rail-levels[hidden]{display:none}
.ff-rail-levels .ff-help{margin:2px 0 10px}
.ff-rail-level{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center;gap:10px;margin:8px 0 0}
.ff-rail-level span{font-weight:600}
.ff-rail-level select{min-height:44px;font-size:16px}
@media (max-width:520px){.ff-rail-level{grid-template-columns:1fr}}
.ff-color-ask{margin:12px 0;padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-left:4px solid var(--brand);border-radius:10px;background:color-mix(in srgb,var(--brand) 6%,#fff)}
.ff-color-ask p{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--ink)}
.ff-color-ask-row{display:flex;flex-wrap:wrap;gap:8px}
.ff-break-why{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.35}
/* after Send: only the confirmation (senior tester Dorothy: the hero still sat above "Sent! Thank you.") */
.ff-sent .ff-hero,.ff-sent .ff-reviews,.ff-sent .ff-crew,.ff-sent .ff-photos,.ff-sent .ff-google-wrap,.ff-sent #ff-area{display:none!important}
/* the price page's things to know (senior tester Walt: a wall of caveats; "outside the usual service area" unexplained) */
.ff-area-note{border:1px solid #f0c36d;border-left:4px solid #d4a017;background:#fffaeb;color:#5c4400;border-radius:10px;padding:10px 14px;margin:14px 0}
.ff-area-note b{display:block;margin-bottom:2px}.ff-area-note p{margin:2px 0 0;line-height:1.45}
.ff-notes-more{margin:4px 0 12px}.ff-notes-more>summary{cursor:pointer;color:var(--brand);font-weight:700;min-height:44px;display:flex;align-items:center}
/* Good / Better / Best: what a tap filled in, with Undo (senior tester Walt) */
.ff-preset-said{margin:10px 0 4px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-soft,#f2f7f4);border-radius:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ff-preset-said[hidden]{display:none}.ff-preset-said p{margin:0;flex:1 1 260px;line-height:1.45}
.ff-rail-levels-more>summary{cursor:pointer;color:var(--brand);min-height:44px;display:flex;align-items:center}
/* ---- the Deck step is the drawing (Elijah, 2026-10-11): big, a tap anywhere on it opens the drawing tool */
.ff-draw-preview{min-height:240px;border-width:2px}
.ff-draw-preview:focus-visible{outline:3px solid #1d232b;outline-offset:3px}
.ff-draw-title{margin:0;padding:12px 14px 4px;font-size:20px;font-weight:800;color:var(--ink)}
/* the step-2 picture reads as a preview (EST-09, 04-UI-SPEC §10): a quiet caption inside it and one neutral "Edit drawing"
   button under it (a sibling, never inside the role=button preview); tapping either opens the drawing tool */
.ff-draw-caption{margin:0;padding:8px 16px;font-size:14px;line-height:1.5;color:var(--muted)}
.ff-draw-edit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:8px;padding:0 16px;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:inherit;font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;transition:border-color .15s var(--ease)}
.ff-draw-edit:active{border-color:var(--ink-2)}
.ff-draw-edit:focus-visible{outline:3px solid #1d232b;outline-offset:2px}
@media (hover:hover){.ff-draw-edit:hover{border-color:var(--ink-2)}}
/* the picture-frame border, drawn just inside each level's outline in the border color (paintBoards) */
.ff-frame{stroke:var(--border-color,transparent);stroke-width:var(--ff-border-w,.92);stroke-linejoin:miter}
.ff-frame-seam{stroke:#fff;stroke-opacity:.75;stroke-width:calc(var(--ff-border-w,.92) + .2);stroke-linejoin:miter}
html:not([data-border-color]) :is(.ff-frame,.ff-frame-seam){display:none}
/* ---- Materials (Elijah, 2026-10-11): every section shown, each under a clear heading, a rule between them */
.ff-mat-sec{margin:22px 0 0;padding:18px 0 0;border-top:2px solid var(--line)}
.ff-mat-sec[hidden]{display:none}
.ff-mat-h{margin:0 0 6px;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
/* ---- the live plan on the Materials step: the board color and the border as they are picked, kept in view */
.ff-mat-preview{position:sticky;top:6px;z-index:6;margin:0 0 14px;background:#fafbfc;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--sh-2);overflow:hidden}
.ff-mat-preview:empty{display:none}
.ff-mat-plan svg{display:block;max-width:100%;height:auto;max-height:min(24vh,230px);width:auto;margin:0 auto} /* kept in view, but the cards keep most of the screen (look swarm r2: ~34 %) */
.ff-mat-said{margin:0;padding:6px 12px 8px;font-size:14px;font-weight:700;color:var(--ink);text-align:center;border-top:1px solid var(--line);background:#fff}
/* ---- the picture of their deck (deck-render.js): live on Materials, "Here's your deck" on Extras and Price */
.ff-mat-plan,.ff-render-pic{background:#e9ede4}
.ff-render{margin:0 0 18px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--sh-2);overflow:hidden}
.ff-render:empty{display:none}
.ff-render-h{margin:0;padding:10px 14px 8px;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ff-render-pic svg{display:block;max-width:100%;height:auto;margin:0 auto}
.ff-render-said{margin:0;padding:8px 14px 10px;font-size:15px;font-weight:700;color:var(--ink);border-top:1px solid var(--line)}
@media (max-height:500px){.ff-mat-preview{position:static}}
@media (max-width:599px){.ff-mat-said{padding:4px 10px 5px;font-size:13px}} /* [FF deck-a #9] a slimmer kept-in-view plan on a phone */

/* the contractor's other estimators (decks, fences, patios) under the hero: every trade's page (trades.js) */
.ff-other-trades{margin:14px 0 0;font-size:15px;color:var(--ink-2)}
.ff-other-trades a{color:var(--brand);font-weight:650}
/* a pergola on the deck (Extras step): its picture, what is on the drawing, the button into the drawing tool */
.ff-pergola{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
.ff-pergola > img{flex:0 0 auto;width:96px;height:72px;object-fit:cover;border-radius:10px;border:1px solid #d9dfe5}
.ff-pergola .ff-help{margin-top:0}
.ff-pergola-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.ff-pergola-list li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid #d9dfe5;border-radius:10px;background:#fbfcfb}
.ff-pergola-list li span{color:#56616d;font-size:14px}
@media (max-width:420px){.ff-pergola{flex-direction:column}.ff-pergola > img{width:100%;height:120px}}

/* the contractor's job photos ("Our work") and the Google reviews link (estimator-shell.js chrome) */
.ff-photos{margin:36px 0 8px}
.ff-photos h2{font-size:20px;color:var(--ink);margin:0 0 14px}
.ff-photo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media (max-width:520px){.ff-photo-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.ff-photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--sh-1)}
.ff-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef1f4}
.ff-photo figcaption{padding:8px 10px;font-size:14px;color:var(--muted)}
.ff-google-wrap{text-align:center;margin:8px 0 0}
.ff-google-reviews{font-weight:700;color:var(--brand)}

/* ---- the first screen on a 320 x 568 phone and a phone on its side (04-UI-SPEC.md section 8): the heading, the
   address field and Continue are all on the first screen, with the address above the sticky Back / Continue bar.
   Only spacing shrinks; nothing is taken away, text stays >= 14px and the address input stays 16px. */
@media (max-width:520px){
  .ff-head-row{min-height:0;padding-top:8px;padding-bottom:8px}
  .ff-reviews-top{min-height:40px;padding:4px 16px}
  .ff-hero{padding-top:8px}
  .ff-hero p#ff-tagline{-webkit-line-clamp:1;line-clamp:1}
  .ff-other-trades{margin-top:4px;line-height:1.4}
  .ff-card{margin-top:8px;padding-top:8px}
  .ff-steps{padding-top:4px;margin-bottom:8px}
  .ff-step legend{font-size:20px;margin-bottom:4px}
  #ff-address{margin-top:4px}
  .ff-nav{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .ff-nav .ff-btn{min-height:44px;padding-top:8px;padding-bottom:8px}
}
@media (max-height:500px) and (orientation:landscape){
  .ff-head-row{min-height:44px;padding-top:0;padding-bottom:0}
  .ff-hero{padding-top:4px}
  .ff-other-trades{margin:0}
  .ff-card{margin-top:8px;padding-top:8px}
  .ff-steps{padding-top:8px;margin-bottom:4px}
  #ff-address{margin-top:4px}
  /* step 1: the stepper sits at the right of the step heading instead of on a row of its own */
  body:not(.ff-past1) .ff-card{position:relative}
  body:not(.ff-past1) .ff-steps{position:absolute;top:8px;right:28px;width:240px;margin:0;padding-top:4px}
  body:not(.ff-past1) .ff-step[data-step="1"] legend{padding:12px 256px 12px 0;margin-bottom:4px}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:600px){body:not(.ff-past1) .ff-steps{right:16px}}
/* the demo-only sample-job bar (walkthrough.js) comes after the address on these screens, so the field a prospect
   fills in first is the one on the first screen */
@media (max-width:520px),(max-height:500px) and (orientation:landscape){
  .ff-step[data-step="1"]:not([hidden]){display:flex;flex-direction:column}
  .ff-step[data-step="1"] > *{order:1}
  .ff-step[data-step="1"] > .ff-addr{order:0}
}

/* [FF touch-loupe] the finger's magnifier (studio-ux.js loupe, every studio): a round 2x copy of the plan up and to the
   left of the finger, a ring where the finger is; it never takes a press */
.ff-loupe{position:fixed;z-index:2147482999;left:0;top:0;width:128px;height:128px;border-radius:50%;overflow:hidden;pointer-events:none;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.22),0 10px 26px rgba(0,0,0,.32);opacity:0;transition:opacity .12s ease}
.ff-loupe.on{opacity:1}
.ff-loupe-cap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:112px;padding:2px 8px;border-radius:999px;background:#1d232b;color:#fff;font:700 12px/1.3 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.ff-loupe-cap[hidden]{display:none}
.ff-loupe::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #1d6ff2;box-shadow:0 0 0 1.5px #fff,inset 0 0 0 1.5px #fff;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.ff-loupe{transition:none}}