/* Front Door Sites — getfrontdoorsites.com
   Look: a Main Street storefront. Deep painted-door green, brass hardware, warm plaster paper,
   Besley (a Clarendon-style storefront serif) over Public Sans. Signature device: the front door
   on the homepage that swings open to show the visitor's own website. House-number plaques for
   steps, hang tags for prices, a mail slot on the form, a doormat in the footer. */

@font-face{font-family:"Besley";src:url(/assets/fonts/besley.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Besley";src:url(/assets/fonts/besley-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#F4F1EA; --paper-2:#EAE5DA; --card:#FFFDF8; --ink:#15201B; --ink-2:#4A5650; --rule:#D8D1C3;
  --door:#1F5A47; --door-2:#174536; --on-door:#FFFFFF; --link:#1F5A47;
  --brass:#C9973A; --brass-ink:#7A5A14; --sign:#D9412B; --night:#101915; --night-ink:#EDEBE4; --night-2:#A9B5AE;
  --wall:#E3DCCE; --trim:#1B2621; --focus:#15201B;
  --display:"Besley",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:18px; --radius:10px; --shadow:0 1px 0 rgba(21,32,27,.04),0 10px 30px -12px rgba(21,32,27,.22);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1613; --paper-2:#151F1A; --card:#19241F; --ink:#E9EEEA; --ink-2:#A9B5AE; --rule:#2B3832;
  --door:#5FB896; --door-2:#7CCAAC; --on-door:#0B1410; --link:#7CCAAC;
  --brass:#D9AE57; --brass-ink:#E2BC6A; --sign:#FF6A52; --night:#090E0C; --night-ink:#E9EEEA; --night-2:#A9B5AE;
  --wall:#26322C; --trim:#0A100D; --focus:#F2C14E;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 14px 34px -14px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F1613; --paper-2:#151F1A; --card:#19241F; --ink:#E9EEEA; --ink-2:#A9B5AE; --rule:#2B3832;
  --door:#5FB896; --door-2:#7CCAAC; --on-door:#0B1410; --link:#7CCAAC;
  --brass:#D9AE57; --brass-ink:#E2BC6A; --sign:#FF6A52; --night:#090E0C; --night-ink:#E9EEEA; --night-2:#A9B5AE;
  --wall:#26322C; --trim:#0A100D; --focus:#F2C14E;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 14px 34px -14px rgba(0,0,0,.6);
  color-scheme:dark}
@media (min-width:700px){:root{--gutter:32px}}
@media (min-width:1200px){:root{--gutter:40px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.62 var(--body);overflow-x:hidden;font-kerning:normal}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:750;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
ul,ol{margin:0;padding:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.eyebrow{font:700 13px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--door);margin:0 0 14px}
section{position:relative}
.sec{padding-block:clamp(64px,9vw,112px)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2,.h2{font-size:clamp(34px,5.4vw,54px);line-height:1.04;letter-spacing:-.012em}
.sec-lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-2);margin-top:16px;max-width:42em}
h2 em,h1 em{font-style:italic;font-weight:700;color:var(--door)}

/* ---------- buttons ---------- */
.btn{--bg:var(--door);--fg:var(--on-door);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 22px;border-radius:9px;border:2px solid var(--bg);background:var(--bg);color:var(--fg);font:700 17px/1.15 var(--body);text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;box-shadow:0 1px 0 rgba(0,0,0,.08),0 6px 16px -8px rgba(31,90,71,.55);-webkit-tap-highlight-color:transparent}
.btn:hover{--bg:var(--door-2);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:20px;height:20px}
.btn-ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-ghost:hover{--bg:var(--ink);--fg:var(--paper)}
.btn-sm{min-height:42px;padding:8px 16px;font-size:15.5px;border-radius:8px}
.btn-wide{width:100%}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease}
.top.scrolled{border-bottom-color:var(--rule);box-shadow:0 6px 20px -16px rgba(0,0,0,.4)}
.top-row{display:flex;align-items:center;gap:20px;min-height:68px;padding-top:env(safe-area-inset-top)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 21px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-door{width:24px;height:31px;flex:none}
.brand-door .bd-door{fill:var(--door)}
.brand-door .bd-frame{fill:none;stroke:var(--ink);stroke-width:2.4}
.brand-door .bd-knob{fill:var(--brass)}
.brand-door .bd-glass{fill:var(--paper);opacity:.85}
.brand-door .bd-in{fill:#F4CF7E}
.brand-door .bd-leaf{transform-box:fill-box;transform-origin:0 50%;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.brand:hover .bd-leaf,.brand:focus-visible .bd-leaf{transform:scaleX(.38)}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 11px;border-radius:7px}
.nav a:hover{background:var(--paper-2)}
.top .btn-sm{display:none}
.mmenu{margin-left:auto;position:relative}
.mmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:2px solid var(--ink);border-radius:8px;font-weight:700;font-size:15.5px;user-select:none}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu .bars{width:18px;height:12px;position:relative}
.mmenu .bars::before,.mmenu .bars::after,.mmenu .bars i{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.mmenu .bars::before{top:0}.mmenu .bars i{top:5px}.mmenu .bars::after{top:10px}
.mmenu[open] .bars::before{transform:translateY(5px) rotate(45deg)}
.mmenu[open] .bars::after{transform:translateY(-5px) rotate(-45deg)}
.mmenu[open] .bars i{opacity:0}
.mmenu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(86vw,320px);background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:10px;display:grid;gap:2px}
.mmenu-panel a{color:var(--ink);text-decoration:none;font-weight:600;padding:12px 12px;border-radius:8px}
.mmenu-panel a:hover{background:var(--paper-2)}
.mmenu-panel .btn{margin-top:8px;color:var(--on-door)}
@media (min-width:980px){.nav{display:flex}.top .btn-sm{display:inline-flex}.mmenu{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,5vw,64px) clamp(56px,8vw,96px);overflow-x:clip}
.hero-grid{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero h1{font-size:clamp(46px,8.6vw,88px);line-height:.98;letter-spacing:-.022em;font-weight:820;margin-bottom:22px}
.hero h1 em{display:inline-block;font-weight:720}
.hero h1 .w{display:inline-block;overflow:clip;vertical-align:top;padding:0 .05em .12em;margin:0 -.05em -.12em}
.hero h1 .w>span{display:inline-block}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.55;max-width:33em;color:var(--ink)}
.lede strong{white-space:nowrap}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-weight:600;font-size:15px;color:var(--ink-2)}
.ticks li{display:inline-flex;align-items:center;gap:7px}
.ticks .ico{color:var(--door);width:18px;height:18px;stroke-width:2.6}

