/* ==========================================================================
   HaveStack, domain pages
   One stylesheet for the four maintenance pages. They share a layout, so a
   shared sheet is the only way they cannot drift apart; the main page and the
   request page stay self contained because each is one of a kind.

   Tokens are the site's, generated in OKLCH at hue 286 with the accent held
   at chroma .200. Radius is zero everywhere. One accent, spent once.
   ========================================================================== */

:root{
  --band:#050506;
  --bg:#0A0A0C;
  --bg-2:#0F0F12;
  --surface:#131317;
  --line-2:#1C1C20;
  --line:#26262B;
  --line-3:#35353A;
  --ink-3:#8D8D94;
  --ink-2:#A3A3A9;
  --ink:#F1F1F4;

  --red:#E64246;
  --red-hover:#D2383D;
  --red-press:#BD2F35;
  --red-text:#FC918E;
  --on-red:#0A0A0C;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --r:0px;
  --maxw:1360px;
  --gut:clamp(18px,3.4vw,44px);
  --pad:clamp(64px,7.5vw,104px);
  --pad-tight:clamp(44px,4.6vw,66px);
  --pad-wide:clamp(84px,10vw,144px);

  --ease:cubic-bezier(.22,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --t-1:90ms; --t-2:180ms; --t-3:320ms; --t-4:560ms;

  --sans:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --elev-1:0 1px 2px rgba(9,8,13,.44),0 2px 6px -2px rgba(9,8,13,.34);
  --lit:inset 0 1px 0 rgba(255,255,255,.055);
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--line) var(--bg-2)}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* the same 4% grain the rest of the site carries */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media (forced-colors:active){ body::after{display:none} }

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
p{text-wrap:pretty}
::selection{background:var(--red);color:var(--on-red)}
:focus-visible{outline:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:block;flex:0 0 auto;fill:currentColor;overflow:visible}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:var(--space-3) var(--space-4);font-size:15px;font-weight:500}
.skip:focus{left:12px;top:12px}

/* ---- type ---------------------------------------------------------------- */
.h1{font-size:clamp(34px,5.4vw,68px);line-height:1.03;font-weight:400;letter-spacing:-.032em;text-wrap:balance}
.h2{font-size:clamp(24px,2.6vw,34px);line-height:1.12;font-weight:400;letter-spacing:-.024em;text-wrap:balance}
.h3{font-size:clamp(17px,1.4vw,20px);line-height:1.3;font-weight:500;letter-spacing:-.014em}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:58ch}
.kicker{
  display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  font-variant-ligatures:no-common-ligatures;
}

/* ---- header -------------------------------------------------------------- */
.head{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:var(--space-4);height:66px}
.brand{display:flex;align-items:center;gap:9px;padding:var(--space-1)}
.brand img{width:23px;height:23px}
.brand span{font-size:17px;font-weight:500;letter-spacing:-.03em}
.crumb{display:flex;align-items:center;gap:var(--space-3);margin-right:auto;font-size:14px;color:var(--ink-3);min-width:0}
.crumb a,.crumb b{display:inline-block;padding-block:var(--space-1)}
.crumb a{transition:color var(--t-2) var(--ease)}
.crumb .sep{color:var(--ink-3)}
.crumb b{font-weight:400;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--ink)} }
.brand:focus-visible,.crumb a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---- the call to action -------------------------------------------------- */
.btn{
  all:unset;position:relative;display:inline-flex;align-items:center;gap:var(--space-3);
  box-sizing:border-box;min-height:46px;padding:13px 22px 12px;
  border:1px solid var(--ink);border-radius:var(--r);
  background:var(--ink);color:var(--on-red);
  box-shadow:var(--elev-1),inset 0 1px 0 rgba(255,255,255,.7);
  font-size:16px;font-weight:500;letter-spacing:-.008em;line-height:1.1;white-space:nowrap;
  cursor:pointer;overflow:hidden;user-select:none;
  transition:border-color var(--t-2) var(--ease),transform var(--t-1) var(--ease),box-shadow var(--t-1) var(--ease);
}
.btn-face{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--space-3)}
.btn::before,.btn::after{
  content:"";position:absolute;top:50%;width:9em;aspect-ratio:1;border-radius:50%;
  background:var(--red);
  transition:transform var(--t-4) var(--ease),background var(--t-2) var(--ease);
}
.btn::before{left:0;transform:translate(-9.5em,-50%)}
.btn::after{right:0;transform:translate(9.5em,-50%)}
.btn:focus-visible::before{transform:translate(-1.2em,-50%)}
.btn:focus-visible::after{transform:translate(1.2em,-50%)}
.btn:focus-visible{border-color:var(--red);outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:translate(-1.2em,-50%)}
  .btn:hover::after{transform:translate(1.2em,-50%)}
  .btn:hover{border-color:var(--red)}
  .btn:hover .ar{transform:translate(2px,-2px)}
}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,0),inset 0 1px 2px rgba(9,8,13,.30);border-color:var(--red-press)}
.btn:active::before,.btn:active::after{background:var(--red-press)}
.btn .ar{opacity:.7;transition:transform var(--t-2) var(--ease-out)}
.head .btn{min-height:38px;padding:9px 16px 8px;font-size:15px}
.ar{font-size:.95em;line-height:1}

