/* Hallmark · macrostructure: custom (shop drawing sheet) · tone: utilitarian craft · theme: custom (design/tokens.json, navy shaker + brass) · nav N1b · footer Ft6 minimal
 * signature: elevation ↔ quote line linked by :has() on hover/focus, no script
 */
@font-face{font-family:Archivo;src:url('/assets/Archivo.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cp-ground);color:var(--cp-ink);font-family:var(--cp-font);font-size:var(--cp-size-body);line-height:var(--cp-lh-body);font-variation-settings:'wdth' var(--cp-body-wdth)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cp-primary);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--cp-focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--cp-space-4);top:-100px;background:var(--cp-primary);color:var(--cp-on-primary);padding:var(--cp-space-3) var(--cp-space-4);z-index:2}
.skip-link:focus{top:var(--cp-space-4)}
.shell{width:min(1180px,100% - 2*var(--cp-space-5));margin-inline:auto}
h1,h2,h3{color:var(--cp-primary);margin:0;font-variation-settings:'wdth' var(--cp-heading-wdth);letter-spacing:var(--cp-heading-tracking);text-wrap:balance;overflow-wrap:anywhere;min-width:0}
h1{font-size:var(--cp-size-hero);line-height:var(--cp-lh-hero);font-weight:var(--cp-display-wght);font-variation-settings:'wdth' var(--cp-display-wdth);letter-spacing:var(--cp-display-tracking)}
h2{font-size:var(--cp-size-display);line-height:var(--cp-lh-display);font-weight:var(--cp-display-wght);font-variation-settings:'wdth' var(--cp-display-wdth)}
h3{font-size:var(--cp-size-h3);line-height:var(--cp-lh-h3);font-weight:var(--cp-heading-wght)}
p{margin:0;max-width:62ch}
.small{font-size:var(--cp-size-body-sm);line-height:var(--cp-lh-body-sm)}
.muted{color:var(--cp-muted)}
.callout,.state,.titleblock,.quote th,.when,.check b,.check-head,.pricing-table thead th{font-size:var(--cp-size-callout);line-height:var(--cp-lh-callout);font-weight:var(--cp-callout-wght);font-variation-settings:'wdth' var(--cp-callout-wdth);letter-spacing:var(--cp-callout-tracking);text-transform:uppercase}
.quote td,.pricing-table td,.check span:last-child,.count{font-variant-numeric:tabular-nums}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--cp-space-5);padding-block:var(--cp-space-5);border-bottom:var(--cp-stroke-line) solid var(--cp-line)}
.brand img{width:clamp(180px,24vw,250px)}
nav{display:flex;align-items:center;gap:var(--cp-space-5)}
nav a{color:var(--cp-ink);font-weight:var(--cp-strong-wght);text-decoration:none;white-space:nowrap;min-height:var(--cp-touch-min);display:inline-flex;align-items:center}
nav a:hover{color:var(--cp-primary);text-decoration:underline}
nav .signin{border:var(--cp-stroke-line) solid var(--cp-primary);color:var(--cp-primary);padding-inline:var(--cp-space-4);border-radius:var(--cp-radius-sm)}
nav .signin:hover{background:var(--cp-primary);color:var(--cp-on-primary);text-decoration:none}

/* Hero: copy + the shop drawing */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cp-space-8);align-items:start;padding-block:var(--cp-space-8) var(--cp-space-9)}
.hero-copy{display:grid;gap:var(--cp-space-5);padding-top:var(--cp-space-6)}
.state{color:var(--cp-accent)}
.intro{font-size:var(--cp-size-h3);line-height:var(--cp-lh-h3);color:var(--cp-ink)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cp-space-5);margin-top:var(--cp-space-3)}
.button{display:inline-flex;align-items:center;min-height:var(--cp-touch-glove);padding-inline:var(--cp-space-6);background:var(--cp-primary);color:var(--cp-on-primary);font-weight:var(--cp-strong-wght);text-decoration:none;border-radius:var(--cp-radius-sm);white-space:nowrap;transition:background var(--cp-motion-fast) var(--cp-motion-ease)}
.button:hover{background:var(--cp-primary-press)}
.button:active{transform:translateY(1px)}
.text-link{font-weight:var(--cp-strong-wght);min-height:var(--cp-touch-min);display:inline-flex;align-items:center;white-space:nowrap}

