/* ============================================================
   FIRNAM — quality, governance, elevated.
   Cream/ink editorial + Swedish engineering precision.
   ============================================================ */

:root{
  --paper:#F5F2EA;
  --paper-2:#EDE9DD;
  --ink:#171410;
  --ink-soft:#3A362F;
  --muted:#6E6759;
  --hair:#D8D2C2;
  --hair-dark:#B9B29E;
  --accent:#157F5B;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --max:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px} /* clear the sticky header on every in-page anchor */
body{
  font:16px/1.65 var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:470;letter-spacing:.005em}
.display{
  font-size:clamp(46px,7.2vw,92px);
  line-height:1.02;
  text-transform:uppercase;
  font-weight:430;
  letter-spacing:.012em;
}
h2{font-size:clamp(30px,4vw,46px);line-height:1.12}
h3{font-size:22px;line-height:1.3}
.eyebrow{
  font:500 12px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .tick,.clients-head .tick{
  display:inline-block;width:7px;height:7px;background:var(--accent);
  font-size:0;color:transparent;
  vertical-align:middle;transform:translateY(-1px);
}
.lede{font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:56ch}
.mono-note{font:400 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- hairline system ---------- */
.rule{border:0;border-top:1px solid var(--hair)}
.section{padding:104px 0}
.section.pulled-head{padding-top:145px} /* first heading is pulled up 41px for cap-line alignment; give the space back */
.section + .section{border-top:1px solid var(--hair)}
.starting-point + .section{border-top:0} /* the dark band's own edge is the separator */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:29px}
.section-head .eyebrow{white-space:nowrap}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;position:relative}
.nav .logo img{height:26px;width:auto}
.nav nav{
  display:flex;gap:34px;align-items:center;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.nav nav a{
  font:500 12px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:5px;position:relative;
}
/* underline draws in from the left like a pencil stroke: soft, fading in as it
   travels, settling slowly; exits to the right quicker, dissolving as it goes */
.nav nav a::after,.nav-right .lang::after,.foot nav a::after{
  content:"";position:absolute;left:-.18em;right:0;bottom:0;height:1px;
  background:rgba(23,20,16,.55);
  transform:scaleX(0);transform-origin:right;opacity:0;
  transition:transform .32s cubic-bezier(.55,.06,.45,.94),opacity .32s ease;
}
.nav nav a:hover::after,.nav-right .lang:hover::after,.foot nav a:hover::after{
  transform:scaleX(1);transform-origin:left;opacity:1;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-right .lang{
  font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  padding-bottom:5px;position:relative;
  transition:color .15s;
}
.nav-right .lang:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font:500 13px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  padding:17px 30px;
  border:1px solid var(--ink);
  transition:background .15s,color .15s;
}
.btn:active{transform:translateY(1px)} /* tactile press acknowledgment */
.btn-solid{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn-solid:hover{background:transparent;color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.nav .btn{padding:12px 20px}

/* ---------- hero ---------- */
.hero{padding:83.5px 0 104px;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:34px}
.hero h1{max-width:540px;font-size:clamp(30px,2.85vw,36px);line-height:1.12;text-wrap:balance}
/* three forced-break declarations. 36px is the largest size at which the longest
   beat ("BUILT INTO MICROSOFT 365.") holds one line in the desktop column; larger
   and the beats wrap and the three-line idea collapses into six. On phones the
   middle beat cannot hold one line at any headline size (it needs <=21px), so the
   beats are allowed to wrap there - at 30px they break into two-word phrases,
   which is still the cadence, not a running sentence. */
/* "ledningssystem" is unbreakable and needs a smaller size to clear the tiles */
html[lang="sv"] .hero h1{font-size:clamp(36px,4.4vw,56px)}
html[lang="sv"] .hero{padding-top:84px}
.hero .lede{margin:38px 0 44px}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* hero clients teaser */
.clients{margin-top:60px}
.clients-head{
  font:500 12px/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.clients-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;justify-content:space-between;padding:0 70px}
/* proof band: two facts between the promise (strip) and the ask (CTA). Set as a
   left/right ledger, not centred: the strip above and the CTA below are both centred
   ceremonies, and a third centred block in a row would flatten all three. The two
   numbers bracket the width like bookends; the eye crosses once, then drops into the
   centred "See it live." No eyebrow - the tick means "chapter starts here". */
.proof-band{padding:64px 0 0}
.proof-band + .cta{padding-top:64px} /* the facts are the hinge between promise and ask: equidistant from both */
.clients-proof{
  display:flex;justify-content:space-between;gap:0 48px;margin:0;padding:0;
}
.clients-proof div{margin:0;min-width:0}
.clients-proof div + div{text-align:right}
.clients-proof dd{margin:0;font:470 32px/1.1 var(--serif);color:var(--ink);letter-spacing:.005em;white-space:nowrap} /* the fact, in the display voice; a number never breaks */
.clients-proof dt{margin-top:10px;font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.client-slot{
  width:150px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--hair-dark);
  font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--hair-dark);
}
.client-slot.client-logo{border:none}
.client-slot.client-logo img{
  max-height:40px;max-width:120px;
  opacity:.85;transition:opacity .2s;
}
.client-slot.client-logo img:hover{opacity:1}

/* raised-tile cascade (the mark, blown up) */
.hero-art{position:absolute;right:-70px;top:10px;width:720px;height:620px;pointer-events:none;z-index:0}
.hero-art-layer{position:absolute;inset:0;will-change:transform}
.hero-art .tile{
  --tile-o:.7; /* plain tiles recede; the brand tiles below stay at full strength */
  position:absolute;width:58px;height:58px;border-radius:2px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F3EFE5 100%);
  box-shadow:10px 12px 24px rgba(23,20,16,.10),
             inset 0 1px 0 rgba(255,255,255,.9),
             inset -1px -1px 0 rgba(23,20,16,.03);
  opacity:0;animation:tileIn .9s cubic-bezier(.2,.6,.2,1) forwards,
                      tileWave 8s ease-in-out infinite;
}
.hero-art .tile.lo{
  box-shadow:4px 5px 10px rgba(23,20,16,.055),inset 0 1px 0 rgba(255,255,255,.7);
  background:linear-gradient(135deg,#FBF8F1 0%,#F0EBDF 100%);
}
.hero-art .tile.hi{
  box-shadow:14px 18px 34px rgba(23,20,16,.15),inset 0 1px 0 #FFFFFF;
}
.hero-art .tile.mark{
  --tile-o:1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 82%,#FFFFFF) 0%,var(--ink) 100%);
  box-shadow:12px 14px 28px rgba(23,20,16,.28);
}
.hero-art .tile.leaf{
  --tile-o:1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 76%,#FFFFFF) 0%,var(--accent) 100%);
  box-shadow:12px 14px 28px rgba(21,127,91,.30);
}
.hero-art .tile.mark{
  animation-name:tileIn,tileWave,tileBreatheInk;
  animation-duration:.9s,8s,6s;
  animation-timing-function:cubic-bezier(.2,.6,.2,1),ease-in-out,ease-in-out;
  animation-iteration-count:1,infinite,infinite;
  animation-fill-mode:forwards,none,none;
}
.hero-art .tile::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--accent);opacity:0;
  transition:opacity .45s ease;
}
.hero-art .tile.pulse::after{opacity:.16;transition-duration:.2s}
@keyframes tileIn{from{opacity:0;transform:translateY(16px)}to{opacity:var(--tile-o,1);transform:none}}
@keyframes tileWave{
  0%,100%{transform:translateY(var(--lift,0px))}
  50%{transform:translateY(calc(var(--lift,0px) - 10px))}
}
@keyframes tileBreatheInk{0%,100%{filter:brightness(1)}50%{filter:brightness(2.2)}}
@media (prefers-reduced-motion:reduce){
  /* drop the ambient wave + entrance motion only; the cursor lift still
     applies through --lift, and light effects (pulse, breathe) stay on */
  .hero-art .tile{animation:none;opacity:var(--tile-o,1);transform:translateY(var(--lift,0px))}
  .hero-art .tile.mark{animation:tileBreatheInk 6s ease-in-out infinite}
}

/* ---------- feature rows ---------- */
.feature{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  align-items:start;margin-bottom:145px; /* 104px visual gap to the next row's eyebrow, after its -41px pull-up */
}
.feature:last-child{margin-bottom:0}
.feature-text,.feature-media{min-width:0} /* let grid columns shrink below the mock table's natural width */
.feature-text{margin-top:-41px} /* pull up so the h2 cap line, not the eyebrow, meets the image top */
.feature-text h2{margin:20px 0 18px}
.feature-copy{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:46ch}
.feature-copy + .feature-copy{margin-top:14px}
.feature-media .pmap-svg svg{min-width:0}
/* simulate clickability: process shapes respond to hover */
.pmap-svg polygon,.pmap-svg rect[stroke]{transition:fill .15s;cursor:pointer}
.pmap-svg text{pointer-events:none;transition:fill .15s}
.pmap-svg polygon:hover,.pmap-svg rect[stroke]:hover{fill:var(--accent)}
.pmap-svg polygon:hover + text,.pmap-svg rect[stroke]:hover + text{fill:var(--paper)}

/* ---------- product mock ---------- */
.mock-frame{
  border:1px solid var(--hair-dark);
  background:var(--paper);
  box-shadow:0 40px 80px -50px rgba(23,20,16,.35);
}
.mock-bar{
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--hair);
  padding:14px 20px;
}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--hair-dark)}
.mock-url{font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.mock-app{padding:22px 30px 30px}
.mock-label{font:500 10.5px/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mock-label b{color:var(--ink);font-weight:500}
.mock-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}

/* SharePoint-style app chrome inside the frame */
.mock-sp{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
  padding-bottom:15px;margin-bottom:22px;
}
.mock-sp .site{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.mock-sp nav{display:flex;gap:20px}
.mock-sp nav span{font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.mock-sp nav span.on{color:var(--ink);border-bottom:1px solid var(--ink)}
/* SharePoint-style row hover on the document library */
.doc-table tbody tr{cursor:pointer;transition:background .12s ease}
.doc-table tbody tr:hover{background:rgba(23,20,16,.05)}

/* Visio-style process map (SVG) */
.pmap-svg{border:1px solid var(--hair);background:#FBF9F3;padding:16px 18px 12px;overflow-x:auto}
.pmap-svg svg{width:100%;min-width:640px;height:auto;display:block}
.pmap-note{margin-top:14px;font:400 10.5px/1.6 var(--mono);color:var(--muted);letter-spacing:.08em}

/* documents below the map */
.docs-block{margin-top:30px}

.doc-table{width:100%;border-collapse:collapse}
.doc-table th{
  font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:left;
  padding:0 12px 12px 0;border-bottom:1px solid var(--ink);
}
.doc-table td{
  padding:15px 12px 15px 0;
  border-bottom:1px solid var(--hair);
  font-size:14px;color:var(--ink-soft);
  vertical-align:middle;
}
.doc-table .id{font:400 12px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.doc-table .v{font:400 12px/1 var(--mono)}
.status{
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--ink);white-space:nowrap;
}
.status.ok{background:var(--ink);color:var(--paper)}
.status.rev{border-color:var(--accent);color:var(--accent)}
.mock-caption{margin-top:20px;font:400 11px/1.7 var(--mono);letter-spacing:.08em;color:var(--muted)}

/* ---------- starting point ---------- */
.starting-point{background:var(--ink);color:var(--paper)}
.starting-point .section-head{margin-bottom:20px} /* eyebrow captions its own h2: tight pair, matching the feature rows */
.starting-point .section-head .eyebrow{color:#98917f;font:500 12px/1 var(--mono)} /* .starting-point p's 17px would win otherwise */
.starting-point h2{max-width:20ch}
.starting-point h2 em{font-style:italic;color:var(--accent)}
.starting-point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:24px}

/* ---------- who it's for ---------- */
.section.who{padding:72px 0} /* an index, not a chapter: label + columns, no h2, lighter band */
.who .section-head{margin-bottom:0}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px}
.who-grid > div{padding:6px 40px 10px;border-left:1px solid var(--hair)}
.who-grid > div:first-child{padding-left:0;border-left:0}
.who-grid > div:last-child{padding-right:0}
.who-grid h3{margin-bottom:14px}
.who-grid p{color:var(--ink-soft);font-size:17px;line-height:1.75}
/* same content-float as the capability blocks */
.who-grid > div > *{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.who-grid > div:hover > *{transform:translateY(-4px)}
.starting-point p{color:#B8B2A2;font-size:17px;line-height:1.75}
.starting-point p strong{color:var(--paper);font-weight:500}

/* ---------- capabilities ---------- */
.caps{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.cap{
  padding:52px 44px 56px 0;
  border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:64px 1fr;gap:8px;
}
.cap:nth-child(odd){border-right:1px solid var(--hair);padding-right:56px}
.cap:nth-child(even){padding-left:56px}
/* micro-interaction: the block's content floats up toward the cursor while the
   hairline grid stays put; the number grows as the block's focal point */
.cap > *{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.cap:hover > *{transform:translateY(-4px)}
.cap .num{font:400 13px/1.6 var(--mono);color:var(--accent);letter-spacing:.1em;padding-top:4px;transform-origin:left top} /* optically centered on the h3 cap height */
.cap:hover .num{transform:translateY(-4px) scale(1.35)}
.cap h3{margin-bottom:14px}
.cap p{color:var(--ink-soft);font-size:15.5px;line-height:1.75}
.cap .fine{margin-top:14px;font:400 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- precision strip ---------- */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.strip .wrap{padding-top:34px;padding-bottom:28px}
.strip-head{
  font-size:clamp(22px,2.3vw,26px);text-align:center;
  margin-bottom:20px;
}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .cell{padding:14px 18px;text-align:center}
.strip .cell b{
  display:block;
  font:500 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.strip .cell strong{
  display:block;margin-top:7px;
  font:600 12.5px/1.4 var(--sans);color:var(--ink);
}
.strip .cell span{
  display:block;margin-top:4px;
  font:400 12px/1.5 var(--sans);color:var(--muted);
}
.strip .cell + .cell{border-left:1px solid var(--hair)}

/* ---------- proof ----------
   DORMANT since 2026-08-16 (issue #5): the Customers section is out of both pages
   until we have real attributed quotes. Kept deliberately, not dead code — the
   section comes back and rebuilding this grid from scratch would be wasted work. */
#proof .section-head{margin-bottom:20px} /* eyebrow captions its own h2, matching the problem section */
.proof-intro{color:var(--ink-soft);font-size:17px;line-height:1.75;max-width:62ch;margin-top:18px}
/* open ruled grid, same family as the capability blocks */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--hair);margin-top:40px}
.proof{padding:44px 44px 48px 0;border-bottom:1px solid var(--hair)}
.proof:nth-child(odd){border-right:1px solid var(--hair);padding-right:56px}
.proof:nth-child(even){padding-left:56px}
.proof > *{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.proof:hover > *{transform:translateY(-4px)}
.proof .who{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.proof p{font-family:var(--serif);font-weight:430;font-size:clamp(21px,1.9vw,24px);line-height:1.45;letter-spacing:.005em;color:var(--ink)}
.proof-note{margin-top:28px}

/* ---------- craft ---------- */
.craft{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}
.craft > div:first-child{margin-top:-33px} /* h2 cap line meets the body text; eyebrow floats above */
.section.pulled-head:has(.craft){padding-top:135px} /* craft pulls up 31, not 41 */
.craft h2{max-width:14ch}
.craft-right p{color:var(--ink-soft);font-size:17px;line-height:1.8;margin-bottom:22px}
.craft-right p strong{font-weight:600;color:var(--ink)}
.craft-facts{margin-top:34px;border-top:1px solid var(--ink)}
.craft-facts div{
  display:grid;grid-template-columns:auto 1fr;gap:0 20px; /* sub-lines span the full row; values right-align so label width can be natural */
  padding:15px 0;border-bottom:1px solid var(--hair);
  font:400 12.5px/1.5 var(--mono);letter-spacing:.08em;
}
.craft-facts div span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.16em}
.craft-facts div span + span{text-align:right}
.craft-facts em{
  grid-column:1/-1;text-align:right;
  display:block;font-style:normal;margin-top:1px;
  font:400 11px/1.5 var(--sans);letter-spacing:0;color:var(--muted);
}

/* ---------- interior pages (product, about) ----------
   Added 2026-08-16 when the one-pager became three pages. Interior pages open with a
   statement, not the hero mosaic: the mosaic is the front door, and repeating it on
   every page would spend the entrance twice and flatten the hierarchy. */
.page-head{padding:88px 0 0}
.page-head .eyebrow{margin-bottom:30px}
.page-head h1{
  font-size:clamp(36px,4.6vw,60px);line-height:1.06;
  text-transform:uppercase;font-weight:430;letter-spacing:.012em;
  max-width:19ch;text-wrap:balance;
}
.page-head .lede{margin-top:28px}
.page-head + .section{border-top:0} /* the head is already a boundary */

/* current page in the nav: stated, not shouted — the underline the hover draws,
   left in place at reduced strength */
.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;opacity:.32}

/* ---------- home: the route into the product page ----------
   With the depth moved onto /product/, this is the only in-body way through, so it
   closes the page rather than hiding mid-scroll (issue #3). */
.learn .section-head{margin-bottom:20px} /* eyebrow captions its own h2, like the starting point */
.learn h2{max-width:22ch}
.learn .lede{margin:26px 0 36px}

/* ---------- about: lineage ----------
   The credibility problem this page exists to solve: a company registered in 2026
   selling a system that has been in production since 2019. The three clocks stay
   separate and labelled (see DESIGN-DECISIONS §9) rather than blurred into one story. */
/* Index register (§2): label + entries, no h2, reduced padding. The h1 states the claim;
   an h2 restating it was this page's main over-explanation, cut 2026-08-16. */
.section.lineage-block{padding:72px 0}
.lineage-block .section-head{margin-bottom:0}
.lineage-note{max-width:52ch;margin-top:22px;color:var(--ink-soft);font-size:17px;line-height:1.8}
.lineage-note strong{font-weight:600;color:var(--ink)}
/* capped: full 1160px would fling label and value to opposite ends of the screen */
.lineage{border-top:1px solid var(--ink);margin-top:34px;max-width:720px}
.lineage div{
  display:grid;grid-template-columns:auto 1fr;gap:0 20px;
  padding:15px 0;border-bottom:1px solid var(--hair);
  font:400 12.5px/1.5 var(--mono);letter-spacing:.08em;
}
.lineage div span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.16em}
.lineage div span + span{text-align:right}
.lineage em{
  grid-column:1/-1;text-align:right;
  display:block;font-style:normal;margin-top:1px;
  font:400 11px/1.5 var(--sans);letter-spacing:0;color:var(--muted);
}

/* ---------- cta ---------- */
.cta{padding:104px 0 130px;text-align:center} /* joins the page rhythm on entry; the extra room is the exhale before the footer */
.cta h2{font-size:clamp(40px,6vw,72px);text-transform:uppercase;font-weight:430;line-height:1.05}
.cta .lede{margin:30px auto 46px}
.cta .mono-note{margin-top:26px}
.cta-hosts{margin:26px auto 0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--muted)}
/* the two faces under the form (2026-08-16). The demo is a conversation with named
   people, not a lead-capture funnel, so they get names and roles. Square and hairlined
   rather than round avatars — the page's whole vocabulary is rectilinear, and circles
   would read as SaaS team-page furniture. Names live here and NOT in the sentence
   above, per the redundancy rule in DESIGN-DECISIONS §8.
   Source images are square; David.jpg is only 200px, so 84px display stays crisp at 2x. */
.hosts{display:flex;justify-content:center;gap:56px;margin:30px 0 0;padding:0;list-style:none}
.host{display:flex;flex-direction:column;align-items:center}
.host img{
  width:84px;height:84px;object-fit:cover;
  margin-bottom:14px;
  filter:grayscale(1) contrast(1.04); /* both portraits in mono: the two source photos
    (colour studio cutout vs. b/w candid) read as one team only once they share a
    treatment, and mono sits with the cream/ink palette. Interim until a matched pair
    is shot; David's source is 200px and should be replaced regardless. */
  mix-blend-mode:multiply; /* the white studio backdrop takes the tone beneath it */
  background:var(--paper-2); /* ...which is this: both portraits become "a photo on a
    card". Without it Jacob's cutout floats while David's photo (a real background)
    stays a square - two different objects. Same tone, same frame = one pair. */
  border:1px solid var(--hair); /* fainter than the page's dark hairline: a frame,
    not an outline. Round was tried 2026-08-18 and rejected: the only curves on a
    rectilinear page read as generic avatars. Square it stays. */
}
.host-name{font:500 14px/1.4 var(--sans);color:var(--ink)}
.host-role{font:400 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.cta .mail{display:inline-block;margin-top:30px;font:400 14px/1 var(--mono);letter-spacing:.1em;border-bottom:1px solid var(--hair-dark);padding-bottom:3px}
.cta .mail:hover{border-bottom-color:var(--ink)}

/* ---------- demo form ---------- */
/* ceremony register: the form stays centered and narrow so it reads as part of the
   closing statement, not as a separate utility block */
.demo-form{max-width:620px;margin:0 auto;text-align:left}
.df-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.df-field{display:flex;flex-direction:column}
.df-wide{grid-column:1/-1}
.df-field label{
  font:500 11px/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
/* optional-field aside: sentence case so it reads as a note rather than part of the
   label, but kept at --muted because "optional" is information, not decoration */
.df-opt{text-transform:none;letter-spacing:.01em;font-weight:400;color:var(--muted)}
.df-field input,.df-field textarea{
  font:400 16px/1.5 var(--sans);
  color:var(--ink);background:transparent;
  border:1px solid var(--hair-dark);border-radius:0;
  padding:13px 14px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.df-field textarea{resize:vertical;min-height:96px}
.df-field input:focus,.df-field textarea:focus{
  outline:none;border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink); /* weight without a colour shift */
}
.df-field.is-bad input,.df-field.is-bad textarea{border-color:#A6402F}
.df-err{
  font:400 12px/1.5 var(--sans);color:#A6402F;
  margin-top:7px;min-height:0;
}
.df-err:empty{display:none}
/* honeypot: removed from view without display:none, which some bots skip */
.df-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.df-turnstile:not(:empty){margin-top:26px;display:flex;justify-content:center}
.demo-form .btn{margin-top:30px;width:100%;border-radius:0;cursor:pointer;font-family:var(--mono)}
.demo-form .btn[disabled]{opacity:.55;cursor:default}
.df-note{margin-top:16px;font:400 12px/1.6 var(--sans);color:var(--muted);text-align:center}
.df-status{margin-top:14px;font:400 14px/1.6 var(--sans);color:#A6402F;text-align:center}
.df-status:empty{display:none}

.df-done{max-width:560px;margin:0 auto;padding:34px 0 4px}
.df-done-head{font-family:var(--serif);font-size:26px;line-height:1.25;font-weight:470;margin-bottom:14px}
.df-done p:not(.df-done-head){font-size:16px;line-height:1.7;color:var(--ink-soft)}
.df-done a{border-bottom:1px solid var(--hair-dark)}
.df-done a:hover{border-bottom-color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:44px 0 60px;background:var(--paper)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot img{height:20px;width:auto;opacity:.9}
.foot .mono-note{letter-spacing:.2em}
.foot nav{display:flex;gap:26px}
.foot nav a{font:400 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);position:relative;padding-bottom:4px;transition:color .15s}
.foot nav a:hover{color:var(--ink)}
.foot-legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--hair)}
.foot-legal p{font:400 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .section{padding:72px 0}
  .section.pulled-head{padding-top:72px}
  .section.pulled-head:has(.craft){padding-top:72px}
  .mock-app{padding:18px 20px 24px}
  .mock-sp nav{display:none}
  .mock-frame{max-width:100%}
  .mock-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
  .docs-block{overflow-x:auto} /* the table scrolls inside the mock, never the page */
  .caps{grid-template-columns:1fr}
  .cap:nth-child(odd){border-right:0;padding-right:0}
  .cap:nth-child(even){padding-left:0}
  .cap{padding:32px 0 36px} /* desktop's tall rows double up when stacked */
  .starting-point-grid{grid-template-columns:1fr;gap:28px}
  .who-grid{grid-template-columns:1fr;gap:28px}
  .who-grid > div{padding:0;border-left:0}
  .strip-grid{grid-template-columns:1fr}
  .strip .cell + .cell{border-left:0;border-top:1px solid var(--hair)}
  .df-grid{grid-template-columns:1fr;gap:20px}
  .proof-grid{grid-template-columns:1fr;margin-top:20px}
  #proof .section-head{margin-bottom:12px}
  .proof-intro{margin-top:12px}
  .proof{padding:26px 0 30px} /* stacked cards drop the two-column row height */
  .proof:nth-child(odd){border-right:0;padding-right:0}
  .proof:nth-child(even){padding-left:0}
  .craft{grid-template-columns:1fr;gap:40px}
  .craft > div:first-child{margin-top:0}
  .hero,html[lang="sv"] .hero{padding-top:52px;padding-bottom:72px}
  .cta{padding:80px 0}
  .hosts{gap:32px} /* 56px pushes the two faces to the screen edges on a phone */
  .feature:last-child{margin-bottom:0}
  .hero-art{
    right:-40px;top:-10px;
    transform:scale(.45);transform-origin:top right;
    opacity:.42; /* on small screens the mosaic is a backdrop, not a neighbour */
  }
  /* behind text the neutral texture reads best; the ink and leaf tiles are
     too assertive at backdrop duty, so they recede below the plain ones */
  .hero-art .tile.mark,.hero-art .tile.leaf{--tile-o:.45}
  /* two logos per row; centred so an odd count leaves the last one centred
     rather than stranded hard-left (space-between does that). Matters from
     2026-08-16, when the row went from four logos to three. */
  .clients-row{padding:0;justify-content:center}
  .proof-band{padding:48px 0 0}
  .proof-band + .cta{padding-top:48px}
  .clients-proof{flex-direction:column;gap:28px 0} /* stacked on phones: a number never breaks */
  .clients-proof div + div{text-align:left}
  .clients-proof dd{font-size:28px}
  .client-slot{width:calc(50% - 9px)}
  .feature{grid-template-columns:1fr;gap:32px;margin-bottom:48px}
  .feature-flip .feature-text{order:-1}
  .feature-text{margin-top:0}
  /* Was display:none — fine while the nav held in-page anchors on a one-pager, but
     from 2026-08-16 these are real pages and hiding them left phones with no route
     to Product or About us at all. Two short mono labels stack under the logo; a
     hamburger would be more machinery than two links justify. */
  .nav{flex-wrap:wrap;justify-content:space-between;gap:16px 0;padding:16px 20px}
  .nav nav{
    position:static;transform:none;
    order:3;width:100%;
    justify-content:center;gap:14px;
    padding-top:0;margin-bottom:-6px;border-top:1px solid var(--hair);
  }
  .nav nav a{padding:0 8px;min-height:44px;display:inline-flex;align-items:center} /* thumb-sized targets: the visible label is unchanged */
  .nav nav a::after{left:8px;right:8px;bottom:12px} /* underline stays under the word, not the padded box */
  .nav-right{gap:18px}
}