/* Smithdale Records · site stylesheet · v1 */

/* ---------- Tokens ---------- */
:root{
  /* color */
  --warn:#8A5A00;       /* warning text and border, 5.4:1 on cream */
  --warn-bg:#F6EBD2;
  --ok-bg:#E6EEE3;
  --err-bg:#F3E1E3;
  --info-bg:#EBE4D6;
  --ink:#1C1A17;        /* text, rules, borders */
  --ox:#6B1F2A;         /* oxblood: primary action, eyebrows, emphasis */
  --ox-deep:#4D141D;    /* oxblood hover */
  --cream:#F3EEE4;      /* page ground */
  --surface:#EBE4D6;    /* alternate section ground, footer */
  --paper:#FAF7F1;      /* highlighted row or panel */
  --white:#FFFDF8;      /* cards, inputs */
  --band:#3A342C;       /* dark band: masthead, close */
  --band-rule:#564E44;  /* rule on dark band */
  --body:#3E3A34;       /* body copy */
  --muted:#6E6760;      /* captions, labels, help */
  --rule:#D9D2C5;       /* soft divider */
  --rule-soft:#C9C1B2;  /* hairline on surface */
  --disabled:#B8B0A2;
  --rose:#C9A0A6;       /* oxblood on dark */
  --on-dark:#F3EEE4;
  --on-dark-soft:#D9D2C5;
  --on-dark-muted:#A8A094;
  --ok:#2E5A3C;

  /* type */
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --fs-display:64px; --fs-h1:52px; --fs-h2:40px; --fs-h2s:36px; --fs-h3:26px;
  --fs-tile:22px; --fs-lead:20px; --fs-body:17px; --fs-small:15px; --fs-caption:14px; --fs-meta:13px; --fs-caps:11px;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:64px; --s11:72px;

  /* layout */
  --measure:1120px; --gutter:32px; --rail:320px; --rail-gap:56px;
  --hair:1px solid var(--ink);
  --soft:1px solid var(--rule);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:24px}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ox)}
a:hover{color:var(--ox-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:0}
p{margin:0}
ul,ol{margin:0}
table{border-collapse:collapse;width:100%}
input,select,button{font:inherit}

/* ---------- Type ---------- */
.display{font-family:var(--serif);font-size:var(--fs-display);font-weight:500;line-height:1.04;max-width:15ch}
.h1{font-family:var(--serif);font-size:var(--fs-h1);line-height:1.05;max-width:18ch;margin-top:var(--s4)}
.h1--wide{max-width:24ch}
.h2{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.08;margin-top:var(--s3)}
.h2--s{font-size:var(--fs-h2s)}
.h3{font-family:var(--serif);font-size:var(--fs-h3);margin-bottom:var(--s2)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);max-width:52ch;margin-top:var(--s5)}
.body{color:var(--body)}
.small{font-size:var(--fs-small);color:var(--body)}
.caption{font-size:var(--fs-caption);color:var(--muted)}
.meta{font-size:var(--fs-meta);color:var(--muted)}
.mono{font-family:var(--mono);font-size:var(--fs-meta);color:var(--muted)}
.eyebrow{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--ox);font-weight:600}
.caps{font-size:var(--fs-caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.strong{font-weight:600;color:var(--ink)}
.quote{font-family:var(--serif);font-size:22px;line-height:1.4;font-style:italic;color:var(--body)}
.quote__by{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--s2)}
.link{color:var(--ox);font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline;color:var(--ox-deep)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ox);outline-offset:2px}
.measure{max-width:60ch}

