/* Mable homepage layout. Foundations come from mable-system.css (developer kit v1.3). */
body{background:var(--canvas)}
main{max-width:none;padding:0}
section{border-bottom:0}
.container{max-width:1200px;margin:0 auto;padding:0 48px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite,.hp{display:none}

/* Header */
.site-header{background:var(--canvas);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--layer-sticky)}
.site-header .container{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .logo{font-size:28px;text-decoration:none;color:var(--ink)}
.site-header .logo svg{width:30px;height:26px}
.site-header nav{display:flex;gap:28px;align-items:center}
.site-header nav a:not(.btn){color:var(--ink);text-decoration:none;font-size:16px}
.site-header nav a:not(.btn):hover{text-decoration:underline}

/* Hero */
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:88px;padding-bottom:96px}
.hero h1{font-size:clamp(44px,5.4vw,76px);letter-spacing:-.035em;line-height:1.04;max-width:14ch}
.hero .sub{font-size:21px;line-height:1.5;color:var(--muted);max-width:38ch;margin-bottom:32px}
.hero .cue{font-size:16px;color:var(--muted);max-width:44ch;margin-top:20px}

/* Sign-off card (illustrative product fragment) */
.signoff{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #24211F14;padding:24px}
.signoff .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.signoff .surface-id{font:14px/1.5 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.signoff .rule{font-size:19px;line-height:1.4;margin-bottom:16px}
.signoff .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.btn.ink{background:var(--ink);color:var(--canvas)}
.btn.ink:hover{background:#3A3633}
.rail{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px 14px;font:12px/1.6 var(--mono);letter-spacing:.08em;color:var(--muted)}
.rail li[aria-current]{color:var(--link);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.tag{font:12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:2px 8px}

/* Sections */
.band{padding:88px 0;border-top:1px solid var(--border)}
.band h2{max-width:20ch}
.strip{padding:28px 0;border-top:1px solid var(--border)}
.strip .mono{font-size:14px;letter-spacing:.04em;color:var(--muted);margin-bottom:12px}
.strip p:last-child{margin-bottom:0}
.prose p{font-size:19px;max-width:62ch}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.figure{margin:40px 0 0}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{font-size:15px;color:var(--muted);margin-top:12px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;margin-top:56px}
.features article h3{font-size:24px;margin-bottom:10px}
.features article p{color:var(--muted)}
.figure.wide{max-width:960px}
.figure-row{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:56px;max-width:960px}
.figure-row .figure{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px}
.compare th[scope=col]:last-child,.compare td:last-child{background:var(--surface)}
.compare td:last-child,.compare th[scope=col]:last-child{padding-left:16px}
.targets{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.targets li{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 24px;font-size:18px}
.targets .t{display:block;font:12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.faq details{padding:20px 0}
.faq summary{font-size:20px;font-weight:400}
.faq details p{color:var(--muted);font-size:18px}
.compare th[scope=col]:last-child,.compare td:last-child{font-weight:600}
.compare td{font-size:16px}

/* Closing + apply */
.closing .container{position:relative;z-index:1;padding-top:88px;padding-bottom:88px}
.closing h2{max-width:22ch}
.closing p{font-size:20px;color:#C4C8BD;max-width:56ch}
.apply{padding:72px 0 88px}
.apply form{max-width:640px}
.apply .field{margin-bottom:22px}
.apply .helper{font-size:15px;color:var(--muted);margin:-2px 0 8px}
.apply .opt{font-weight:400;color:var(--muted)}
.apply .error{margin:6px 0 0}
.apply .processor{font-size:15px;color:var(--muted);margin:14px 0 0}
#formStatus:empty{display:none}
#formStatus{margin-bottom:24px}

/* Footer */
.site-footer{padding:32px 0;border-top:1px solid var(--border)}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer .logo{font-size:24px}
.site-footer .logo svg{width:26px;height:22px}
.site-footer small{color:var(--muted);font-size:15px}
.footer-links{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:baseline;font-size:15px}
.footer-links .contact span{color:var(--muted)}

/* Privacy notice */
.notice{padding:72px 0 88px}
.notice .container{max-width:820px}
.notice h1{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.03em;line-height:1.08;margin-bottom:12px}
.notice h2{font-size:24px;margin:40px 0 12px}
.notice .updated{color:var(--muted);font-size:16px;margin-bottom:32px}

@media(max-width:1023px){
  .hero .container{grid-template-columns:minmax(0,1fr);padding-top:64px;padding-bottom:72px}
  .split{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:800px){
  .container{padding:0 20px}
  .site-header nav a:not(.btn){display:none}
  .band{padding:56px 0}
  .features,.targets,.figure-row{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:44px}
  .hero .sub{font-size:19px}
  .closing .container{padding-top:56px;padding-bottom:56px}
  .figure.wide{overflow-x:auto}
  .figure.wide svg{min-width:640px}
}

/* Keep visually hidden table text inside its scroll container on narrow screens. */
.tablewrap{position:relative}

/* ---- Layered product cards (pattern and values from developer-kit/styles/mable-applications.css) ---- */
.paper{--image:url("../images/paper-source.webp")}
.wood{--image:url("../images/timber-source.webp")}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:48px}
.product-card{border:1px solid #CDD2C7;border-radius:8px;overflow:hidden;position:relative;isolation:isolate;background:#F5F4EF;--strength:.36;min-width:0;display:flex;flex-direction:column}
.product-card .treatment{position:absolute;inset:0;pointer-events:none;opacity:var(--strength);mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 91%)}
.product-card .photo{position:absolute;inset:0;background:var(--image) 65% center/cover;filter:grayscale(1) contrast(.9);opacity:.9}
.product-card .dots{position:absolute;inset:0;background:radial-gradient(var(--ink) .65px,transparent .8px);background-size:4px 4px;opacity:.7}
.product-card .treatment>svg{position:absolute;inset:0;width:100%;height:100%}
.product-card .bend{fill:none;stroke:var(--canvas);stroke-width:58}
.product-card .anchors{fill:none;stroke:var(--ink);stroke-width:2;opacity:.4}
.product-card.mable-dark{background:#24211F;color:#F5F4EF;--strength:.4}
.product-card.mable-dark .photo{filter:grayscale(1) invert(1) contrast(.85)}
.product-card.mable-dark .bend{stroke:#24211F}
.product-card.mable-dark .anchors{stroke:#F5F4EF}
.product-card.mable-dark .dots{background:radial-gradient(#F5F4EF .65px,transparent .8px);background-size:4px 4px}
.product-scene{position:relative;height:300px;z-index:1;overflow:hidden;flex-shrink:0}
.ui-fragment{position:absolute;border:1px solid #D3D5CE;background:#FDFCF9FA;border-radius:8px;box-shadow:0 12px 28px #24211F14;color:#24211F;font-size:15px;line-height:1.5}
.fragment-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #D3D5CE;font:12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5D605A;gap:12px}
.fragment-body{padding:16px 18px}
.fragment-primary{top:32px;left:7%;width:84%}
.fragment-secondary{top:196px;left:18%;width:73%}
.mini-meta{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:15px}
.mini-meta strong{font-weight:600}
.mini-label{font:11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5D605A}
.mini-field{border:1px solid #A59E94;padding:8px 12px;border-radius:4px;font:14px/1.5 var(--mono);margin-top:10px;overflow-wrap:anywhere}
.mini-chip{display:inline-block;border:1px solid #D3D5CE;background:#F5F4EF;border-radius:4px;padding:2px 8px;font:12px var(--mono)}
.fragment-bottomline{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid #D3D5CE;font-size:14px;color:#5D605A}
.dot-tag{width:7px;height:7px;border-radius:50%;background:#8A431F;display:inline-block;flex-shrink:0}
.dark-fragment{background:#2C2F2AF7;border-color:#586052;color:#F5F4EF;box-shadow:0 16px 32px #0004}
.dark-fragment .fragment-header{color:#C4C8BD;border-color:#586052}
.dark-fragment .fragment-bottomline{border-color:#586052;color:#C4C8BD}
.dot-tag.apricot{background:#FF9A52}
.fixtures{list-style:none;margin:0;padding:0}
.fixtures li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #586052;font-size:15px}
.fixtures li:last-child{border-bottom:0}
.fixtures .mono{font-size:14px;color:#F5F4EF}
.fixtures li span:last-child{color:#9DD5AC;white-space:nowrap}
.control-fragment{top:32px;left:6%;width:88%}
.control-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:10px 0;border-bottom:1px solid #D3D5CE;font-size:15px}
.control-row:last-child{border:0}
.control-row>span:first-child{font-weight:600;white-space:nowrap}
.control-row .control-value{color:#5D605A;text-align:right}
.caption-area{position:relative;z-index:2;padding:8px 32px 32px;margin-top:auto}
.caption-area .eyebrow{margin-bottom:10px}
.caption-area h3{font-size:28px;line-height:1.15;margin-bottom:12px}
.caption-area p:not(.eyebrow){font-size:17px;line-height:1.55;color:#5D605A;max-width:52ch;margin:0}
.product-card.mable-dark .caption-area p:not(.eyebrow),.product-card.mable-dark .eyebrow{color:#C4C8BD}
.product-card.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
.product-card.wide .treatment{mask-image:linear-gradient(90deg,transparent 0%,#000 90%)}
.product-card.wide .product-scene{order:2;height:260px}
.product-card.wide .caption-area{order:1;padding:40px;margin:0}

/* ---- Type and spacing pass ---- */
h2{font-size:clamp(34px,3.5vw,48px);line-height:1.1;letter-spacing:-.025em}
.band h2{max-width:24ch;margin-bottom:0}
.band .eyebrow + h2{margin-top:0}
.split h2{max-width:16ch}
.features{margin-top:56px;padding-top:48px;border-top:1px solid var(--border);gap:32px 56px}
.features article h3{font-size:24px;line-height:1.2}
.features article p{font-size:17px;line-height:1.6;margin:0}
#targets .prose{margin-top:20px}
.targets{margin-top:32px}
.faq h2{margin-bottom:24px}
.faq details{padding:0;border-bottom:1px solid var(--border)}
.faq details:first-of-type{border-top:1px solid var(--border)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-size:20px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--muted);flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;max-width:68ch}
.faq .tablewrap{margin-top:48px}
.closing h2{margin-bottom:16px}
.closing .btn{margin-top:16px}
.apply{padding:88px 0 96px}
.apply-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.apply-intro h2{font-size:clamp(30px,3vw,40px);max-width:14ch}
.apply-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:32px}
.apply form{max-width:none}
.apply .field{margin-bottom:20px}

@media(max-width:1023px){
  .feature-grid,.apply-grid{grid-template-columns:minmax(0,1fr)}
  .product-card.wide{display:flex}
  .product-card.wide .product-scene{order:0}
  .product-card.wide .caption-area{padding:8px 32px 32px}
}
@media(max-width:640px){
  .product-scene,.product-card.wide .product-scene{height:280px}
  .fragment-primary,.control-fragment{left:5%;width:90%;top:20px}
  .fragment-secondary{top:180px;left:10%;width:85%}
  .control-row{flex-direction:column;gap:2px}
  .control-row .control-value{text-align:left}
  .caption-area,.product-card.wide .caption-area{padding:4px 20px 24px}
  .caption-area h3{font-size:24px}
  .apply-card{padding:20px}
  .faq summary{font-size:18px}
}
.rail{display:grid;grid-template-columns:repeat(3,max-content);gap:6px 20px}
.strip .mono{max-width:none}
.product-scene{height:340px}
.fragment-secondary{top:252px}
.compare tbody th{color:var(--ink);font-weight:400}
@media(max-width:640px){.product-scene{height:330px}.fragment-secondary{top:236px}}
@media(max-width:1023px){.product-card.wide{flex-direction:column;align-items:stretch}}
@media(max-width:640px){.product-scene,.product-card.wide .product-scene{height:370px}.fragment-secondary{top:262px}.product-card.wide .product-scene{height:330px}}
@media(max-width:640px){.product-card.wide .product-scene{height:400px}.apply-grid{gap:24px}.apply{padding:56px 0 72px}}
@media(max-width:1023px){.product-card.wide .treatment{mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 91%)}}

/* ---- Hero architecture panel (layered fragments, kit card language) ---- */
.arch{position:relative;min-height:420px}
.arch .ui-fragment{position:absolute}
.arch-main{top:0;left:0;width:88%}
.arch-ext{top:250px;right:0;width:64%;box-shadow:0 18px 40px #24211F1f}
.surfaces{list-style:none;margin:0;padding:6px 18px 10px}
.surfaces li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #E4E5DF}
.surfaces li:last-child{border-bottom:0}
.sid{font:14px/1.4 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--ink);background:#EFEEE8;border:1px solid #DDDCD4;border-radius:4px;padding:3px 9px}
.chip.open{color:var(--link);background:#FBF0E7;border-color:#EBCDB6}
.chip svg{width:13px;height:13px}
.surfaces li.locked .sid{color:#8B8F86}
.surfaces li.locked .chip{color:var(--muted);background:transparent;font-weight:400}
.steps{list-style:none;margin:0;padding:14px 18px 4px;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:10px;font-size:15px}
.steps li svg{width:16px;height:16px;color:var(--success)}
.steps li.live{font-weight:600}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #FF9A5233;margin:0 4px}
.arch-ext .fragment-bottomline{margin:10px 18px 14px;padding-top:12px}

/* ---- Comparison table ---- */
.compare-wrap{margin-top:56px;overflow-x:auto;position:relative}
table.compare{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:16px;table-layout:fixed}
.compare col{width:auto}
.compare th,.compare td{padding:18px 20px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left}
.compare thead th{font-size:15px;font-weight:600;color:var(--ink);padding-top:24px;padding-bottom:16px;border-bottom:1px solid var(--ink);vertical-align:bottom}
.compare thead th .sub{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.compare tbody th{font-weight:400;color:var(--ink);width:28%;padding-left:0}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare .us,.compare td:last-child{background:var(--surface);border-left:1px solid var(--border);border-right:1px solid var(--border)}
.compare thead .us{border-top:3px solid var(--accent);border-radius:8px 8px 0 0;font-size:17px}
.compare tbody tr:last-child td:last-child{border-bottom:1px solid var(--border);border-radius:0 0 8px 8px}
.compare th:first-child,.compare td:first-child{padding-left:0}
.v{display:inline-flex;align-items:center;gap:8px;line-height:1.35}
.v svg{width:18px;height:18px;flex-shrink:0}
.v.yes{color:var(--ink);font-weight:600}
.v.yes svg{color:var(--success)}
.v.no{color:var(--muted)}
.v.no svg{color:#A59E94}
.v.build{color:var(--muted)}
.compare td:last-child .v{color:var(--ink);font-weight:600}

@media(max-width:1023px){
  .arch{min-height:400px;max-width:560px}
}
@media(max-width:640px){
  .arch{min-height:0;display:grid;gap:16px}
  .arch .ui-fragment{position:relative;top:auto;left:auto;right:auto;width:100%}
  .arch-ext{width:88%;justify-self:end;margin-top:-28px}
  .compare th,.compare td{padding:14px 14px}
}
.surfaces{padding-bottom:30px}
.arch-ext{top:262px}
.surfaces li.active{background:#FBF0E7;margin:0 -18px;padding:12px 18px;border-bottom-color:#EBCDB6}
/* Comparison on phones: one card per capability, Mable first */
@media(max-width:640px){
  .compare-wrap{overflow:visible}
  table.compare{min-width:0;table-layout:auto}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare tbody tr{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;background:var(--canvas);margin-bottom:12px;overflow:hidden}
  .compare tbody th{padding:14px 16px 6px;border:0;font-weight:600;width:auto}
  .compare td{display:flex;justify-content:space-between;gap:16px;padding:8px 16px;border:0;background:transparent}
  .compare td::before{content:attr(data-label);color:var(--muted);font-size:15px}
  .compare td.us-cell{order:-1;margin:0;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);padding:12px 16px;border-radius:0}
  .compare tbody tr th{order:-2}
  .compare td.us-cell::before{color:var(--ink);font-weight:600}
  .compare tbody tr:last-child td:last-child{border-radius:0;border-bottom:1px solid var(--border)}
  .compare tbody tr td:last-of-type{padding-bottom:8px}
  .compare tbody tr > td:nth-last-child(2){padding-bottom:14px}
}
@media(max-width:640px){.compare tbody tr th:first-child{padding:14px 16px 8px}}

/* ---- Apricot roles (kit v1.3.1 tokens: --accent, --accent-tint; P3 handled in mable-system.css) ----
   Accent = the one primary action, what is live, the flexing route on dark.
   Tint   = what is selected or open. Nothing else is warm. */
.surfaces li.active{background:var(--accent-tint);border-bottom-color:var(--accent-tint-line)}
.chip.open{color:var(--link);background:var(--accent-tint);border-color:var(--accent-tint-line)}
.live-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent)}
.dot-tag.apricot{background:var(--accent)}

/* Comparison: the recommended column is "selected" */
.compare .us,.compare td:last-child{background:var(--accent-tint);border-color:var(--accent-tint-line)}
.compare thead .us{border-top-color:var(--accent)}
.compare tbody tr:last-child td:last-child{border-bottom-color:var(--accent-tint-line)}
@media(max-width:640px){.compare td.us-cell{background:var(--accent-tint);border-color:var(--accent-tint-line)}}

/* Dark closing band: the Flexure curve drawn as the accent route */
.beam-curve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mask-image:linear-gradient(90deg,transparent 46%,#000 82%)}
.beam-curve path{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}