/* jobnote.uk — one stylesheet. Archivo (variable width + weight), self-hosted. */
@font-face{font-family:"Archivo";src:url(/assets/font/archivo.woff2) format("woff2-variations"),url(/assets/font/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --ink:#18222c;--ink-2:#4a5866;--paper:#fff;--wash:#eef1f0;--line:#d6dce0;
  --hivis:#ffd23f;--hivis-2:#f2c21c;--biro:#1f4fd1;--pass:#1f8a4c;--steel:#1c2630;--steel-2:#26333f;
  --wrap:1180px;--r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.6;font-stretch:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--biro);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--biro);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--hivis);color:var(--ink);padding:8px 12px;z-index:9}

h1,h2,h3{line-height:1.08;margin:0 0 .5em;font-stretch:115%;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:820}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:780}
h3{font-size:1.2rem;font-weight:720;font-stretch:104%;line-height:1.25;margin-bottom:.35em}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:52ch}
.small{font-size:.9rem;color:var(--ink-2)}
ul.plain{list-style:none;padding:0;margin:0}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:820;font-stretch:118%;font-size:1.3rem;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:8px}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:560;font-size:1rem}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-weight:650;padding:8px 12px;border:2px solid var(--ink);border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-list{display:flex}
.menu-list{display:none;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 18px;z-index:5}
.menu-list a{padding:12px 0;border-bottom:1px solid var(--wash);color:var(--ink);text-decoration:none;font-weight:600}
@media (max-width:860px){.nav{display:none}.menu{display:block}.top .wrap{position:relative}}

/* buttons */
.btn{display:inline-block;font:inherit;font-weight:720;font-stretch:108%;font-size:1.05rem;padding:14px 22px;border-radius:9px;text-decoration:none;border:2px solid var(--ink);line-height:1.2;cursor:pointer}
.btn-go{background:var(--hivis);color:var(--ink)}
.btn-go:hover{background:var(--hivis-2)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--wash)}
.btn-sm{padding:9px 14px;font-size:.95rem}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.ticks{display:flex;flex-wrap:wrap;gap:6px 22px;padding:0;margin:0;list-style:none;font-size:.98rem;color:var(--ink-2)}
.ticks li::before{content:"";display:inline-block;width:.55em;height:.95em;border:solid var(--pass);border-width:0 3px 3px 0;transform:rotate(45deg) translateY(-2px);margin-right:10px}

/* hero */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.hero h1{max-width:13ch}
.board{position:relative;background:var(--hivis);border-radius:18px;min-height:520px;overflow:hidden}
.board .phone{position:absolute;right:7%;top:46px;width:min(260px,52%)}
.board .label{position:absolute;left:6%;bottom:44px;transform:rotate(-4deg);width:min(330px,74%)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.board{min-height:470px}}
@media (max-width:420px){.board{min-height:430px}.board .phone{width:56%;right:5%}.board .label{left:4%;width:84%}}

