/* Atemkraft — atemkraft.dev. Same system as atemkraft.ca (Instrument Serif +
   Figtree, identical component set), recoloured for a dark surface instead of
   the .ca site's warm sand/paper. Deliberately the same near-black and azure
   as the Kraftwork app icon and the .dev holding page it replaces — one
   engineering identity across the app and the site that talks about it.
   FONTS: loaded from Google here for review. Before deploying, self-host them —
   the site policy is zero external requests (see 14-website/README.md). */
/* Self-hosted, because the site policy is zero external requests and a
   Google Fonts @import is a request to Google on every page view — which
   would also make the 'no trackers' claim on these pages untrue. Latin
   subsets only, 109 KB total. Both families are SIL Open Font License. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/InstrumentSerif-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/InstrumentSerif-400-italic.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Figtree-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Figtree-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Figtree-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Figtree-700-normal.woff2') format('woff2')}

:root{
  --bg:#0D1119;--panel:#131A26;--panel-deep:#182131;--line:#232C3D;
  --ink:#E8EAED;--muted:#93A0B0;--faint:#6B7789;
  --azure:#4A90E0;--azure-light:#7FC4F0;--azure-deep:#3D7BC4;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,5vw,64px);--container:1120px;--head-h:87px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:720px}
h1,h2,h3{color:var(--ink);font-family:var(--serif);font-weight:400;letter-spacing:-.02em;margin:0;line-height:1.1}
h1{font-size:clamp(34px,6.4vw,76px)}
h2{font-size:clamp(30px,3.8vw,44px);line-height:1.15}
h3{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
p{margin:0}
a{color:var(--azure-light);text-decoration:none;border-bottom:1px solid rgba(127,196,240,.3);padding-bottom:1px;transition:border-color .14s var(--ease)}
a:hover{border-bottom-color:var(--azure-light)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.eyebrow.acc{color:var(--azure-light)}
.lede{font-size:20px;color:var(--muted)}
.stripe{height:3px;background:linear-gradient(90deg,var(--azure-deep),var(--azure-light));border-radius:2px}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(13,17,25,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:32px;padding-top:14px;padding-bottom:14px}
.site-head .brand{border:0;display:flex}
.site-head .brand img{height:58px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{border:0;font-size:15px;color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--sans);padding:13px 22px;border:1px solid var(--azure);border-radius:7px;background:var(--azure);color:#0A0E16;cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease)}
.btn:hover{background:var(--azure-light);border-color:var(--azure-light)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--azure-light);background:transparent;color:var(--azure-light)}
.btn.lg{padding:16px 30px;font-size:17px}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font:600 14px var(--sans);color:var(--ink);cursor:pointer}

/* sections */
/* Tightened 12 Aug 2026 — the original clamp(64px,9vw,120px) read as sparse
   once the pages carried real content instead of holding-page air. */