/* ---------- Layout ---------- */
.wrap{max-width:var(--measure);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{border-top:var(--hair);padding:var(--s10) 0}
.section--flush{border-top:0}
.section--surface{background:var(--surface)}
.section--tight{padding:var(--s9) 0}
.rail{display:grid;grid-template-columns:var(--rail) 1fr;gap:var(--rail-gap);align-items:start}
.rail__head .body{margin-top:var(--s4)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
.grid-2--wide{gap:var(--rail-gap)}
.split{display:grid;grid-template-columns:1fr 520px;gap:var(--s10);align-items:start}
.split--narrow{grid-template-columns:1fr 400px;gap:var(--rail-gap)}
.stack{display:grid;gap:var(--s4)}
.row{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.row--between{justify-content:space-between}
.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}.mt-7{margin-top:var(--s7)}.mt-8{margin-top:var(--s8)}
.center{text-align:center}

/* ---------- Bands ---------- */
.band{background:var(--band);color:var(--on-dark)}
.band .body,.band p{color:var(--on-dark-soft)}
.band .caption,.band .meta,.band .mono{color:var(--on-dark-muted)}
.band .eyebrow{color:var(--rose)}
.band .h2{color:var(--on-dark)}
.band-ox{background:var(--ox);color:var(--on-dark)}

/* ---------- Mark ---------- */
.mark{text-decoration:none;color:inherit;display:inline-block;line-height:1}
.mark:hover{color:inherit}
.mark:hover .mark__name{opacity:.8}
.mark__name{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:.01em;display:block}
.mark__sub{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--ox);display:block;margin-top:5px;padding-left:2px}
.mark--sm .mark__name{font-size:26px}
.mark--sm .mark__sub{font-size:9px}
.band .mark__sub{color:var(--rose)}

/* ---------- Masthead ---------- */
.masthead{border-bottom:var(--hair);background:var(--cream)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;padding-top:var(--s4);padding-bottom:var(--s4)}
.masthead--dark{background:var(--band);color:var(--on-dark);border-bottom:1px solid var(--band-rule)}
.nav{display:flex;gap:26px;font-size:var(--fs-small);flex-wrap:wrap;align-items:center}
.nav__links{display:contents}
.nav a{text-decoration:none;color:var(--body)}
.nav a:hover{color:var(--ox)}
.nav .btn--primary,.masthead--dark .nav .btn--primary{color:var(--on-dark)}
.nav .btn--primary:hover{color:var(--on-dark)}
.nav a.is-current{color:var(--ox);box-shadow:0 1px 0 var(--ox)}
.masthead--dark .nav a{color:var(--on-dark)}
.masthead--dark .nav a:hover{color:var(--rose)}
.masthead--dark .nav a.is-current{color:var(--rose);box-shadow:0 1px 0 var(--rose)}
.masthead--dark .nav .btn--light{color:var(--ox)}
.masthead--dark .nav .btn--light:hover{color:var(--ox-deep)}
.masthead--dark .mark__sub{color:var(--rose)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:var(--fs-small);padding:13px 24px;border:1px solid transparent;line-height:1.2;white-space:nowrap;cursor:pointer}
.btn--primary{background:var(--ox);color:var(--on-dark)}
.btn--primary:hover{background:var(--ox-deep);color:var(--on-dark)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:500}
.btn--outline:hover{background:var(--ink);color:var(--cream)}
.btn--light{background:var(--cream);color:var(--ox)}
.btn--light:hover{background:var(--white);color:var(--ox-deep)}
.band .btn--outline{color:var(--on-dark);border-color:var(--on-dark-soft)}
.band .btn--outline:hover{background:var(--cream);color:var(--ink)}
.btn--lg{font-size:16px;padding:14px 26px}
.btn--sm{font-size:var(--fs-caption);padding:8px 14px}
.btn--nav{font-size:var(--fs-caption);padding:10px 18px}
.btn--block{display:block;text-align:center}

/* ---------- Strips ---------- */
.strip{background:var(--ox);color:var(--on-dark)}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s5);padding-bottom:var(--s5)}
.strip__t{font-family:var(--serif);font-size:24px}
.wordmarks{border-bottom:var(--hair);background:var(--surface);text-align:center}
.wordmarks .wrap{padding-top:18px;padding-bottom:20px}
.wordmarks__row{display:flex;justify-content:center;align-items:flex-start;gap:36px;flex-wrap:wrap;margin-top:16px}
.wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;letter-spacing:.03em;color:var(--muted);min-width:64px}
.wordmark img{height:36px;width:36px;border-radius:5px;opacity:.85}
.wordmark:hover img{opacity:1}