.sheet{margin:0;border:var(--cp-stroke-object) solid var(--cp-drawing);background:var(--cp-surface)}
.titleblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:var(--cp-stroke-line) solid var(--cp-drawing);color:var(--cp-muted)}
.titleblock span{padding:var(--cp-space-2) var(--cp-space-3);border-left:var(--cp-stroke-hair) solid var(--cp-line)}
.titleblock span:first-child{border-left:0}
.titleblock b{display:block;color:var(--cp-ink)}
.elevation{display:block;width:100%;height:auto;padding:var(--cp-space-4) var(--cp-space-4) 0}
.elevation .box rect,.elevation .box path{fill:none;stroke:var(--cp-drawing);stroke-width:2.4;transition:fill var(--cp-motion-fast) var(--cp-motion-ease)}
.elevation .box .panel{stroke-width:1.2}
.elevation .box{cursor:pointer}
.elevation .pull{stroke:var(--cp-accent)!important;stroke-width:3!important;stroke-linecap:square}
.elevation .counter{fill:var(--cp-accent)}
.elevation .kick{fill:var(--cp-drawing)}
.elevation .dim path{fill:none;stroke:var(--cp-muted);stroke-width:1.2}
.elevation text{fill:var(--cp-ink);font-family:var(--cp-font);font-size:15px;font-weight:700;text-anchor:middle;font-variation-settings:'wdth' 75}
.elevation .tags rect{fill:var(--cp-surface);stroke:var(--cp-drawing);stroke-width:1.4;transition:fill var(--cp-motion-fast) var(--cp-motion-ease)}
.elevation .box:hover rect:not(.panel){fill:var(--cp-accent-soft)}

.quote{width:100%;border-collapse:collapse;margin-top:var(--cp-space-4);border-top:var(--cp-stroke-line) solid var(--cp-drawing)}
.quote th,.quote td{padding:var(--cp-space-2) var(--cp-space-4);text-align:right;border-bottom:var(--cp-stroke-hair) solid var(--cp-line);transition:background var(--cp-motion-fast) var(--cp-motion-ease)}
.quote th:first-child{text-align:left}
.quote thead th{color:var(--cp-muted)}
.quote tbody th{color:var(--cp-primary)}
.quote tfoot th{text-align:right;color:var(--cp-muted)}
.quote tfoot td{font-weight:var(--cp-display-wght);color:var(--cp-primary);font-size:var(--cp-size-h3)}
/* The signature: point at a box in the drawing, its quote line lights up. */
.sheet:has(#el-w3030:hover) .q-w3030,.sheet:has(#el-b24:hover) .q-b24,.sheet:has(#el-sb36:hover) .q-sb36,.sheet:has(#el-db36:hover) .q-db36{background:var(--cp-accent-soft)}
.quote tr:hover{background:var(--cp-surface-2)}
.sheet figcaption{padding:var(--cp-space-3) var(--cp-space-4);font-size:var(--cp-size-caption);line-height:var(--cp-lh-caption);color:var(--cp-muted)}

/* Job log */
.job{background:var(--cp-primary);color:var(--cp-on-primary);padding-block:var(--cp-space-9)}
.job h2,.job h3{color:var(--cp-on-primary)}
.job-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cp-space-7);align-items:end;padding-bottom:var(--cp-space-7);border-bottom:var(--cp-stroke-line) solid var(--cp-brand-brass)}
.job-head p{opacity:.88}
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--cp-space-5);padding-block:var(--cp-space-5);border-bottom:var(--cp-stroke-hair) solid var(--cp-brand-maple)}
.log li div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--cp-space-5)}
.log p{opacity:.88}
.when{color:var(--cp-brand-brass);padding-top:var(--cp-space-1)}
.log .flag h3{color:var(--cp-brand-brass)}

/* Curb */
.curb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cp-space-8);align-items:center;padding-block:var(--cp-space-9)}
.curb-copy{display:grid;gap:var(--cp-space-5)}
.checklist{border:var(--cp-stroke-line) solid var(--cp-line);border-radius:var(--cp-radius-md);background:var(--cp-surface);overflow:hidden}
.check-head,.check,.check-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--cp-space-4);align-items:center;padding:var(--cp-space-3) var(--cp-space-4);min-height:var(--cp-touch-glove);border-bottom:var(--cp-stroke-hair) solid var(--cp-line)}
.check-head{grid-template-columns:minmax(0,1fr) auto;background:var(--cp-surface-2);color:var(--cp-muted)}
.count{color:var(--cp-danger);font-size:var(--cp-size-h3)}
.check b{color:var(--cp-primary);margin-right:var(--cp-space-2)}
.mark{width:22px;height:22px;border:2px solid var(--cp-drawing);border-radius:var(--cp-radius-sm);position:relative}
.ok .mark{background:var(--cp-success);border-color:var(--cp-success)}
.ok .mark::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--cp-on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bad{background:var(--cp-danger-soft)}
.bad .mark{border-color:var(--cp-danger)}
.bad span:last-child{color:var(--cp-danger);font-weight:var(--cp-strong-wght)}
.check-foot{grid-template-columns:1fr;border-bottom:0;color:var(--cp-success);font-weight:var(--cp-strong-wght)}

