:root{
  --paper:#FAF8F3; --paper-2:#F1EEE6; --white:#FFFFFF; --ink:#1A1A17; --ink-2:#3A3A36; --grey:#6B6B66; --line:#E2DED3;
  --green:#1F5C45; --green-2:#174836; --sage:#A9CDB8; --sage-2:#DCE8E0; --amber:#7A5A12; --amber-bg:#F6ECCF;
  --f-head:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6 }
img{ max-width:100%; display:block }
a{ color:inherit }
.wrap{ max-width:1120px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)) }
h1,h2,h3{ font-family:var(--f-head); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:0; text-wrap:balance }
p{ margin:0 }
.label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey) }
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--green); color:var(--paper); text-decoration:none;
  font-weight:600; padding:13px 20px; border-radius:8px; transition:background .15s, transform .15s }
.btn:hover{ background:var(--green-2) }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line) }
.btn.ghost:hover{ background:var(--white) }
.btn svg{ width:16px; height:16px }
a:focus-visible,.btn:focus-visible{ outline:3px solid var(--sage); outline-offset:3px }

/* header */
.top{ position:sticky; top:0; z-index:10; background:rgba(250,248,243,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid transparent }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:18px }
.top img{ height:26px; width:auto }
.top nav{ display:flex; align-items:center; gap:22px; font-size:15px }
.top nav a{ text-decoration:none; color:var(--ink-2) }
.top nav a:hover{ color:var(--green) }
.top nav .btn{ padding:9px 14px; font-size:14px; color:var(--paper) }
@media (max-width:700px){ .top nav a.hide-sm{ display:none } }

/* hero */
.hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; padding-block:64px 96px }
.hero h1{ font-size:clamp(38px,5.4vw,64px); margin-top:16px }
.hero h1 em{ font-style:normal; color:var(--green) }
.lede{ font-size:19px; color:var(--ink-2); max-width:33em; margin-top:22px }
.cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:32px }
.fine{ color:var(--grey); font-size:14px; margin-top:14px }

/* example: invoice -> draft bill */
.example{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.example > .label{ display:flex; justify-content:space-between; gap:12px }
.mailcard{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:14px;
  display:grid; grid-template-columns:auto 1fr; gap:4px 12px; color:var(--grey) }
.mailcard b{ color:var(--ink); font-weight:600; min-width:0; overflow-wrap:anywhere }
.att{ grid-column:1/-1; margin-top:6px; display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12.5px;
  color:var(--ink); background:var(--paper-2); border-radius:6px; padding:6px 10px; justify-self:start }
.att i{ font-style:normal; font-size:10px; font-weight:500; background:#B5432F; color:#fff; padding:1px 5px; border-radius:3px }
.arrow{ display:flex; align-items:center; gap:10px; padding-left:18px; color:var(--green); font-family:var(--f-mono); font-size:12px }
.arrow svg{ width:14px; height:28px; flex:none }
.bill{ background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 22px 44px -26px rgba(26,26,23,.35) }
.bill-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line) }
.bill-head b{ font-family:var(--f-head); font-weight:600; font-size:16px }
.chip{ font-size:12px; font-weight:600; color:var(--amber); background:var(--amber-bg); padding:3px 10px; border-radius:999px; white-space:nowrap }
.bill dl{ margin:0; padding:6px 18px 4px; display:grid; grid-template-columns:auto 1fr; font-size:14px }
.bill dt,.bill dd{ padding:7px 0; border-bottom:1px dashed var(--line) }
.bill dt{ color:var(--grey); padding-right:12px }
.bill dd{ margin:0; text-align:right; font-family:var(--f-mono); font-size:13.5px; font-variant-numeric:tabular-nums; min-width:0 }
.bill dt.total,.bill dd.total{ border-bottom:0; font-weight:600; color:var(--ink) }
.bill dd.total{ border-bottom:3px double var(--ink); justify-self:end; padding-left:12px }
.bill-foot{ display:flex; gap:8px; padding:12px 18px 16px }
.bill-foot span{ font-size:13px; font-weight:600; padding:7px 12px; border-radius:6px; border:1px solid var(--line) }
.bill-foot span.ok{ background:var(--green); color:var(--paper); border-color:var(--green) }