.tryit{margin-top:34px;max-width:560px;padding:16px 16px 18px;border:1.5px dashed color-mix(in srgb,var(--door) 55%,var(--rule));border-radius:12px;background:color-mix(in srgb,var(--card) 70%,transparent)}
.tryit-h{display:flex;align-items:center;gap:9px;font:700 15.5px/1.3 var(--body);margin:0 0 12px;color:var(--ink)}
.tryit-h .ico{color:var(--brass-ink)}
.tryit-row{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:520px){.tryit-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.tf label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:5px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid color-mix(in srgb,var(--ink) 28%,var(--rule));border-radius:8px;width:100%;min-height:48px;padding:10px 12px;font-size:16.5px}
textarea{min-height:96px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%234A5650' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--door) 40%,transparent);outline-offset:1px;border-color:var(--door)}
::placeholder{color:color-mix(in srgb,var(--ink-2) 75%,transparent)}

/* ---------- storefront (hero art) ---------- */
.hero-art{display:flex;flex-direction:column;align-items:center;min-width:0}
.store{--tc:#1F5A47;--tc-2:#174536;--stripe:#F6F1E4;--valance-ink:#FFF8E8;
  --ph-bg:#FFFDF8;--ph-ink:#15201B;--ph-soft:#5B6661;--ph-acc:var(--tc);--ph-acc-ink:#FFFFFF;--ph-band:#F1ECE1;
  container-type:inline-size;position:relative;width:min(100%,430px);user-select:none;-webkit-user-select:none}
.store[data-trade="restaurant"]{--tc:#A3271C;--tc-2:#7E1D15;--ph-bg:#FFF8EE;--ph-ink:#2A1510;--ph-soft:#6E5148;--ph-band:#F7E8D8}
.store[data-trade="foodtruck"]{--tc:#C9601A;--tc-2:#9C4812;--ph-bg:#FFF6E5;--ph-ink:#2B1A0C;--ph-soft:#6F5641;--ph-band:#FBE3C3}
.store[data-trade="barber"]{--tc:#1F3A7A;--tc-2:#162A59;--ph-bg:#F3F5FA;--ph-ink:#121A2E;--ph-soft:#4E5974;--ph-band:#E2E7F2}
.store[data-trade="nails"]{--tc:#8E2F63;--tc-2:#6D2049;--ph-bg:#FBF2F6;--ph-ink:#2A1020;--ph-soft:#76506A;--ph-band:#F4DDE8}
.store[data-trade="auto"]{--tc:#2B3036;--tc-2:#1B1F23;--ph-acc:#C53A1E;--ph-bg:#EEF0F2;--ph-ink:#15181B;--ph-soft:#535C66;--ph-band:#DDE1E5}
.store[data-trade="cleaning"]{--tc:#0F6E80;--tc-2:#0B5361;--ph-bg:#EFF8F8;--ph-ink:#0D2328;--ph-soft:#456A70;--ph-band:#D5ECEE}
.store[data-trade="lawn"]{--tc:#3B6E1F;--tc-2:#2C5317;--ph-bg:#F3F7EC;--ph-ink:#172310;--ph-soft:#55654A;--ph-band:#DFEBCF}
.store[data-trade="shop"]{--tc:#6B4A2B;--tc-2:#51371F;--ph-bg:#FAF4EC;--ph-ink:#22170D;--ph-soft:#6E5B48;--ph-band:#EFE2D0}

.awning{position:relative;margin-inline:-2.5cqi;z-index:3;filter:drop-shadow(0 1.4cqi 1.2cqi rgba(0,0,0,.22))}
.awning-top{height:10cqi;background:repeating-linear-gradient(90deg,var(--tc) 0 7.5cqi,var(--stripe) 7.5cqi 15cqi);clip-path:polygon(3.5% 0,96.5% 0,100% 100%,0 100%);position:relative;transition:background .45s ease}
.awning-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.02) 70%)}
.valance{position:relative;height:11cqi;background:var(--tc);display:flex;align-items:center;justify-content:center;padding-inline:5cqi;transition:background-color .45s ease}
.valance::after{content:"";position:absolute;left:0;right:0;top:100%;height:3cqi;background:radial-gradient(circle at 50% 0,var(--tc) 2.9cqi,transparent calc(2.9cqi + .6px)) 0 0/6cqi 3cqi repeat-x;transition:background .45s ease}
.valance-name{font:800 5.4cqi/1 var(--display);color:var(--valance-ink);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;overflow:hidden;max-width:100%;text-shadow:0 .3cqi 0 rgba(0,0,0,.25)}

.facade{position:relative;z-index:1;background:var(--wall);padding:6cqi 14cqi 0;display:flex;justify-content:center;
  background-image:repeating-linear-gradient(180deg,transparent 0 5.2cqi,rgba(0,0,0,.055) 5.2cqi 5.5cqi)}
.facade::before,.facade::after{content:"";position:absolute;bottom:0;width:3.2cqi;top:0;background:linear-gradient(90deg,rgba(0,0,0,.06),rgba(0,0,0,0))}
.facade::before{left:0}.facade::after{right:0;transform:scaleX(-1)}
.lamp{position:absolute;top:14cqi;width:6cqi;height:12cqi}
.lamp-l{left:4cqi}.lamp-r{right:4cqi}
.lamp::before{content:"";position:absolute;left:1cqi;right:1cqi;top:0;height:2cqi;background:var(--trim);border-radius:1cqi 1cqi 0 0}
.lamp::after{content:"";position:absolute;left:.6cqi;right:.6cqi;top:2cqi;bottom:1.5cqi;border:.9cqi solid var(--trim);border-radius:.6cqi;background:radial-gradient(circle at 50% 45%,#FFE9A8,#F2B84B 60%,#C98A2B);box-shadow:0 0 6cqi 2cqi rgba(255,200,90,.35)}
.lamp i{position:absolute;left:2.3cqi;right:2.3cqi;bottom:0;height:1.8cqi;background:var(--trim);border-radius:0 0 1cqi 1cqi}

.doorway{position:relative;width:72cqi;aspect-ratio:1/1.86;background:var(--trim);padding:2.4cqi 2.4cqi 0;border-radius:1.2cqi 1.2cqi 0 0;perspective:260cqi;
  box-shadow:inset 0 0 0 .6cqi rgba(255,255,255,.06),0 0 0 0 rgba(255,190,100,0);transition:box-shadow 1.4s ease .3s}
.store.is-open .doorway{box-shadow:inset 0 0 0 .6cqi rgba(255,255,255,.06),0 0 11cqi 1.5cqi rgba(255,190,100,.3)}
.interior{position:absolute;inset:2.4cqi 2.4cqi 0;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 30%,#FFF1CC 0%,#F7D89A 38%,#C9965A 75%,#8C6239 100%)}
.stage{position:absolute;inset:2.4cqi 2.4cqi 0;z-index:3;display:grid;place-items:center;pointer-events:none;opacity:0;transform:translateY(4%) scale(.93);transition:opacity .25s ease,transform .3s ease}
.store.is-open .stage{opacity:1;transform:none;transition:opacity .8s ease .6s,transform 1.1s cubic-bezier(.2,.8,.2,1) .55s}
.interior::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(180deg,rgba(80,52,25,0),rgba(80,52,25,.45))}

.leaf{position:absolute;inset:2.4cqi 2.4cqi 0;transform-origin:0 50%;transform:rotateY(0deg);transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.32,.72,.18,1);z-index:2;cursor:pointer}
.store.is-open .leaf{transform:rotateY(74deg)}
.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:.4cqi .4cqi 0 0}
.leaf-front{background:var(--tc);transition:background-color .45s ease;box-shadow:inset 0 0 0 .5cqi rgba(0,0,0,.12)}
.leaf-back{transform:rotateY(180deg);background:var(--tc-2)}
.glass{position:absolute;left:12%;right:12%;top:6.5%;height:43%;border-radius:.6cqi;border:1.3cqi solid rgba(0,0,0,.2);
  background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.1) 34%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.14) 100%),linear-gradient(180deg,#2B3B35,#1A2521);
  display:flex;flex-direction:column;align-items:center;padding-top:7%}
.gold{font:800 4.4cqi/1 var(--display);letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(180deg,#FBE6A6 0%,#D7A84A 48%,#9C6E1E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .25cqi 0 rgba(0,0,0,.6))}
.gold-sm{font-size:2.5cqi;letter-spacing:.24em;margin-top:2cqi}
.hang{position:absolute;left:50%;top:57%;transform:translateX(-50%);width:23cqi;padding:1.8cqi 0 1.5cqi;text-align:center;background:#141A17;border-radius:1cqi;border:.4cqi solid #2A332E;box-shadow:0 1cqi 1.4cqi rgba(0,0,0,.35)}
.hang::before,.hang::after{content:"";position:absolute;bottom:100%;width:.35cqi;height:7cqi;background:#9AA39E}
.hang::before{left:30%;transform:rotate(20deg);transform-origin:bottom}
.hang::after{right:30%;transform:rotate(-20deg);transform-origin:bottom}
.hang b{display:block;font:800 5cqi/1 var(--body);letter-spacing:.1em;color:#FF7B62;text-shadow:0 0 1cqi rgba(255,90,60,.9),0 0 3cqi rgba(255,80,50,.55)}
.panel{position:absolute;left:12%;right:12%;top:62%;bottom:13%;border:1.2cqi solid rgba(0,0,0,.16);border-radius:.6cqi;box-shadow:inset 0 0 0 .6cqi rgba(255,255,255,.07)}
.knob{position:absolute;right:7%;top:54%;width:4.6cqi;height:4.6cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF0BF,#D8A94A 45%,#8F651C 100%);box-shadow:0 .6cqi 1cqi rgba(0,0,0,.4)}
.knob::before{content:"";position:absolute;left:50%;top:50%;width:6.4cqi;height:11cqi;transform:translate(-50%,-50%);border-radius:3cqi;background:radial-gradient(circle at 40% 30%,#E9C873,#A97A26);z-index:-1;box-shadow:0 .4cqi .8cqi rgba(0,0,0,.35)}
.kick{position:absolute;left:0;right:0;bottom:0;height:7%;background:linear-gradient(180deg,#E7C77A,#C59338 50%,#8E6520);box-shadow:inset 0 .4cqi 0 rgba(255,255,255,.35)}

.stoop{position:relative;z-index:2;margin-inline:-1cqi;height:6cqi;background:linear-gradient(180deg,#CFC7B6,#B7AE9B);border-radius:.6cqi;box-shadow:0 1.6cqi 2.4cqi -1cqi rgba(0,0,0,.35)}
.stoop::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(42% 150% at 50% 0,rgba(255,208,120,.8),rgba(255,208,120,0) 72%);opacity:0;transition:opacity 1.4s ease .5s}
.store.is-open .stoop::before{opacity:1}
.mat{position:absolute;left:50%;top:-2.4cqi;transform:translateX(-50%);width:46cqi;height:7cqi;border-radius:.8cqi;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 .5cqi,transparent .5cqi 1.1cqi),#B4864A;box-shadow:inset 0 0 0 .7cqi #7B5A2C,0 .6cqi .8cqi rgba(0,0,0,.25);display:grid;place-items:center}
.mat span{font:900 3.6cqi/1 var(--body);letter-spacing:.28em;color:#3B2A14;opacity:.85;padding-left:.28em}

/* the little website inside the door */
.phone{container-type:inline-size;position:relative;width:82%;aspect-ratio:9/18.6;margin-top:-4%;background:#0B0F0D;border-radius:9cqi;padding:2.1cqi;box-shadow:0 3cqi 6cqi -1cqi rgba(40,25,5,.55),inset 0 0 0 .4cqi #2B302D;z-index:1}
.screen{position:relative;height:100%;border-radius:7.2cqi;overflow:hidden;background:var(--ph-bg);color:var(--ph-ink);font-family:var(--body);transition:background-color .45s ease}
.p-status{display:flex;justify-content:space-between;align-items:center;padding:3.6cqi 7cqi 1.4cqi;font:700 4.2cqi/1 var(--body);color:var(--ph-ink)}
.p-status .p-sys{display:flex;gap:1.6cqi;align-items:center}
.p-status .p-sys i{display:block;background:currentColor;border-radius:.8cqi}
.p-status .s1{width:5cqi;height:3cqi;clip-path:polygon(0 100%,100% 0,100% 100%)}
.p-status .s2{width:7.5cqi;height:3.4cqi;border-radius:1cqi!important;box-shadow:inset 0 0 0 .6cqi var(--ph-bg)}
.p-island{position:absolute;left:50%;top:2.4cqi;transform:translateX(-50%);width:27cqi;height:7.2cqi;background:#0B0F0D;border-radius:4cqi}
.p-head{display:flex;align-items:center;gap:2.6cqi;padding:2.6cqi 5.5cqi;border-bottom:.35cqi solid color-mix(in srgb,var(--ph-ink) 12%,transparent)}
.p-logo{width:7.4cqi;height:7.4cqi;border-radius:2cqi;background:var(--tc);display:grid;place-items:center;flex:none;transition:background-color .45s ease}
.p-logo svg{width:5cqi;height:5cqi;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p-hname{font:800 4.6cqi/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.p-callic{width:7.4cqi;height:7.4cqi;border-radius:50%;background:var(--ph-acc);display:grid;place-items:center;flex:none}
.p-callic svg{width:4cqi;height:4cqi;stroke:var(--ph-acc-ink);fill:none;stroke-width:2.4}
.p-hero{padding:5cqi 6cqi 5.5cqi;background:var(--ph-band);transition:background-color .45s ease;position:relative;overflow:hidden}
.p-hero::after{content:"";position:absolute;right:-9cqi;top:-6cqi;width:38cqi;height:38cqi;border-radius:50%;background:var(--tc);opacity:.1}
.p-art{width:15cqi;height:15cqi;border-radius:4cqi;background:var(--tc);display:grid;place-items:center;margin-bottom:3.4cqi;transition:background-color .45s ease}
.p-art svg{width:9.5cqi;height:9.5cqi;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-town{font:700 3.3cqi/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ph-soft);margin:0 0 1.6cqi}
.p-title{font:820 9.4cqi/1.02 var(--display);letter-spacing:-.01em;margin:0 0 2cqi;overflow-wrap:anywhere}
.p-tag{font:500 4.4cqi/1.35 var(--body);color:var(--ph-soft);margin:0 0 3.4cqi}
.p-open{display:inline-flex;align-items:center;gap:1.8cqi;font:700 3.7cqi/1 var(--body);padding:1.8cqi 3cqi;border-radius:10cqi;background:var(--ph-bg);margin:0 0 4cqi;box-shadow:0 0 0 .35cqi color-mix(in srgb,var(--ph-ink) 14%,transparent)}
.p-open i{width:2.4cqi;height:2.4cqi;border-radius:50%;background:#8A918D}
.p-open.is-open i{background:#2E9E5B;box-shadow:0 0 0 .9cqi rgba(46,158,91,.22)}
.p-btns{display:flex;gap:2.4cqi}
.p-btn{flex:1;text-align:center;font:700 4cqi/1 var(--body);padding:3.3cqi 0;border-radius:2.4cqi;background:var(--ph-acc);color:var(--ph-acc-ink)}
.p-btn.alt{background:transparent;color:var(--ph-ink);box-shadow:inset 0 0 0 .45cqi var(--ph-ink)}
.p-list{padding:5cqi 6cqi 2cqi}
.p-list-h{font:800 5.4cqi/1 var(--display);margin:0 0 2.6cqi}
.p-list ul{list-style:none}
.p-list li{display:flex;justify-content:space-between;gap:2cqi;font:500 4cqi/1.25 var(--body);padding:2.5cqi 0;border-bottom:.35cqi dashed color-mix(in srgb,var(--ph-ink) 18%,transparent)}
.p-list li span:last-child{color:var(--ph-soft);font-weight:600}
.p-form{margin:3cqi 6cqi;padding:4cqi;border-radius:3cqi;background:var(--ph-band);transition:background-color .45s ease}
.p-form b{display:block;font:800 4.6cqi/1.1 var(--display);margin-bottom:2.6cqi}
.p-form i{display:block;height:6cqi;border-radius:1.6cqi;background:var(--ph-bg);margin-bottom:2cqi;box-shadow:inset 0 0 0 .35cqi color-mix(in srgb,var(--ph-ink) 16%,transparent)}
.p-form i:last-child{background:var(--ph-acc);box-shadow:none;margin:0;width:55%}
.p-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1.8cqi;padding:2.6cqi 3.4cqi 5.2cqi;background:color-mix(in srgb,var(--ph-bg) 88%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-top:.35cqi solid color-mix(in srgb,var(--ph-ink) 12%,transparent)}
.p-bar span{flex:1;text-align:center;font:700 3.6cqi/1 var(--body);padding:2.8cqi 0;border-radius:2cqi;background:color-mix(in srgb,var(--ph-ink) 8%,transparent)}
.p-bar span.main{flex:1.4;background:var(--ph-acc);color:var(--ph-acc-ink)}
.p-bar::after{content:"";position:absolute;left:50%;bottom:1.6cqi;transform:translateX(-50%);width:34cqi;height:1.2cqi;border-radius:1cqi;background:var(--ph-ink);opacity:.8}

.art-cap{margin:22px auto 0;max-width:430px;text-align:center;font-size:14px;color:var(--ink-2)}
.art-cap b{color:var(--ink)}

/* ---------- street band: who we build for ---------- */
.street{background:var(--paper-2);border-block:1px solid var(--rule);padding-block:clamp(16px,2.6vw,26px);overflow-x:clip}
.street-row{display:flex;width:max-content}
.street-row-2{margin-top:clamp(2px,.6vw,8px)}
.street-track{list-style:none;display:flex;flex:none}
.street-track li{display:flex;align-items:center;white-space:nowrap;font:italic 700 clamp(28px,4.4vw,52px)/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
.street-track li::after{content:"\2726";font-style:normal;font-size:.4em;color:var(--brass);margin-inline:.85em}
.street-row-2 li{font-style:normal;font-weight:800;color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--door) 75%,var(--ink))}
.street-row-2 li::after{-webkit-text-stroke:0}
@supports not (-webkit-text-stroke:1px){.street-row-2 li{color:var(--ink-2)}}

/* ---------- got an email from Max ---------- */
.letterband{background:var(--night);color:var(--night-ink);--focus:#F2C14E;--link:#9AD8BF}
.letterband .eyebrow{color:#9AD8BF}
.letterband h2{color:var(--night-ink)}
.letter-grid{display:grid;gap:clamp(30px,5vw,64px);align-items:start}
@media (min-width:980px){.letter-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.letter-intro p{color:var(--night-2);font-size:18px;max-width:30em;margin-top:18px}
.letter-intro .stopnote{font-size:15px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.letter{position:relative;background:#FFFDF6;color:#1C231F;border-radius:6px;padding:clamp(26px,4vw,44px) clamp(22px,4vw,46px) clamp(26px,4vw,40px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);transform:rotate(-.6deg)}
.letter::before{content:"";position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(-45deg,#C9413A 0 14px,#FFFDF6 14px 22px,#1F5A47 22px 36px,#FFFDF6 36px 44px);
  -webkit-mask:linear-gradient(#000 0 0) top/100% 7px no-repeat,linear-gradient(#000 0 0) bottom/100% 7px no-repeat;mask:linear-gradient(#000 0 0) top/100% 7px no-repeat,linear-gradient(#000 0 0) bottom/100% 7px no-repeat;pointer-events:none}
.letter h3{font-size:21px;margin:6px 0 20px;color:#1C231F;max-width:16em}
.postmark{position:absolute;right:clamp(14px,3vw,30px);top:clamp(16px,3vw,26px);width:96px;height:96px;border-radius:50%;border:2.5px solid rgba(31,90,71,.55);display:grid;place-items:center;text-align:center;transform:rotate(12deg);color:rgba(31,90,71,.75);font:800 10px/1.15 var(--body);letter-spacing:.12em;text-transform:uppercase}
.postmark::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(31,90,71,.45)}
.postmark b{display:block;font:800 17px/1 var(--display);letter-spacing:.02em;margin:3px 0;text-transform:none}
.letter-steps{list-style:none;counter-reset:l;display:grid;gap:18px;margin-top:4px}
.letter-steps li{counter-increment:l;display:grid;grid-template-columns:34px 1fr;gap:14px;font-size:16.5px;line-height:1.55;color:#2C3530}
.letter-steps li::before{content:counter(l);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1F5A47;color:#fff;font:800 17px/1 var(--display)}
.letter-steps b{display:block;color:#15201B;font-size:17px;margin-bottom:2px}
.letter-sign{margin-top:26px;padding-top:18px;border-top:1px dashed rgba(28,35,31,.25);font-size:15.5px;color:#2C3530}
.letter-sign .sig{font:italic 700 22px/1.2 var(--display);color:#1F5A47;display:block;margin-top:6px}
.letter a{color:#1F5A47}
@media (max-width:540px){.postmark{width:76px;height:76px;font-size:8.5px}.postmark b{font-size:14px}.letter h3{max-width:11em}}

/* ---------- how it works: house numbers ---------- */
.steps{list-style:none;display:grid;gap:22px;position:relative}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}
.step{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:26px 24px 26px;box-shadow:var(--shadow)}
.housenum{display:grid;place-items:center;width:62px;height:76px;border-radius:7px;background:#15201B;border:3px solid var(--brass);box-shadow:inset 0 0 0 3px #15201B,inset 0 0 0 4px color-mix(in srgb,var(--brass) 55%,transparent),0 8px 16px -10px rgba(0,0,0,.6);margin-bottom:20px;font:900 40px/1 var(--display);color:var(--brass);position:relative}
.housenum::before,.housenum::after{content:"";position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F6DE9C,#9C6E1E)}
.housenum::before{top:5px}.housenum::after{bottom:5px}
.step h3{font-size:24px;line-height:1.15;margin-bottom:10px}
.step p{color:var(--ink-2);font-size:16.5px}
.step-you{background:var(--door);border-color:var(--door);color:var(--on-door)}
.step-you h3,.step-you p{color:var(--on-door)}
.step-you p{opacity:.92}
.you-tag{position:absolute;right:18px;top:22px;font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:30px;background:var(--brass);color:#15201B}
.steps-note{margin-top:28px;color:var(--ink-2);font-size:16px;display:flex;gap:10px;align-items:flex-start;max-width:52em}
.steps-note .ico{color:var(--door);margin-top:3px}

/* ---------- what you get ---------- */
.included{background:var(--paper-2)}
.feat{list-style:none;display:grid;gap:0;border-top:1px solid var(--rule)}
@media (min-width:700px){.feat{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}}
@media (min-width:1100px){.feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feat li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--rule)}
.feat .fi{width:48px;height:48px;border-radius:12px;background:var(--card);border:1px solid var(--rule);display:grid;place-items:center;color:var(--door)}
.feat .fi .ico{width:26px;height:26px;stroke-width:1.7}
.feat h3{font-size:19.5px;line-height:1.2;margin:3px 0 6px}
.feat p{color:var(--ink-2);font-size:16px;line-height:1.55}
.custom{margin-top:clamp(28px,4vw,40px);display:grid;gap:18px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 24px}
@media (min-width:760px){.custom{grid-template-columns:auto 1fr}}
.swatches{display:flex}
.swatches i{width:34px;height:34px;border-radius:50%;border:3px solid var(--card);margin-left:-9px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.swatches i:first-child{margin-left:0}
.custom p{font-size:16.5px;color:var(--ink-2)}
.custom b{color:var(--ink)}

/* ---------- pricing: hang tags ---------- */
.price-grid{display:grid;gap:clamp(36px,5vw,48px);align-items:start}
@media (min-width:980px){.price-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}}
.tags{display:grid;gap:40px 22px;padding-top:30px}
@media (min-width:600px){.tags{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tagwrap{position:relative;filter:drop-shadow(0 14px 16px rgba(21,32,27,.16));transform-origin:50% -26px}
.tag{--edge:color-mix(in srgb,var(--ink) 24%,var(--rule));--fill:var(--card);position:relative;isolation:isolate;height:100%;background:var(--edge);padding:50px 22px 26px;
  clip-path:polygon(0 30px,30px 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.tag::after{content:"";position:absolute;inset:1.5px;z-index:-1;background:var(--fill);clip-path:polygon(0 29.1px,29.1px 0,calc(100% - 29.1px) 0,100% 29.1px,100% 100%,0 100%)}
.tag-hole{position:absolute;left:50%;top:16px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 75%,#fff),0 0 0 4px rgba(0,0,0,.14),inset 0 2px 3px rgba(0,0,0,.25)}
.tag-string{position:absolute;left:50%;top:-26px;width:2px;height:50px;margin-left:-1px;background:var(--brass-ink);border-radius:2px;transform:rotate(-9deg);transform-origin:bottom;z-index:2}
.tag h3{font:800 14px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-align:center;margin-bottom:12px}
.price{font:850 64px/1 var(--display);letter-spacing:-.02em;text-align:center;margin:0 0 6px;color:var(--ink)}
.price .cur{font-size:.5em;vertical-align:.62em;margin-right:2px;font-weight:800}
.price .per{font:600 17px/1 var(--body);letter-spacing:0;color:var(--ink-2);margin-left:4px}
.tag-note{text-align:center;color:var(--ink-2);font-size:15.5px;min-height:3.1em;margin:10px 0 0}
.tag-best{--edge:var(--door);--fill:var(--door)}
.tag-best h3,.tag-best .price,.tag-best .price .per,.tag-best .tag-note{color:var(--on-door)}
.tag-best .tag-note{opacity:.92}
.sticker{position:absolute;right:-10px;top:-20px;z-index:3;margin:0;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:12px;
  background:radial-gradient(circle at 34% 28%,#F6DC98,#C9973A 58%,#A8792A);color:#15201B;font:800 12px/1.15 var(--body);letter-spacing:.09em;text-transform:uppercase;transform:rotate(12deg);
  box-shadow:0 8px 14px -8px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.35)}
.sticker::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.2px dashed rgba(21,32,27,.38)}
.tags-col .cta-row{justify-content:center;margin-top:26px}
.inc{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:26px 24px}
.inc h3{font-size:22px;margin-bottom:14px}
.checks,.crosses{list-style:none;display:grid;gap:10px}
.checks li,.crosses li{position:relative;padding-left:32px;line-height:1.5}
.checks li::before,.crosses li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--door) 14%,transparent)}
.checks li::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:5px;border-left:2.4px solid var(--door);border-bottom:2.4px solid var(--door);transform:rotate(-45deg)}
.crosses li::before{background:color-mix(in srgb,var(--sign) 13%,transparent)}
.crosses li::after{content:"×";position:absolute;left:0;top:2px;width:22px;height:22px;display:grid;place-items:center;font:800 17px/22px var(--body);color:var(--sign);text-align:center}
.fine{display:grid;gap:14px;margin-top:clamp(40px,5vw,56px);padding-top:clamp(28px,4vw,36px);border-top:1px solid var(--rule);font-size:15.5px;color:var(--ink-2)}
@media (min-width:760px){.fine{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px}}
.fine p{margin:0}
.fine b{color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cta-row span{color:var(--ink-2);font-size:15.5px}

/* ---------- meet Max ---------- */
.maxsec{background:var(--paper-2)}
.max-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:start}
@media (min-width:980px){.max-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.max-badge{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.max-face{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2B7A61,#174536);display:grid;place-items:center;box-shadow:inset 0 0 0 3px var(--brass),0 8px 18px -10px rgba(0,0,0,.6)}
.max-face span{font:900 27px/1 var(--display);color:#F7E3A9}
.max-badge p{margin:0;font-size:14px;line-height:1.35;color:var(--ink-2)}
.max-badge p b{display:block;font-size:16px;color:var(--ink)}
.max-copy .lede{font-size:clamp(17.5px,2vw,19.5px);margin-top:18px}
.dodont{display:grid;gap:22px;margin-top:28px}
@media (min-width:600px){.dodont{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dodont h3{font:800 13.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.dodont li{font-size:16px}
.human{margin-top:28px;padding:18px 20px;border-left:4px solid var(--brass);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;font-size:16px;color:var(--ink-2)}
.human b{color:var(--ink)}
.max-side{display:grid;gap:22px;min-width:0}
.max-side .human{margin-top:0}
.thread{margin:0;position:relative}
.mailwin{background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.mail-top{display:flex;align-items:center;gap:8px;padding:12px 16px;background:color-mix(in srgb,var(--ink) 6%,var(--card));border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--ink-2)}
.mail-top i{width:11px;height:11px;border-radius:50%;background:#E0675A}
.mail-top i:nth-child(2){background:#E6B54A}.mail-top i:nth-child(3){background:#5DB36E}
.mail-top span{margin-left:8px;font-weight:600}
.mail-subj{padding:18px 20px 6px;font:800 21px/1.2 var(--display)}
.msg{margin:14px 20px;padding:16px 18px;border-radius:12px;font-size:16px;line-height:1.55}
.msg .who{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2);margin-bottom:6px}
.msg .who b{color:var(--ink);font-size:14.5px}
.msg-you{background:color-mix(in srgb,var(--ink) 6%,transparent);margin-right:56px}
.msg-max{background:color-mix(in srgb,var(--door) 12%,transparent);margin-left:56px;margin-bottom:20px}
.msg-max .ai{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--door);margin-left:6px}
.av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--door);color:var(--on-door);font:800 12px/1 var(--display);margin-right:7px;vertical-align:-5px}
.msg-slot{position:relative}
.typing{position:absolute;left:56px;top:14px;margin:0;display:flex;gap:6px;align-items:center;padding:15px 16px;border-radius:12px;background:color-mix(in srgb,var(--door) 12%,transparent);opacity:0;pointer-events:none}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--door);opacity:.35}
.change{margin:12px 0 14px;background:var(--card);border:1px solid var(--rule);border-radius:10px;overflow:hidden;font-size:14.5px;line-height:1.4}
.change-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0!important;padding:9px 12px;border-bottom:1px solid var(--rule);font-weight:700;font-size:13px;color:var(--ink-2)}
.upd{font:800 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--door);background:color-mix(in srgb,var(--door) 13%,transparent);padding:5px 8px;border-radius:20px}
.change ul{list-style:none}
.change li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-top:1px dashed var(--rule)}
.change li:first-child{border-top:0}
.change li>span:first-child{font-weight:600;color:var(--ink)}
.change li>span:last-child{text-align:right;color:var(--ink-2)}
.change li.hl{background:rgba(242,193,78,.22)}
.change li.hl>span:last-child{color:var(--ink);font-weight:700}
.change small{display:block;font-size:12px;font-weight:700;color:var(--brass-ink)}
.thread figcaption{font-size:14px;color:var(--ink-2);margin-top:12px;text-align:center}
@media (max-width:480px){.msg-you{margin-right:20px}.msg-max{margin-left:20px}.typing{left:20px}}

/* ---------- compare ---------- */
.compare{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card)}
.compare table{width:100%;border-collapse:collapse;min-width:640px;font-size:15.5px}
.compare th,.compare td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare thead th{font:800 13px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:color-mix(in srgb,var(--ink) 4%,var(--card))}
.compare tbody th{font-weight:700;width:24%}
.compare .us{background:color-mix(in srgb,var(--door) 9%,var(--card))}
.compare thead .us{color:var(--door)}
.compare td{color:var(--ink-2)}
.compare td.us{color:var(--ink);font-weight:600}
.compare-note{font-size:13.5px;color:var(--ink-2);margin-top:12px}
@media (max-width:699px){
  .compare{overflow:visible;border:0;background:none;border-radius:0}
  .compare table,.compare tbody,.compare tr,.compare th,.compare td{display:block}
  .compare table{min-width:0}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compare tbody tr{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
  .compare tbody th{width:auto;padding:14px 16px 10px;border:0;font:750 18px/1.25 var(--display)}
  .compare td{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;padding:10px 16px;border-bottom:0;border-top:1px solid var(--rule)}
  .compare td::before{content:attr(data-label);font-weight:700;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
  .compare td.us::before{color:var(--door)}
}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:clamp(30px,4vw,48px)}
@media (min-width:980px){.faq-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}}
.faq-group h3{font:800 13.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--door);margin-bottom:6px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;justify-content:space-between;align-items:flex-start;padding:17px 0;font-weight:700;font-size:17px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:5px;border-right:2.4px solid var(--door);border-bottom:2.4px solid var(--door);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq summary:hover{color:var(--door)}
.faq .a{padding:0 0 18px;color:var(--ink-2);font-size:16px}

/* ---------- start: the "Email Max" card (mail slot) ---------- */
.start{background:var(--door);color:var(--on-door);--focus:#F2C14E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .start{background:#123A2E;color:#F1F4F2}}
:root[data-theme="dark"] .start{background:#123A2E;color:#F1F4F2}
.start .eyebrow{color:#F2D38C}
.start h2{color:inherit}
.start-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:start}
@media (min-width:980px){.start-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.start-copy>p{font-size:18.5px;opacity:.93;max-width:30em;margin-top:18px}
.contact{margin:30px 0 0;display:grid;gap:14px}
.contact div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.contact dt{font:800 12.5px/1.6 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.contact dd{margin:0;font-weight:600}
.contact a{color:inherit}
.slotform{position:relative;background:var(--card);color:var(--ink);border-radius:14px;padding:58px clamp(20px,3.4vw,34px) clamp(22px,3.4vw,30px);box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.slot{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:min(64%,260px);height:26px;border-radius:5px;background:linear-gradient(180deg,#F1D58E,#C99A3E 55%,#8F661F);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 6px rgba(0,0,0,.25);display:grid;place-items:center}
.slot::before{content:"";position:absolute;left:12px;right:12px;top:8px;height:8px;border-radius:3px;background:#2A2116;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.slot span{position:absolute;bottom:-17px;font:800 9.5px/1 var(--body);letter-spacing:.3em;color:var(--brass-ink)}
.slot{z-index:4}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field .opt{font-weight:500;color:var(--ink-2)}
.field-row{display:grid;gap:0 14px}
@media (min-width:560px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-note{font-size:13.5px;color:var(--ink-2);margin-top:14px}
.form-status{margin-top:12px;font-weight:600}
.form-status:empty{display:none}
.form-status.ok{padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--door) 13%,transparent);color:var(--ink)}
.form-status.err{padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--sign) 13%,transparent);color:var(--ink)}
.ask-h{font-size:24px;line-height:1.15;margin:16px 0 8px}
.ask-lead{color:var(--ink-2);font-size:15.5px;margin-bottom:20px}
.ask-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.ask-alt p{margin:0}
.ask-alt b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.ask-copy{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ask-copy[hidden]{display:none}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--night-ink);padding:0 0 calc(28px + env(safe-area-inset-bottom));--focus:#F2C14E;--link:#9AD8BF}
.mat-row{display:flex;justify-content:center;transform:translateY(-50%)}
.doormat{width:min(78vw,360px);height:74px;border-radius:10px;display:grid;place-items:center;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 7px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),#B4864A;
  box-shadow:inset 0 0 0 6px #7B5A2C,inset 0 0 0 8px rgba(0,0,0,.12),0 18px 30px -16px rgba(0,0,0,.8)}
.doormat span{font:900 26px/1 var(--body);letter-spacing:.36em;color:#3B2A14;opacity:.88;padding-left:.36em}
.foot-grid{display:grid;gap:30px 24px;padding-top:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-grid>.foot-brand,.foot-grid>div:last-child{grid-column:1/-1}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}.foot-grid>.foot-brand,.foot-grid>div:last-child{grid-column:auto}}
.foot .brand{color:var(--night-ink)}
.foot .brand-door .bd-frame{stroke:var(--night-ink)}
.foot .brand-door .bd-door{fill:#2E7D63}
.foot-brand p{color:var(--night-2);font-size:15.5px;margin-top:14px;max-width:24em}
.foot h2{font:800 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--night-2);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{color:var(--night-ink);text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot p{font-size:15.5px}
.foot address{font-style:normal;font-size:14.5px;line-height:1.5;color:var(--night-2);margin-top:12px}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;color:var(--night-2)}
.foot-base p{margin:0;font-size:14px}

/* ---------- policy pages ---------- */
.doc-hero{padding:clamp(36px,6vw,72px) 0 clamp(24px,4vw,40px);border-bottom:1px solid var(--rule)}
.doc-hero h1{font-size:clamp(40px,7vw,68px);line-height:1;letter-spacing:-.02em;font-weight:820}
.doc-hero .meta{margin-top:16px;color:var(--ink-2);font-size:15.5px}
.doc-wrap{display:grid;gap:40px;padding-block:clamp(32px,5vw,56px) clamp(64px,8vw,104px)}
@media (min-width:980px){.doc-wrap{grid-template-columns:250px minmax(0,1fr);gap:64px}}
.toc{align-self:start;font-size:15px}
@media (min-width:980px){.toc{position:sticky;top:96px}}
.toc h2{font:800 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:2px;border-left:2px solid var(--rule)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--ink);border-left-color:var(--door)}
.prose{max-width:720px}
.prose h2{font-size:clamp(25px,3vw,30px);line-height:1.15;margin:46px 0 14px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose p,.prose li{font-size:17px;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em;display:grid;gap:8px}
.prose ul li::marker{color:var(--door)}
.short{background:var(--card);border:1px solid var(--rule);border-left:5px solid var(--door);border-radius:var(--radius);padding:22px 24px;margin-bottom:38px}
.short h2{font:800 13px/1 var(--body)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--door);margin:0 0 14px!important}
.short ul{padding-left:1.2em;margin:0}
.callout{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 26px}
.prose .note{font-size:15px;color:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15.5px}
.prose th,.prose td{border-bottom:1px solid var(--rule);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.prose th{font-weight:700}

.polnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.polnav a{display:inline-flex;align-items:center;min-height:40px;padding:6px 15px;border:1.5px solid var(--rule);border-radius:30px;background:var(--card);color:var(--ink-2);font-weight:700;font-size:14.5px;text-decoration:none}
.polnav a:hover{border-color:var(--door);color:var(--ink)}
.polnav a[aria-current="page"]{background:var(--door);border-color:var(--door);color:var(--on-door)}
@media (max-width:979px){
  .toc{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 18px 12px}
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;border-left:0}
  .toc a{border-left:0;margin-left:0;padding:6px 0;font-size:14.5px}
}
.prose a{word-break:break-word}
.prose .note{margin-top:10px}
.short .note{margin:14px 0 0;font-size:14.5px;color:var(--ink-2)}

/* ---------- simple pages (thanks, 404) ---------- */
.simple{min-height:62vh;display:grid;place-items:center;text-align:center;padding-block:clamp(56px,10vw,120px)}
.simple h1{font-size:clamp(40px,7vw,66px);line-height:1.02;letter-spacing:-.02em;margin:0 0 16px}
.simple .eyebrow{margin-top:26px}
.simple p{color:var(--ink-2);font-size:18.5px;max-width:30em;margin-inline:auto}
.simple .ctas{justify-content:center}
.lockdoor{width:120px;height:200px;margin:0 auto;overflow:visible}
.lockdoor .ld-frame{fill:var(--trim)}
.lockdoor .ld-door{fill:#1F5A47}
.lockdoor .ld-glass{fill:#1A2521;stroke:rgba(0,0,0,.25);stroke-width:3}
.lockdoor .ld-panel{fill:none;stroke:rgba(0,0,0,.2);stroke-width:3}
.lockdoor .ld-knob{fill:#C9973A}
.lockdoor .ld-cord{fill:none;stroke:#9AA39E;stroke-width:1.5}
.lockdoor .ld-plate{fill:#141A17;stroke:#2A332E;stroke-width:1.5}
.lockdoor .ld-text{font:800 9.5px/1 var(--body);letter-spacing:.12em;fill:#FF7B62}
.lockdoor .ld-sign{transform-box:view-box;transform-origin:60px 44px}
@media (prefers-reduced-motion:no-preference){
  .lockdoor .ld-sign{animation:swing 2.6s cubic-bezier(.3,.6,.35,1) .3s both}
}


/* ---------- additions: trust box, receipt, tags column ---------- */
.realcheck{margin-top:28px;padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.realcheck h3{font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#F2D38C;margin-bottom:14px}
.realcheck .checks li{color:var(--night-ink);font-size:16px}
.realcheck .checks li::before{background:rgba(154,216,191,.16)}
.realcheck .checks li::after{border-color:#9AD8BF}
.letterband .stopnote a{color:#9AD8BF}
.letter-steps li>div{min-width:0}
.tags-col{min-width:0}
.tags-note{margin:18px 0 0;text-align:center;font-size:14.5px;color:var(--ink-2)}
.register{position:relative;width:100%;max-width:520px;justify-self:center}
.printer{position:relative;z-index:2;height:20px;margin:0 -10px;border-radius:10px;background:linear-gradient(180deg,#434A45,#1D2220);box-shadow:0 8px 14px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.15)}
.printer::after{content:"";position:absolute;left:16px;right:16px;top:9px;height:3px;border-radius:2px;background:#070908}
.receipt{position:relative;background:#FFFEFA;color:#22201B;padding:30px 24px 30px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;font-size:14px;line-height:1.5;box-shadow:0 18px 30px -18px rgba(21,32,27,.45);margin:-9px 6px 0;
  -webkit-mask:radial-gradient(circle at 8px 0,transparent 6px,#000 6.5px) 0 0/16px 51% repeat-x,radial-gradient(circle at 8px 100%,transparent 6px,#000 6.5px) 0 100%/16px 51% repeat-x;
  mask:radial-gradient(circle at 8px 0,transparent 6px,#000 6.5px) 0 0/16px 51% repeat-x,radial-gradient(circle at 8px 100%,transparent 6px,#000 6.5px) 0 100%/16px 51% repeat-x}
.rc-shop{text-align:center;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;margin:0 0 14px;padding-bottom:12px;border-bottom:1.5px dashed rgba(34,32,27,.35)}
.rc-shop span{font-weight:400;letter-spacing:.04em;text-transform:none;font-size:12.5px;color:#5E5A50}
.rc-h{font:700 13px/1.3 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace!important;letter-spacing:.06em;text-transform:uppercase;color:#22201B!important;margin:0 0 10px}
.receipt table{width:100%;border-collapse:collapse}
.receipt th,.receipt td{padding:5px 0;vertical-align:bottom;font-weight:400;text-align:left}
.receipt th{position:relative;overflow:hidden;padding-right:8px}
.receipt th::after{content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";position:absolute;white-space:nowrap;color:rgba(34,32,27,.35);padding-left:6px}
.receipt td{text-align:right;white-space:nowrap;font-weight:700;padding-left:8px;width:1%}
.rc-total{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding-top:12px;border-top:1.5px dashed rgba(34,32,27,.35);font-size:15px}
.rc-total b{font-size:15px}
.rc-foot{text-align:center;margin:16px 0 0;font-size:12.5px;letter-spacing:.06em;color:#5E5A50}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .receipt{background:#F3EFE4}}
:root[data-theme="dark"] .receipt{background:#F3EFE4}

/* ---------- motion ----------
   Everything here is decoration: content is fully visible without it, and it all switches off for
   people who ask their device for less motion. Scroll-linked effects use native CSS scroll timelines
   (Chrome, Edge, Safari 26+); other browsers simply show the page still. Timed effects (door, tags,
   postmark, Max typing, envelope) are started by site.js when they scroll into view. */
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes fadeup{from{opacity:0;translate:0 16px}}
@keyframes fadein{from{opacity:0}}
@keyframes wordup{from{transform:translateY(108%)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes streetL{from{transform:translateX(0)}to{transform:translateX(-18%)}}
@keyframes streetR{from{transform:translateX(-30%)}to{transform:translateX(-12%)}}
@keyframes print{from{clip-path:inset(0 0 100% 0);translate:0 -16px}to{clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes fan{from{transform:translateX(var(--x,0))}}
@keyframes swing{0%{transform:rotate(0)}14%{transform:rotate(5.5deg)}34%{transform:rotate(-3.6deg)}54%{transform:rotate(2.2deg)}74%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
@keyframes stamp{from{opacity:0;transform:rotate(12deg) scale(1.8)}to{opacity:1;transform:rotate(12deg) scale(1)}}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes flash{0%,35%{background:rgba(242,193,78,.7)}100%{background:rgba(242,193,78,.22)}}

@media (prefers-reduced-motion:no-preference){
  /* hero entrance */
  .hero h1 .w>span{animation:wordup 1s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(.08s + var(--i,0) * 75ms)}
  .hero-copy>.eyebrow,.hero-copy>.lede,.hero-copy>.ctas,.hero-copy>.ticks,.hero-copy>.tryit{animation:fadeup .9s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>.lede{animation-delay:.42s}
  .hero-copy>.ctas{animation-delay:.52s}
  .hero-copy>.ticks{animation-delay:.62s}
  .hero-copy>.tryit{animation-delay:.72s}
  .hero-art{animation:fadein 1.1s ease .2s both}
  /* timed moments, started by site.js */
  .tags.swing .tagwrap{animation:swing 1.9s cubic-bezier(.3,.6,.35,1) both}
  .tags.swing .tagwrap+.tagwrap{animation-delay:.14s}
  .letter.stamp-ready .postmark{opacity:0}
  .letter.stamped .postmark{animation:stamp .5s cubic-bezier(.3,1.5,.5,1) .15s both}
  .thread.chat-ready .msg-max{opacity:0;transform:translateY(12px)}
  .thread.chat-ready.typing-on .typing{opacity:1;transition:opacity .2s ease}
  .thread.chat-ready.typing-on .typing i{animation:dot 1s ease-in-out infinite}
  .thread.chat-ready.typing-on .typing i:nth-child(2){animation-delay:.15s}
  .thread.chat-ready.typing-on .typing i:nth-child(3){animation-delay:.3s}
  .thread.chat-ready.replied .typing{opacity:0}
  .thread.chat-ready.replied .msg-max{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .thread.replied .change li.hl{animation:flash 2s ease .7s both}
  .slotform .form-status.ok{animation:fadeup .45s cubic-bezier(.2,.7,.2,1) both}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head,.step,.feat li,.letter,.mailwin,.human,.compare,.custom,.faq-group,.fine p,.realcheck{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .steps .step:nth-child(2){animation-range:entry 6% entry 51%}
    .steps .step:nth-child(3){animation-range:entry 12% entry 57%}
    .steps .step:nth-child(4){animation-range:entry 18% entry 63%}
    .street-row{animation:streetL linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .street-row-2{animation-name:streetR}
    .receipt{animation:print linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
    .swatches i{animation:fan linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
    .swatches i:nth-child(2){--x:-25px}.swatches i:nth-child(3){--x:-50px}.swatches i:nth-child(4){--x:-75px}.swatches i:nth-child(5){--x:-100px}.swatches i:nth-child(6){--x:-125px}
  }
}
@media (min-width:1100px){@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .feat li:nth-child(3n+2){animation-range:entry 6% entry 51%}
  .feat li:nth-child(3n){animation-range:entry 12% entry 57%}
}}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:linear-gradient(90deg,var(--door),var(--brass));transform-origin:0 50%;animation:grow linear both;animation-timeline:scroll(root block)}
  }
}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    :root{interpolate-size:allow-keywords}
    .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .top,.mmenu,.hero-art,.tryit,.street,.foot .mat-row,.slotform,.skip{display:none!important}
  .thread .msg-max{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000}
  .letterband,.start,.foot{background:#fff!important;color:#000!important}
}