/* Who */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cp-space-7);padding-block:var(--cp-space-8);border-top:var(--cp-stroke-line) solid var(--cp-line);border-bottom:var(--cp-stroke-line) solid var(--cp-line)}
.who div{display:grid;gap:var(--cp-space-3);align-content:start}
.who div:last-child h3{color:var(--cp-muted)}

/* Pricing */
.pricing{padding-block:var(--cp-space-9) var(--cp-space-8);display:grid;gap:var(--cp-space-6)}
.pricing-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cp-space-7);align-items:end}
.table-wrap{overflow-x:auto}
.pricing-table{width:100%;border-collapse:collapse;min-width:520px}
.pricing-table th,.pricing-table td{padding:var(--cp-space-4);text-align:right;border-bottom:var(--cp-stroke-hair) solid var(--cp-line)}
.pricing-table th:first-child{text-align:left}
.pricing-table thead th{color:var(--cp-muted);border-bottom:var(--cp-stroke-line) solid var(--cp-drawing)}
.pricing-table tbody th{font-size:var(--cp-size-h3);color:var(--cp-primary);font-variation-settings:'wdth' var(--cp-heading-wdth)}
.amount{font-size:var(--cp-size-h3);font-weight:var(--cp-display-wght);color:var(--cp-ink)}
.unit{color:var(--cp-muted)}
.pricing-table tr[data-plan="Team"]{background:var(--cp-accent-soft)}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--cp-space-7);padding-block:var(--cp-space-8)}
.faq-list{border-top:var(--cp-stroke-line) solid var(--cp-drawing)}
details{border-bottom:var(--cp-stroke-hair) solid var(--cp-line)}
summary{cursor:pointer;min-height:var(--cp-touch-glove);display:flex;align-items:center;justify-content:space-between;gap:var(--cp-space-4);font-weight:var(--cp-strong-wght);color:var(--cp-primary);list-style:none;padding-block:var(--cp-space-3)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:var(--cp-size-h2);color:var(--cp-accent);line-height:1}
details[open] summary::after{content:"–"}
details p{padding-bottom:var(--cp-space-5)}

/* Access */
.access{background:var(--cp-surface-2);border-top:var(--cp-stroke-object) solid var(--cp-accent);padding-block:var(--cp-space-9)}
.access-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cp-space-7)}
.access-inner > div{display:grid;gap:var(--cp-space-4)}
.mail a{font-size:var(--cp-size-h2);font-weight:var(--cp-display-wght);font-variation-settings:'wdth' var(--cp-heading-wdth);overflow-wrap:anywhere}

.site-footer{display:flex;align-items:center;gap:var(--cp-space-4);padding-block:var(--cp-space-6);font-size:var(--cp-size-body-sm)}
.site-footer p{flex:1}
.site-footer a{white-space:nowrap}

/* 404 */
.notfound{padding-block:var(--cp-space-9);display:grid;gap:var(--cp-space-5);justify-items:start}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);gap:var(--cp-space-7);padding-top:var(--cp-space-6)}
  .hero-copy{padding-top:0}
  .job-head,.curb,.pricing-head,.faq,.access-inner{grid-template-columns:minmax(0,1fr)}
  .who{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .shell{width:calc(100% - 2*var(--cp-space-4))}
  .site-header{flex-wrap:wrap;gap:var(--cp-space-2)}
  nav{gap:var(--cp-space-4);flex-wrap:wrap}
  nav a:not(.signin):not([href="#pricing"]){display:none}
  .titleblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .titleblock span:nth-child(3){border-left:0}
  .titleblock span:nth-child(n+3){border-top:var(--cp-stroke-hair) solid var(--cp-line)}
  .log li{grid-template-columns:minmax(0,1fr);gap:var(--cp-space-2)}
  .log li div{grid-template-columns:minmax(0,1fr);gap:var(--cp-space-2)}
  .quote th,.quote td{padding-inline:var(--cp-space-2)}
  .site-footer{flex-wrap:wrap}
  h1{font-size:var(--cp-size-display);line-height:var(--cp-lh-display)}
  .mail a{font-size:var(--cp-size-h3)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important}
}