/* the QR label — same layout as JobNote's printed label */
.label{background:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 28px -12px rgba(28,38,48,.45);padding:14px;display:grid;grid-template-columns:auto 1fr;gap:14px;position:relative;color:#111}
.label .qrcol{text-align:center}
.label .qrcol svg{width:96px;height:96px;display:block}
.label .code{font-weight:760;letter-spacing:.12em;font-size:.82rem;margin-top:4px}
.label .by{font-size:.76rem;color:#333;line-height:1.3}
.label .firm{font-weight:820;font-stretch:112%;font-size:1.22rem;line-height:1.1;margin:4px 0 6px}
.label .tel{font-weight:650;font-size:.98rem}
.label .jn{position:absolute;right:12px;bottom:8px;font-size:.66rem;color:#555}

/* phone frame */
.phone{border:9px solid #0d141b;border-radius:34px;overflow:hidden;background:#0f1720;box-shadow:0 22px 40px -18px rgba(13,20,27,.55)}
.phone img{width:100%}
.shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 16px 36px -22px rgba(13,20,27,.5)}

/* sections */
.band{padding:84px 0}
.band-wash{background:var(--wash)}
.band-steel{background:var(--steel);color:#e8eef4}
.band-steel a{color:#9cc0ff}
.band-steel .lede,.band-steel .small{color:#a9b8c6}
.head{max-width:760px;margin-bottom:44px}

/* trades strip */
.trades{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.trades a{display:block;padding:10px 16px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:620;background:var(--paper)}
.trades a:hover{background:var(--hivis)}

/* a day: a real sequence, marked by time of day */
.day{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.day li{display:grid;grid-template-columns:110px 1fr 300px;gap:32px;align-items:start}
.day time{font-weight:800;font-stretch:118%;font-size:1.6rem;line-height:1;padding-top:4px;color:var(--ink)}
.band-steel .day time{color:var(--hivis)}
.day .phone{max-width:280px}
@media (max-width:900px){.day li{grid-template-columns:1fr;gap:12px}.day .phone{max-width:300px}}

/* two-column feature rows */
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.split.flip{grid-template-columns:1.25fr 1fr}
.split.flip > :first-child{order:2}
@media (max-width:900px){.split,.split.flip{grid-template-columns:1fr}.split.flip > :first-child{order:0}}
.points{padding:0;margin:0 0 1em;list-style:none}
.points li{padding:12px 0;border-top:1px solid var(--line)}
.band-steel .points li{border-color:var(--steel-2)}
.points li:last-child{border-bottom:1px solid var(--line)}
.points b{display:block;font-stretch:104%}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:900px){.trio{grid-template-columns:1fr}}
.phones3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px}
@media (max-width:700px){.phones3{grid-template-columns:1fr 1fr}.phones3 > :nth-child(3){display:none}}

/* pricing table */
.prices{width:100%;border-collapse:collapse;margin:8px 0 18px}
.prices th,.prices td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prices thead th{font-size:.92rem;color:var(--ink-2);font-weight:600;border-bottom:2px solid var(--ink)}
.prices .plan{font-weight:800;font-stretch:112%;font-size:1.25rem}
.prices .amt{font-weight:820;font-stretch:112%;font-size:1.6rem;white-space:nowrap}
.prices .later{color:var(--ink-2)}
.beta-flag{display:inline-block;background:var(--hivis);color:var(--ink);font-weight:720;padding:4px 10px;border-radius:6px;font-size:.92rem}
@media (max-width:640px){.prices thead{display:none}.prices tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}.prices td{display:block;border:0;padding:4px 0}}

.band-cta{padding-top:24px}
.callout{background:var(--hivis);border-radius:16px;padding:40px;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.callout h2{margin:0 0 .3em}
.callout p{margin:0}

.faq dt{font-weight:720;font-stretch:104%;margin-top:22px}
.faq dd{margin:6px 0 0;max-width:64ch;color:var(--ink-2)}

.roadmap{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.roadmap li{padding:16px 0;border-top:1px solid var(--line)}
@media (max-width:760px){.roadmap{grid-template-columns:1fr}}

.crumbs{font-size:.92rem;color:var(--ink-2);padding-top:28px}
.crumbs a{color:var(--ink-2)}
.page-head{padding:20px 0 56px}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
.prose{max-width:720px}
.prose h2{font-size:1.6rem;margin-top:1.6em}
.prose ul{padding-left:1.2em}.prose li{margin:.3em 0}

/* footer */
.foot{background:var(--steel);color:#c6d2dd;padding:56px 0 40px;font-size:.95rem}
.foot a{color:#e8eef4;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h3{color:#fff;font-size:1rem;margin-bottom:10px}
.foot li{margin:6px 0}
.foot .base{border-top:1px solid var(--steel-2);margin-top:36px;padding-top:20px;color:#8fa0b0;font-size:.88rem}
@media (max-width:800px){.foot .cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:no-preference){
  .board .label{animation:stick .7s cubic-bezier(.2,.9,.3,1.2) .25s both}
  @keyframes stick{from{transform:rotate(-14deg) translate(-30px,40px) scale(1.06);opacity:0}to{transform:rotate(-4deg);opacity:1}}
}