section{padding:clamp(28px,3.6vw,48px) 0}
section.tight{padding:clamp(22px,2.8vw,34px) 0}
.panel{background:var(--panel)}
.panel-deep{background:var(--panel-deep)}
.accent{background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(74,144,224,.16),transparent 60%),var(--panel-deep);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.accent h2,.accent h3{color:#fff}
.accent .eyebrow{color:var(--azure-light)}
.accent p{color:#C7CEDA}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.stack{display:grid;gap:18px;align-content:start}
.stack.start{justify-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
/* Product cards share their rows, so the icon, pills, heading, body and
   footer line up straight across all three. Each card is its own grid, so
   without subgrid every row was only as tall as that card's own content
   and nothing agreed with its neighbour. Applies only where a card opts in
   with .rows, because the Applied AI cards have no icon or footer. */
.grid3:has(.card.rows){align-items:stretch}
.card.rows{grid-row:span 6;grid-template-rows:subgrid;align-content:stretch}
/* Keeps the icon row occupied in a card that has no icon yet. */
.card .appicon.placeholder{visibility:hidden}
/* Two facts, two pills, and a row each — side by side they fit for a
   one-word platform list and wrapped for a four-word one, so Fulcrum's
   card spent two lines on pills while Kraftwork's spent one. A row each
   costs nothing and is the same shape in every card. */
.tag.plain{color:var(--muted);background:rgba(255,255,255,.04);border-color:var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:14px;align-content:start}
.card.warm{background:var(--panel-deep);border-color:var(--line)}
.photo{border-radius:12px;object-fit:cover;width:100%}
figure{margin:0}
blockquote{margin:0;font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);line-height:1.3;color:var(--ink)}
.accent blockquote{color:#fff}
cite{display:block;margin-top:14px;font:400 14px var(--sans);font-style:normal;color:var(--faint)}
.tag{display:inline-flex;justify-self:start;width:fit-content;align-items:center;font:600 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--azure-light);background:rgba(127,196,240,.1);border:1px solid rgba(127,196,240,.25);border-radius:100px;padding:6px 12px}
/* In a row of parallel cards (e.g. the home page pillars), a content-width
   pill looks mismatched next to its siblings — "Product engineering" is
   twice as wide as "Hardware". .block stretches to the grid column's full
   width instead, so every pill in the row matches, whatever the column
   width turns out to be. */
.tag.block{justify-self:stretch;width:auto;justify-content:center}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--muted)}
.ticks li{display:grid;grid-template-columns:16px 1fr;gap:12px}
.ticks svg{margin-top:5px}
dl.faq{margin:0;display:grid;gap:0}
dl.faq div{border-top:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:32px}
dl.faq dt{font-weight:600;color:var(--ink)}
dl.faq dd{margin:0;color:var(--muted)}
.meta{font-size:14px;color:var(--faint)}
form{display:grid;gap:18px}
label{display:grid;gap:8px;align-content:start;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hint{font:400 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--faint)}
input,select,textarea{font:400 16px var(--sans);color:var(--ink);background:var(--panel-deep);border:1px solid var(--line);border-radius:7px;padding:13px 14px;width:100%;outline:none;transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--azure);box-shadow:0 0 0 3px rgba(74,144,224,.22)}
textarea{resize:vertical;min-height:120px}
select{padding-right:38px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A0B0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* footer */
.site-foot{border-top:1px solid var(--line);background:var(--panel);padding:30px 0 24px}
.site-foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start}
.site-foot img{height:40px;width:auto}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:15px}
.foot-links a{border:0;color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.legal{font-size:11px;color:var(--faint);max-width:34ch;text-align:right;line-height:1.5}

@media (max-width:860px){
  .split,.grid3,.grid2,.two,dl.faq div{grid-template-columns:1fr}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:14px;margin:0;padding:14px 0 4px}
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .site-head .wrap{flex-wrap:wrap}
  .site-head .brand img{height:42px}
  .site-head .wrap{gap:16px;padding-top:10px;padding-bottom:10px}
  .site-foot .wrap{grid-template-columns:1fr}
  .legal{text-align:left}
}
@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade .9s var(--ease) both}
  .fade.d1{animation-delay:.12s}.fade.d2{animation-delay:.24s}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* The unannounced product. Dashed edge and a quieter surface so it reads as
   a placeholder on purpose rather than a card that failed to load. */
.card.soon{background:transparent;border-style:dashed;border-color:var(--line)}
.card.soon h3{color:var(--muted)}
.card.soon .tag{color:var(--muted);background:rgba(255,255,255,.03);border-color:var(--line)}




/* ── Product screenshots ────────────────────────────────────────────────
   No gallery. Each capture sits beside the claim it proves, alternating
   sides down the page — a screenshot row on its own asks the reader to work
   out what they're looking at, which is exactly the wrong job to hand them. */
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:center;margin:0}
.feature + .feature{margin-top:clamp(26px,3.6vw,44px)}
.feature .shot{display:flex;justify-content:center}
.feature .shot img{width:100%;max-width:280px;height:auto;border-radius:22px;border:1px solid var(--line);background:var(--panel);display:block}
.feature .shot.watch img{max-width:180px;border-radius:16px}
.feature.flip .shot{order:2}
/* `.flip` reorders the children but the column widths stayed where they
   were, so a flipped image landed in the column sized for text: left-hand
   screenshots came out larger than right-hand ones on the same page.
   Mirror the template so the proportions follow the image, not the slot. */
.feature.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.feature h3{margin-bottom:6px}
.feature .why + .why{margin-top:20px}
.feature .why p{color:var(--muted);font-size:15.5px;margin:0}
/* Card prose is the same prose — it was 17px ink-on-inline-style while the
   feature blocks were 15.5px muted, which read as two body sizes on one
   page. :not(.meta) leaves genuine captions alone. */
