/* Tekne website. Look A, Nameplate. Tokens: brand/tokens.css. */
:root{
  /* Colours and fonts come from brand/tokens.css (loaded first). These are
     the site's short names for them; never put a hex here. */
  --display:var(--font-display);
  --mono:var(--font-mono);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--steel); color:var(--ink); font:400 17px/1.6 var(--display);}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}
:focus-visible{outline:2px solid var(--rust); outline-offset:3px}

.top{border-bottom:1.5px solid var(--ink); background:var(--plate); position:sticky; top:0; z-index:5}
.top-in{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:60px}
.mark{font:800 20px/1 var(--display); letter-spacing:.16em; text-decoration:none}
nav{display:flex; gap:22px; font:600 13px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em}
nav a{text-decoration:none; padding-block:6px; border-bottom:2px solid transparent}
nav a:hover, nav a[aria-current="page"]{border-color:var(--rust)}

.eyebrow{font:600 12px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--rust); margin:0}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(34px, 6vw, 60px); line-height:1.04; letter-spacing:-.01em}
h2{font-weight:800; font-size:clamp(24px, 3.4vw, 34px); line-height:1.12}
h3{font-weight:700; font-size:19px; line-height:1.25}

.btn{display:inline-block; background:var(--ink); color:var(--plate); font:600 14px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:15px 20px; text-decoration:none; border:0; border-radius:2px; cursor:pointer}
.btn:hover{background:var(--rust); color:var(--rust-ink)}
.btn:disabled{opacity:.6; cursor:wait}
.link{font:600 14px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; text-underline-offset:5px}