/* ---------- Lists ---------- */
.steps{border-top:var(--hair)}
.step{display:grid;grid-template-columns:44px 1fr;gap:var(--s4);padding:18px 0;border-bottom:var(--soft)}
.step:last-child{border-bottom:var(--hair)}
.step__n{font-family:var(--serif);font-size:22px;color:var(--ox)}
.step__t{font-weight:600}
.step .body{margin-top:var(--s1)}
.cases{border-top:var(--hair)}
.case{display:grid;grid-template-columns:120px 1fr;gap:var(--s6);padding:var(--s5) 0;border-bottom:var(--soft)}
.case:last-child{border-bottom:var(--hair)}
.case__n{font-family:var(--mono);font-size:var(--fs-meta);color:var(--ox)}
.case__t{font-family:var(--serif);font-size:23px;font-weight:500}
.cover{border-top:var(--hair)}
.cover__row{display:grid;grid-template-columns:200px 1fr;gap:var(--s5);padding:18px 0;border-bottom:var(--soft)}
.cover__row:last-child{border-bottom:var(--hair)}
.cover__t{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.15}
.faq{font-size:16px}
.faq__item{padding:16px 0;border-top:var(--soft)}
.faq__item:first-child{border-top:var(--hair)}
.faq__item:last-child{border-bottom:var(--hair)}
.faq__q{font-weight:600}
.faq .body{margin-top:6px}
.kv{border-top:var(--hair)}
.kv__row{display:flex;justify-content:space-between;gap:var(--s5);padding:9px 0;border-bottom:var(--soft);font-size:var(--fs-caption)}
.kv__row:last-child{border-bottom:var(--hair)}
.kv__k{color:var(--muted)}
.kv__v{font-family:var(--mono);font-size:var(--fs-meta)}
.defs{border-top:var(--hair);font-size:var(--fs-small)}
.defs__row{display:grid;grid-template-columns:280px 1fr;gap:var(--s5);padding:var(--s3) 0;border-bottom:var(--soft)}
.defs__row:last-child{border-bottom:var(--hair)}
.defs__row--3{grid-template-columns:200px 1fr 200px}
.defs__k{font-weight:600}
.list{padding-left:18px;color:var(--body);font-size:var(--fs-small);line-height:1.7}
.list--num{padding-left:22px;font-size:16px;line-height:1.6}
.list--num li{margin-bottom:var(--s2)}
.toc a{display:block;text-decoration:none;color:var(--body);font-size:var(--fs-caption);padding:5px 0;border-bottom:var(--soft)}
.toc{border-top:var(--hair)}

/* ---------- Tiles & cards ---------- */
.tiles{display:grid;border-top:var(--hair);border-left:var(--hair)}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{padding:18px 20px;border-right:var(--hair);border-bottom:var(--hair);background:var(--white)}
.tile--plain{background:transparent}
.tile--hi{background:var(--cream)}
.tile--hi .tile__t{color:var(--ox)}
.tile__t{font-family:var(--serif);font-size:var(--fs-tile);font-weight:500}
.tile .body{margin-top:var(--s1);font-size:var(--fs-small)}
.tile__link{display:inline-block;margin-top:var(--s3);font-size:var(--fs-small)}
.tile--name{font-family:var(--serif);font-size:19px;font-weight:500;padding:14px 16px}
.card{border:var(--hair);background:var(--white)}
.card--surface{background:var(--surface)}
.card__head{padding:16px 20px;border-bottom:var(--soft);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.card__body{padding:var(--s6)}
.card__foot{padding:12px 20px;border-top:var(--soft);font-size:var(--fs-meta);color:var(--muted)}
.card__row{padding:var(--s5);border-bottom:var(--hair)}
.card__row:last-child{border-bottom:0}
.panel{display:grid;grid-template-columns:1fr 1fr;border:var(--hair)}
.panel__col{padding:22px 24px}
.panel__col+.panel__col{border-left:var(--hair)}
.panel__col--paper{background:var(--paper)}
.panel__col--surface{background:var(--surface)}
.panel__t{font-family:var(--serif);font-size:22px;margin-bottom:10px;color:var(--muted)}
.panel__t--ox{color:var(--ox)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:var(--hair);padding:7px 12px;font-family:var(--serif);font-size:17px}
.chip--ox{border-color:var(--ox);color:var(--ox)}
.stats{display:flex;gap:var(--s8);flex-wrap:wrap;padding-top:18px;border-top:var(--hair)}
.stat__n{font-family:var(--serif);font-size:32px;font-weight:600}
.stat__l{display:block;font-size:var(--fs-meta);color:var(--muted)}
.stats--boxed{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--hair);background:var(--white);padding:0}
.stats--boxed .stat{padding:18px 20px}
.stats--boxed .stat+.stat{border-left:var(--hair)}
.stats--boxed .stat__n{font-size:36px;color:var(--ox);line-height:1}
.stat--big .stat__n{font-size:44px;line-height:1.1}
.stat--big .stat__n small{font-size:20px;font-weight:400;color:var(--muted)}
.stat--ox .stat__n{color:var(--ox)}