.tlink{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);font-size:15px;font-weight:500;padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;transition:opacity var(--t-2) var(--ease)}
.tlink .ar{transition:transform var(--t-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .tlink:hover::after{opacity:1} .tlink:hover .ar{transform:translate(2px,-2px)} }
.tlink:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ==========================================================================
   MASTHEAD
   The frame runs behind the whole masthead and is held down hard where the
   type sits, then released. Same treatment as the maintenance column on the
   main page, so arriving here does not feel like a different site.
   ========================================================================== */
.mast{position:relative;overflow:hidden;padding-block:clamp(56px,6.4vw,96px) clamp(48px,5.4vw,80px);border-bottom:1px solid var(--line)}
.mast::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.mast::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(10,10,12,.95) 0%, rgba(10,10,12,.93) 42%, rgba(10,10,12,.72) 68%, rgba(10,10,12,.55) 100%);
}
.mast > .wrap{position:relative;z-index:1}
.mast .kicker{margin-bottom:var(--space-4)}
.mast .lead{margin-top:var(--space-5)}

/* the three facts under the masthead heading */
.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);
  margin-top:clamp(38px,4.2vw,58px);padding-top:var(--space-5);
  border-top:1px solid var(--line);max-width:800px;
}
.facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin-top:var(--space-2);font-size:15.5px;font-weight:500;line-height:1.4}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.sheet{
  --side-gap:clamp(32px,5vw,88px);
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:0 var(--side-gap);
  padding-block:clamp(56px,6vw,88px) 0;
}
.rail-in{position:sticky;top:96px}
.rail h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:var(--space-4)}
.toc li{margin:0}
.toc a{
  position:relative;display:block;padding:var(--space-2) 0 var(--space-2) var(--space-4);
  font-size:14.5px;line-height:1.4;color:var(--ink-3);
  transition:color var(--t-2) var(--ease);
}
.toc a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);
  transition:background var(--t-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .toc a:hover{color:var(--ink)} .toc a:hover::before{background:var(--line-3)} }
.toc a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"]::before{background:var(--red)}

.art{min-width:0;padding-bottom:clamp(56px,6vw,88px)}
.art > section{padding-block:clamp(34px,3.8vw,52px)}
.art > section:first-child{padding-top:0}
.art > section + section{border-top:1px solid var(--line-2)}
.art h2{scroll-margin-top:96px}
.art p{margin-top:var(--space-5);font-size:16.5px;line-height:1.68;color:var(--ink-2);max-width:68ch}
.art h2 + p{margin-top:var(--space-5)}
.art h3{margin-top:clamp(32px,3.4vw,44px)}
.art h3 + p{margin-top:var(--space-3)}
.art strong{color:var(--ink);font-weight:500}
.art a:not(.tlink):not(.btn){
  color:var(--ink);box-shadow:inset 0 -1px 0 var(--line-3);
  transition:box-shadow var(--t-2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .art a:not(.tlink):not(.btn):hover{box-shadow:inset 0 -1px 0 var(--red)} }
.art a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* a list of practice points, one rule per group and none per row */
.points{margin-top:clamp(26px,2.8vw,36px);columns:2;column-gap:clamp(28px,3.4vw,56px)}
.points li{
  break-inside:avoid;position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-4);
  font-size:15px;line-height:1.5;color:var(--ink-2);
}
.points li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--line-3)}

/* the one raised plane in the article: what the contract actually says */
.pact{
  margin-top:clamp(32px,3.4vw,44px);background:var(--surface);box-shadow:var(--lit);
  padding:clamp(26px,3vw,40px);border-left:2px solid var(--red);
}
.pact h3{margin-top:0}
.pact ul{margin-top:var(--space-4)}
.pact li{
  position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-5);
  font-size:15px;line-height:1.55;color:var(--ink-2);
}
.pact li::before{
  content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;
  border:1px solid var(--line-3);
}