.hero{padding-block:72px 64px}
.hero-in{display:flex; flex-direction:column; gap:22px}
.hero h1{max-width:15ch}
.lede{font-size:19px; max-width:52ch; margin:0; color:var(--muted)}
.actions{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.plate{display:flex; flex-wrap:wrap; gap:6px 22px; align-self:flex-start; margin-top:10px; font:400 12px/1.5 var(--mono); letter-spacing:.05em; border:1.5px solid var(--ink); border-radius:4px; padding:10px 14px; background:var(--plate); box-shadow:inset 0 0 0 3px var(--plate), inset 0 0 0 4px var(--line)}

.band{background:var(--plate); border-block:1.5px solid var(--ink); padding-block:64px}
.band h2{margin-bottom:36px; max-width:20ch}
.points{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:0; border-top:1.5px solid var(--ink)}
.points article{padding:22px 22px 26px 0; display:flex; flex-direction:column; gap:10px}
.points article + article{padding-left:22px; border-left:1px solid var(--line)}
.points p{margin:0; color:var(--muted); font-size:16px}

.trust{padding-block:64px}
.trust-in{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:32px; align-items:start}
.trust p{margin:0; font-size:18px; max-width:56ch}

.cta{background:var(--ink); color:var(--plate); padding-block:52px}
.cta-in{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.cta p{margin:8px 0 0; color:var(--line); max-width:52ch}
.cta .btn{background:var(--rust); color:var(--rust-ink)}
.cta .btn:hover{background:var(--plate); color:var(--ink)}

.prose-wrap{padding-block:64px 80px}
.prose{max-width:720px; display:flex; flex-direction:column; gap:18px}
.prose h1{font-size:clamp(32px, 5vw, 48px)}
.prose h2{font-size:24px; margin-top:18px}
.prose p:not(.eyebrow), .prose li{font-size:18px; margin:0}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.prose .btn{align-self:flex-start; margin-top:10px}
.sign{font-weight:700}
.sign span{font:400 13px/1.6 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.06em}

.form-wrap{max-width:760px; display:flex; flex-direction:column; gap:28px}
.form-head{display:flex; flex-direction:column; gap:12px}
.form-head h1{font-size:clamp(32px, 5vw, 48px)}
.form-head p:not(.eyebrow){margin:0; font-size:18px; color:var(--muted)}
.form{background:var(--plate); border:1.5px solid var(--ink); border-radius:4px; padding:24px; display:flex; flex-direction:column; gap:18px}
.row2{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px}
label{display:flex; flex-direction:column; gap:7px; font:600 12px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.06em}
label em{font-style:normal; color:var(--muted); text-transform:none; letter-spacing:0}
input, select, textarea{font:400 16px/1.4 var(--display); color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:3px; padding:11px 12px; width:100%}
input:focus, select:focus, textarea:focus{border-color:var(--ink); outline:none}
.form .btn{align-self:flex-start}
.hp{display:none}
.status{margin:0; font-size:15px; min-height:1.4em}
.status.ok{color:var(--done-ink); font-weight:600}
.status.bad{color:var(--wrong-ink); font-weight:600}

.foot{border-top:1.5px solid var(--ink); background:var(--plate); padding-block:26px; font:400 12px/1.6 var(--mono); color:var(--muted)}
.foot-in{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
.mail{user-select:all}

@media (max-width:720px){
  .trust-in{grid-template-columns:1fr; gap:14px}
  .points article, .points article + article{padding:20px 0 22px; border-left:0; border-top:1px solid var(--line)}
  .points article:first-child{border-top:0}
  .hero{padding-block:48px 44px}
  nav{gap:16px}
}

/* Logo in the top bar */
.mark{display:inline-flex; align-items:center}
.mark img{display:block; height:22px; width:auto}

/* Base and features */
.kit{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:28px}
.kit section{display:flex; flex-direction:column; gap:14px}
.kit ul{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--ink)}
.kit li{padding:12px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px}
.kit li strong{font-weight:700; font-size:16px}
.kit li span{color:var(--muted); font-size:15px}
.kit .note{margin:0; color:var(--muted); font-size:15px; max-width:60ch}
.intro{margin:0 0 30px; max-width:60ch; color:var(--muted); font-size:18px}
.form-note{margin:0; font-size:15px; color:var(--muted)}
.trust h2{margin-bottom:12px}

/* Consent checkbox: unticked by default, its own line */
.check{flex-direction:row; align-items:flex-start; gap:10px; font:400 15px/1.5 var(--display); text-transform:none; letter-spacing:0}
.check input{width:20px; height:20px; margin-top:2px; flex-shrink:0}
.form-note a{color:inherit}
.intro a{color:var(--ink); font-weight:600; text-underline-offset:4px}

/* Layout C, "Ink workshop" (Block 3b, picked 26 Sep) */
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.top--dark{background:var(--ink); border-bottom-color:var(--muted); color:var(--plate)}
.top--dark nav a{color:var(--plate)}
.hero-dark{background:var(--ink); color:var(--plate); padding-block:88px 176px}
.hero-dark .eyebrow{color:var(--rust-on-ink)}
.hero-dark h1{font-weight:800; font-size:clamp(44px, 8vw, 96px); line-height:.98; letter-spacing:-.02em; max-width:12ch}
.hero-dark .lede{color:var(--line); max-width:52ch; font-size:clamp(17px, 1.6vw, 21px)}
.hero-dark .link{color:var(--plate)}
.btn--rust{background:var(--rust); color:var(--rust-ink)}
.btn--rust:hover{background:var(--plate); color:var(--ink)}
.btn--secondary{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn--secondary:hover{background:var(--ink); color:var(--plate)}
.facts{display:inline-flex; flex-wrap:wrap; align-self:flex-start; gap:6px 26px; font:400 13px/1.5 var(--mono); letter-spacing:.05em; color:var(--plate); border:1.5px solid var(--plate); border-radius:4px; padding:11px 16px; box-shadow:inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--muted); margin-top:8px}
.shot-wrap{margin-top:-120px; position:relative}
.shot{min-height:420px; background:var(--card); border:1.5px solid var(--ink); border-radius:4px; box-shadow:inset 0 0 0 5px var(--card), inset 0 0 0 6px var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; color:var(--muted)}
.shot p{margin:0; max-width:36ch}
.steps-section{padding-block:72px 24px}
.steps-section h2{margin-bottom:26px}
.steps4{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-block:1.5px solid var(--ink)}
.steps4 li{display:flex; flex-direction:column; gap:10px; padding:26px 24px 28px}
.steps4 li + li{border-left:1px solid var(--line)}
.steps4 .n{font:800 44px/1 var(--display); color:var(--line)}
.steps4 h3{font-size:20px}
.steps4 p{margin:0; color:var(--muted); font-size:15px}
.use-section{padding-block:48px 80px}
.use-grid{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:56px; align-items:start}
.use-intro{display:flex; flex-direction:column; gap:14px}
.use-intro p:not(.eyebrow){margin:0; color:var(--muted); font-size:17px}
.use-panel{background:var(--card); border:1.5px solid var(--ink); border-radius:4px; overflow:hidden}
.use-head{margin:0; padding:14px 22px; background:var(--plate); font:600 12px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink)}
.use-panel ul + .use-head{border-top:1.5px solid var(--ink)}
.use-panel ul{list-style:none; margin:0; padding:0}
.use-panel li{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 22px; border-top:1px solid var(--line)}
.use-panel li div{display:flex; flex-direction:column; gap:2px}
.use-panel li strong{font-size:16px}
.use-panel li span{color:var(--muted); font-size:14px}
.always{font:600 11px/1.3 var(--mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); white-space:nowrap}
.switch{flex-shrink:0}
.switch rect{fill:var(--steel); stroke:var(--ink); stroke-width:1.5}
.switch circle{fill:var(--plate); stroke:var(--ink); stroke-width:1.5}
.trade-band{border-top:1.5px solid var(--ink); background:var(--plate); padding-block:48px}
.trade-in{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap}
.trade-in h2{margin:6px 0 8px}
.trade-in p:not(.eyebrow){margin:0; color:var(--muted); max-width:60ch}
@media (max-width:860px){
  .hero-dark{padding-block:48px 140px}
  .shot-wrap{margin-top:-100px}
  .shot{min-height:300px}
  .steps4{grid-template-columns:1fr}
  .steps4 li + li{border-left:0; border-top:1px solid var(--line)}
  .steps4 li{flex-direction:row; flex-wrap:wrap; column-gap:14px; padding:18px 0}
  .steps4 li p{flex-basis:100%}
  .steps4 .n{font-size:30px}
  .use-grid{grid-template-columns:1fr; gap:24px}
  .use-panel li{padding:12px 16px}
  .use-head{padding:12px 16px}
}
.hero-dark--short{padding-block:80px 88px}
.hero-dark--short h1{font-size:clamp(40px, 6vw, 72px); max-width:16ch}
@media (max-width:860px){.hero-dark--short{padding-block:44px 52px}}
.shot--img{min-height:0; padding:0; background:var(--card); display:block; overflow:hidden; margin:0}
.shot--img img{display:block; width:100%; height:auto}
.shot--img figcaption{padding:10px 16px; font:400 13px/1.4 var(--display); color:var(--muted); border-top:1px solid var(--line); text-align:left}
.top nav a{white-space:nowrap}
@media (max-width:700px){.shot--img img{max-height:560px; object-fit:cover; object-position:top} nav{gap:14px}}
.switch--on rect{fill:var(--ink)}
.switch--on circle{fill:var(--plate)}