/* ---------- Forms ---------- */
.field{display:block}
.field__label{font-size:var(--fs-caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field__input{border:var(--hair);background:var(--white);padding:11px 12px;font-size:var(--fs-small);color:var(--muted);min-height:22px;line-height:22px}
.field__input--filled{color:var(--ink)}
input.field__input,select.field__input{width:100%;display:block;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;border-radius:0;height:46px}
select.field__input{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
select.field__input:invalid{color:var(--muted)}
input.field__input[type=file]{padding:9px 12px;font-size:14px;color:var(--muted)}
input.field__input[type=file]::file-selector-button{font:inherit;border:1px solid var(--ink);background:var(--cream);padding:4px 10px;margin-right:10px}
select.field__input:focus{border-color:var(--ox);box-shadow:0 0 0 1px var(--ox)}
.card--done{border-color:var(--ok)}
.card--done .tile__t{color:var(--ok)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-wrap{display:inline-block;position:relative}
.btn-wrap.is-locked::after{content:attr(title);position:absolute;right:0;bottom:calc(100% + 8px);background:var(--ink);color:var(--cream);font-size:13px;padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.btn-wrap.is-locked:hover::after{opacity:1}
.btn-wrap:not(.is-locked){pointer-events:auto}
.btn.is-pending{position:relative;color:transparent}
.btn.is-pending::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(243,238,228,.35);border-top-color:var(--cream);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-pending::after{animation:none;border-top-color:rgba(243,238,228,.35)}}
input.field__input::placeholder{color:var(--muted)}
input.field__input:focus{border-color:var(--ox);box-shadow:0 0 0 1px var(--ox)}
[hidden]{display:none!important}
.field__input--select::after{content:"▼";float:right;color:var(--ink);font-size:12px}
.field__help{font-size:var(--fs-meta);color:var(--muted);margin-top:5px}
.field__input--num{font-family:var(--mono);text-align:right;color:var(--ink);padding:8px 12px}
.form{border:var(--hair);background:var(--white);padding:var(--s6);display:grid;gap:var(--s4)}
.form__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding-top:var(--s2);border-top:var(--soft)}

/* ---------- Tables ---------- */
.log{font-size:var(--fs-caption)}
.log td{padding:9px 16px;border-bottom:var(--soft)}
.log tr:last-child td{border-bottom:0}
.log__id{font-family:var(--mono);font-size:12px;color:var(--muted)}
.log__ok{color:var(--ok);font-weight:600;text-align:right}
.log__wait{color:var(--ox);font-weight:600;text-align:right}
.log-head{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:var(--hair);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.log-foot{padding:10px 16px;border-top:var(--hair);font-size:var(--fs-meta);color:var(--muted);display:flex;justify-content:space-between}
.pricing{border:var(--hair);font-size:16px}
.pricing td{padding:16px 20px;border-bottom:var(--soft)}
.pricing tr:last-child td{border-bottom:0}
.pricing tr.is-hi{background:var(--paper)}
.pricing__price{font-family:var(--serif);font-size:30px;font-weight:600;text-align:right}
.pricing__price small{font-family:var(--sans);font-size:var(--fs-caption);color:var(--muted);font-weight:400}
.pricing__cta{text-align:right}
.tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ox);font-weight:600;margin-left:var(--s2)}

/* ---------- Calendar ---------- */
.cal-embed{background:var(--white);min-height:420px}
.cal-embed .cal{max-width:720px}
.cal-embed iframe{display:block}

.cal{display:grid;grid-template-columns:1fr 150px;gap:var(--s5);padding:var(--s5)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:var(--fs-meta);text-align:center}
.cal__d{padding:9px 0;background:var(--surface)}
.cal__d--off{background:transparent;color:var(--disabled)}
.cal__d--on{background:var(--ox);color:var(--on-dark)}
.cal__h{color:var(--muted);padding:4px 0}
.slot{border:var(--hair);padding:9px 0;text-align:center;font-size:var(--fs-caption);margin-bottom:var(--s2)}
.slot--on{background:var(--ink);color:var(--cream)}

/* ---------- Gate ---------- */
.gate{position:relative}
.gate__blur{filter:blur(3px);user-select:none;opacity:.7}
.gate__over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(243,238,228,0) 0%,rgba(243,238,228,.92) 30%,rgba(243,238,228,.92) 100%)}
.gate__card{width:440px;border:var(--hair);background:var(--white);padding:var(--s6)}
.gate__card--done{border-color:var(--ok)}
.gate__card--done .tile__t{color:var(--ok)}
/* ---------- Notices ---------- */
.notice{border:1px solid var(--ink);background:var(--white);padding:12px 16px;font-size:var(--fs-small);color:var(--body);display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.notice__dot{width:10px;height:10px;border-radius:50%;background:var(--ink);margin-top:7px;flex:none}
.notice .strong{color:inherit}
.notice a{color:inherit;font-weight:500}
.notice--success{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.notice--success .notice__dot{background:var(--ok)}
.notice--error{border-color:var(--ox);background:var(--err-bg);color:var(--ox)}
.notice--error .notice__dot{background:var(--ox)}
.notice--warning{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.notice--warning .notice__dot{background:var(--warn)}
.notice--info{border-color:var(--rule-soft);background:var(--info-bg);color:var(--body)}
.notice--info .notice__dot{background:var(--muted)}
.notice--banner{border-left:0;border-right:0;padding:12px var(--gutter)}
.notice--banner>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
.notice__close{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
.field--error .field__input{border-color:var(--ox);box-shadow:0 0 0 1px var(--ox)}
.field__error{font-size:var(--fs-meta);color:var(--ox);margin-top:5px}
.field__input.is-invalid{border-color:var(--ox);box-shadow:0 0 0 1px var(--ox)}

/* ---------- Legal ---------- */
.legal__sec{padding:22px 0;border-top:var(--soft)}
.legal__sec .body{margin-bottom:10px}
.legal__body{max-width:68ch}
.sticky{position:sticky;top:24px}
.end-rule{border-top:var(--hair)}
.tile--story{padding:24px;display:flex;flex-direction:column}
.tile--story .tile__link{margin-top:auto;padding-top:var(--s4)}
.tile--story .tile__t{font-size:24px;margin-top:var(--s2)}
.tile--story .body{margin:8px 0 18px}

/* ---------- Router strip ---------- */
.router{background:var(--surface);border-top:var(--hair)}
.router .wrap{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;padding-top:14px;padding-bottom:14px;font-size:var(--fs-small);color:var(--body)}
.router .link{font-weight:600}

/* ---------- Footer ---------- */
.footer{border-top:var(--hair);background:var(--surface)}
.footer .wrap{padding-top:48px;padding-bottom:28px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s8)}
.footer__col a{display:block;text-decoration:none;color:var(--body);font-size:var(--fs-small);padding:3px 0}
.footer__col a:hover{color:var(--ox)}
.footer__col .caps{margin-bottom:var(--s3)}
.footer__bottom{margin-top:36px;padding-top:var(--s4);border-top:var(--soft);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted)}

/* ---------- Product screenshot frame ---------- */
.shot{position:relative}
.shot__label{font-size:var(--fs-caps);letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:8px}
.browser{border:1px solid var(--band-rule);background:var(--band);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.browser__bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#2E2924;border-bottom:1px solid var(--band-rule)}
.browser__dots{display:inline-flex;gap:6px}
.browser__dots i{width:9px;height:9px;border-radius:50%;display:block;opacity:.7}
.browser__dots i:nth-child(1){background:#B5584F}
.browser__dots i:nth-child(2){background:#C9A24A}
.browser__dots i:nth-child(3){background:#6F9A5E}
.browser__url{flex:1;font-family:var(--mono);font-size:11px;color:var(--on-dark-muted);background:var(--band);border:1px solid var(--band-rule);padding:4px 10px;letter-spacing:.02em}
.browser__body{border:0}

/* ---------- Hero ---------- */
.hero{padding-top:60px;padding-bottom:56px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s9);align-items:end}
.hero .lead{max-width:48ch;margin-top:var(--s6)}
.hero__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero__note{margin-top:30px;font-size:var(--fs-small);max-width:60ch}
.close{padding-top:var(--s11);padding-bottom:var(--s11)}
.close__grid{display:grid;grid-template-columns:1fr auto;gap:var(--s8);align-items:center}
.close .h2{font-size:44px;line-height:1.06;max-width:18ch}
.close__actions{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-end}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{--gutter:20px;--fs-display:44px;--fs-h1:38px;--fs-h2:32px;--fs-h2s:28px;--rail-gap:28px;--s10:48px;--s11:56px}
  .hero{padding-top:40px;padding-bottom:40px}
  .hero__grid{gap:36px}
  .display,.h1{max-width:none}
  .lead{font-size:18px}
  .masthead .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;padding-top:12px;padding-bottom:12px}
  .nav{display:contents}
  .nav__links{display:flex;flex-wrap:wrap;gap:4px 18px;grid-column:1 / -1;font-size:14px}
  .nav .btn{grid-column:2;grid-row:1;justify-self:end}
  .masthead .mark{grid-column:1;grid-row:1}
  .btn--nav{padding:9px 14px}
  .wordmark{min-width:52px;font-size:11px;gap:6px}
  .wordmark img{height:28px;width:28px}
  .wordmarks__row{gap:18px 22px}
  .case{grid-template-columns:1fr;gap:6px}
  .step{grid-template-columns:36px 1fr}
  .strip .wrap{padding-top:18px;padding-bottom:18px}
  .strip__t{font-size:20px}
  .gate__card{width:100%}
  .gate__over{align-items:flex-start;padding-top:24px}
  .form{padding:var(--s4)}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{text-align:center}
  .pricing td{padding:12px 12px}
  .pricing__price{font-size:24px}
  .log td{padding:8px 10px}
  .log{font-size:13px}
  .kv__row{gap:12px}
  .kv__v{text-align:right}
  .cover__row{gap:6px}
  .stat--big .stat__n{font-size:36px}
  .close__actions{flex-direction:row;flex-wrap:wrap}
  .router .wrap{flex-direction:column;gap:8px}
  .footer__bottom{flex-direction:column;gap:6px}
  .browser{box-shadow:none}
  .browser__url{font-size:10px}
  .rail,.split,.split--narrow,.grid-2--wide,.hero__grid,.close__grid,.panel,.cal{grid-template-columns:1fr}
  .tiles--3,.tiles--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stats--boxed{grid-template-columns:1fr}
  .stats--boxed .stat+.stat{border-left:0;border-top:var(--hair)}
  .panel__col+.panel__col{border-left:0;border-top:var(--hair)}
  .defs__row,.defs__row--3,.cover__row{grid-template-columns:1fr}
  .close__actions{align-items:flex-start}
  .nav{gap:14px}
  .display,.h1{max-width:none}
}
@media (max-width:560px){
  :root{--fs-display:38px;--fs-h1:32px;--fs-h2:28px;--fs-h2s:26px}
  .tiles--2,.tiles--3,.tiles--5,.grid-2,.footer__grid{grid-template-columns:1fr}
  .pricing__cta{display:none}
  .pricing td:first-child{font-size:15px}
  .tiles--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile--name{font-size:16px;padding:10px 12px}
  .hero__cta .btn{flex:1;text-align:center}
  .row .btn{flex:1 1 auto;text-align:center}
  .stats{gap:20px 28px}
  .log td:first-child{display:none}
  .cal{padding:12px}
}