/* a measured figure row: numbers that are definitions, not claims */
.defs{margin-top:clamp(30px,3.2vw,42px);border-top:1px solid var(--line)}
.defs > div{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:var(--space-3) clamp(20px,2.6vw,40px);
  padding:var(--space-5) 0;border-bottom:1px solid var(--line-2);
}
.defs dt{font-size:15px;font-weight:500;color:var(--ink)}
.defs dd{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:60ch}

/* references */
.refs{margin-top:var(--space-5)}
.refs li{
  display:grid;grid-template-columns:minmax(0,26px) minmax(0,1fr);gap:var(--space-3);
  padding:var(--space-3) 0;border-bottom:1px solid var(--line-2);
  font-size:14.5px;line-height:1.5;color:var(--ink-2);
}
.refs span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.refs a{color:var(--ink)}

/* other domains */
.siblings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,3.2vw,42px)}
.sib{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:var(--space-3);
  background:var(--bg);padding:var(--space-5);transition:background var(--t-3) var(--ease);
}
.sib::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-4) var(--ease-out)}
.sib .ic{font-size:19px;color:var(--ink-3);transition:color var(--t-2) var(--ease)}
.sib b{font-size:16px;font-weight:500;letter-spacing:-.012em;line-height:1.3}
.sib .ar{color:var(--ink-3);transition:transform var(--t-2) var(--ease-out),color var(--t-2) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .sib:hover{background:var(--surface)}
  .sib:hover::before{transform:scaleX(1)}
  .sib:hover .ic,.sib:hover .ar{color:var(--ink)}
  .sib:hover .ar{transform:translateX(3px)}
}
.sib:focus-visible{outline:2px solid currentColor;outline-offset:-3px}

/* ==========================================================================
   ENGAGEMENT  the one loud moment, as on the main page
   ========================================================================== */
.cta-sect{background:var(--surface);border-top:2px solid var(--red);box-shadow:var(--lit);padding-block:var(--pad-wide)}
.cta-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:end}
.cta-say p{margin-top:var(--space-5);font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.cta-steps{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.cta-steps li{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-4)}
.cta-steps li::before{content:'';position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--line-3)}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--band);color:var(--ink-2);padding-block:clamp(44px,5vw,64px) var(--space-5);border-top:1px solid var(--line)}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--space-5) clamp(28px,4vw,64px);align-items:center}
.foot-brand{display:flex;align-items:center;gap:9px;margin-right:auto;padding-block:var(--space-1)}
.foot-brand img{width:23px;height:23px}
.foot-brand span{font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.foot a{display:inline-block;padding-block:var(--space-1);font-size:14.5px;color:var(--ink-2);transition:color var(--t-2) var(--ease)}
@media (hover:hover) and (pointer:fine){ .foot a:hover{color:var(--ink)} }
.foot a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.foot-bar{margin-top:clamp(28px,3vw,40px);padding-top:var(--space-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}
.foot-bar p{font-size:13.5px;color:var(--ink-3)}

/* ---- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease),transform 560ms var(--ease-out)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .sheet{grid-template-columns:1fr;gap:var(--space-7)}
  .rail-in{position:static}
  .toc{columns:2;column-gap:var(--space-6)}
  .cta-band{grid-template-columns:1fr;gap:var(--space-7);align-items:start}
  .head .btn{display:none}
  .siblings{grid-template-columns:1fr}
}
@media (max-width:719px){
  .points,.toc{columns:1}
  .facts{grid-template-columns:1fr;gap:var(--space-4)}
  .defs > div{grid-template-columns:1fr;gap:var(--space-2)}
  .crumb .sep:first-of-type,.crumb .home{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
}
@media (prefers-contrast:more){
  :root{--ink-2:#CFCFD4;--ink-3:#BABAC0;--line:#4A4A50;--line-3:#5C5C63}
}
@media (forced-colors:active){ :focus-visible{outline:3px solid Highlight;outline-offset:2px} }
@media print{
  :root{--bg:#fff;--bg-2:#fff;--surface:#fff;--ink:#000;--ink-2:#222;--ink-3:#444;--line:#bbb;--line-2:#ddd;--red:#000;--band:#fff}
  .head,.cta-sect,.siblings,.rail{display:none}
  .mast::before,.mast::after{display:none}
  body::after{display:none}
  .rv{opacity:1 !important;transform:none !important}
  .sheet{display:block}
  .art a::after{content:' (' attr(href) ')';font-size:8pt;color:#555}
}