/* sections */
section.block{ padding-block:88px; border-top:1px solid var(--line) }
.block-head{ display:grid; grid-template-columns:1fr 1.5fr; gap:20px 64px; align-items:end }
.block-head h2{ font-size:clamp(30px,3.6vw,44px) }
.block-head p{ color:var(--ink-2); max-width:36em }

/* what we automate */
.uses{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border-top:1px solid var(--ink) }
.use{ padding:26px 26px 30px 0; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--line); min-width:0 }
.use:not(:nth-child(3n+1)){ padding-left:26px; border-left:1px solid var(--line) }
.use .glyph{ width:30px; height:30px; color:var(--green) }
.use h3{ font-size:20px; letter-spacing:-.015em }
.use p{ color:var(--ink-2); font-size:16px }
.use .eg{ font-family:var(--f-mono); font-size:12.5px; color:var(--grey); margin-top:auto; padding-top:6px }
.use.feature{ background:var(--green); color:var(--paper); padding-left:26px; border-bottom-color:var(--green) }
.use.feature p{ color:var(--sage-2) }
.use.feature .glyph{ color:var(--sage) }
.use.feature a.more{ color:var(--paper); font-weight:600; font-size:15px; text-underline-offset:4px; margin-top:auto; padding-top:8px }
.tag{ align-self:flex-start; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--sage); color:var(--green-2) }

/* steps */
.steps{ list-style:none; padding:0; margin:52px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s }
.steps li{ counter-increment:s; display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:2px solid var(--ink) }
.steps li::before{ content:"Step " counter(s); font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--green) }
.steps h3{ font-size:21px; letter-spacing:-.015em }
.steps p{ color:var(--ink-2); font-size:16px }

/* software chips */
.soft{ display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 0; padding:0; list-style:none }
.soft li{ font-weight:600; font-size:15px; padding:9px 16px; border:1px solid var(--line); background:var(--white); border-radius:8px }
.soft-note{ margin-top:20px; color:var(--grey); font-size:15px; max-width:46em }

/* facts */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px }
.fact{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px }
.fact h3{ font-size:19px; letter-spacing:-.01em }
.fact p,.fact li{ color:var(--ink-2); font-size:16px }
.fact ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px }

/* founder note */
.note{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; max-width:820px }
.note .mono{ width:64px; height:64px; border-radius:50%; background:var(--green); color:var(--paper); display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:26px }
.note blockquote{ margin:0; font-family:var(--f-head); font-weight:600; font-size:clamp(22px,2.6vw,28px); line-height:1.3; letter-spacing:-.015em; text-wrap:pretty }
.note .who{ margin-top:16px; color:var(--grey); font-size:15px }

/* contact band */
.band{ background:var(--green); color:var(--paper) }
.band .wrap{ padding-block:88px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px 64px; align-items:end }
.band h2{ font-size:clamp(30px,3.8vw,46px); margin-top:14px }
.band p{ color:var(--sage-2); margin-top:18px; max-width:34em }
.band .label{ color:var(--sage) }
.contact{ display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.contact .addr{ font-family:var(--f-mono); font-size:15px; user-select:all }
.band .btn{ background:var(--paper); color:var(--green) }
.band .btn:hover{ background:var(--white) }

.crumb{ font-size:14px; color:var(--grey); padding-top:28px }
.crumb a{ color:var(--grey); text-underline-offset:3px }

footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-block:28px; font-size:14px; color:var(--grey) }
footer a{ color:var(--grey); text-decoration:none }
footer a:hover{ color:var(--ink) }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:48px; padding-block:32px 72px }
  .block-head{ grid-template-columns:1fr; align-items:start }
  .uses{ grid-template-columns:1fr 1fr }
  .use:not(:nth-child(3n+1)){ padding-left:0; border-left:0 }
  .use:nth-child(2n){ padding-left:22px; border-left:1px solid var(--line) }
  .use.feature{ padding-left:22px }
  .steps,.facts{ grid-template-columns:1fr }
  .band .wrap{ grid-template-columns:1fr; align-items:start }
  section.block{ padding-block:64px }
}
@media (max-width:600px){
  .uses{ grid-template-columns:1fr }
  .use:nth-child(2n){ padding-left:0; border-left:0 }
  .use.feature{ padding-left:22px; padding-right:22px }
  .note{ grid-template-columns:1fr; gap:18px }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *{ transition:none!important } }