.card p:not(.meta){color:var(--muted);font-size:15.5px}
/* Body prose outside a .card or .feature. Without this the only options
   were 20px .lede or 14px faint .meta, so ordinary sentences ended up
   dressed as captions. */
.note{color:var(--muted);font-size:15.5px}
/* One rendered size for every wide screenshot, whatever column it sits in.
   The hero's image column is 1.18fr and a feature's is 1.25fr, so the same
   1800x1064 capture came out slightly larger further down the page — which
   reads as sloppiness rather than as emphasis. */
.prodshot.wide img,.feature .shot.wide img{max-width:680px;width:100%}

/* Constrained and centred — at width:100% a 1600px Mac screenshot filled the
   whole 1120px container and dwarfed the phone shots beside it in the flow. */
.shot-wide{width:100%;max-width:760px;margin:0 auto;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:block}
.shot-note{font:400 12.5px/1.5 var(--sans);color:var(--muted);margin:0;text-align:center}

@media (max-width:860px){
  .feature,.feature.flip{grid-template-columns:1fr;gap:24px}
  .feature.flip .shot{order:0}
  .feature .shot img{max-width:240px}
}

.buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.spec{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 0}
.spec span{font:500 13px/1 var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:6px 12px}
.status{font:600 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}

/* ── Product sub-nav ───────────────────────────────────────────────────
   The products page is long and the three products read as one scroll.
   A second sticky bar under the header lets you jump between them without
   going back up. It sits BELOW the header rather than replacing it, so the
   site nav never disappears. */
.subnav{position:sticky;top:var(--head-h);z-index:25;background:rgba(13,17,25,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-top:9px;padding-bottom:9px}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .lbl{font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:8px;white-space:nowrap}
.subnav a{border:0;font:600 13.5px/1 var(--sans);color:var(--muted);padding:8px 14px;border-radius:100px;white-space:nowrap;transition:color .14s var(--ease),background .14s var(--ease)}
.subnav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.subnav a[aria-current="true"]{color:var(--azure-light);background:rgba(127,196,240,.12)}

/* Anchors have to clear BOTH sticky bars or the heading lands underneath. */
/* Any anchor target, not just sections — the Madrona card is a div, and
   without this it lands underneath both sticky bars. */
[id]{scroll-margin-top:calc(var(--head-h) + 64px)}

@media (max-width:860px){ :root{--head-h:80px} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* Mac captures are landscape — they need the wide column, not the phone column. */
.feature:has(.shot.wide){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.feature.flip:has(.shot.wide){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.feature .shot.wide img{max-width:none;width:100%;border-radius:12px}
@media (max-width:860px){ .feature:has(.shot.wide),.feature.flip:has(.shot.wide){grid-template-columns:1fr} }

a.card{text-decoration:none;transition:border-color .14s var(--ease),transform .14s var(--ease)}
a.card:hover{border-color:var(--azure);transform:translateY(-2px)}
a.card h3{color:var(--ink)}

/* ── Product page hero ─────────────────────────────────────────────────
   The product has to be visible without scrolling. Identity on the left,
   a real screen on the right, and less top padding than a marketing page
   would normally take. */
section.prodtop{padding-top:clamp(20px,2.4vw,30px);padding-bottom:clamp(20px,2.4vw,30px)}
.prodhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);gap:clamp(28px,5vw,60px);align-items:center}
.prodhero.wide{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.prodid{display:flex;gap:18px;align-items:center}
.appicon{width:72px;height:72px;border-radius:17px;flex:0 0 auto;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.prodid h1{font-size:clamp(32px,4vw,46px);line-height:1}
.prodshot{display:flex;justify-content:center}
.prodshot img{width:100%;max-width:270px;height:auto;border-radius:20px;border:1px solid var(--line);background:var(--panel);display:block}
.prodshot.wide img{max-width:none;border-radius:12px}
.card .appicon{width:44px;height:44px;border-radius:11px;box-shadow:none;margin-bottom:2px}
@media (max-width:860px){ .prodhero,.prodhero.wide{grid-template-columns:1fr} .prodshot img{max-width:230px} }

/* Hard breaks in the hero are set for desktop measure. Below this the
   column is narrower than the shortest of those lines, so letting the
   text wrap on its own beats honouring a break that no longer fits. */
@media (max-width:600px){ h1 br{display:none} }
/* Long platform lists in a pill overflow a narrow card before they wrap. */
@media (max-width:600px){ .tag{white-space:normal} }