/* Vaki sub-pages: the home page look, shared by every page that is not the home page.
   Every colour comes from css/modes.css (the same file home loads) and /modes.js sets day or night
   from the sun exactly as on home, so a sub-page always matches home at the same moment.
   Header, buttons, sticker headline and cards are copied from css/book.css and css/hero-art.css. */
:root {
  --on-deep: #FFFDF6; --on-deep-link: #BFE8E4;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sp { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font); overflow-x: clip; }
.sp img, .sp svg { max-width: 100%; }
.sp a { color: var(--link); text-underline-offset: .18em; }
.sp a:hover { color: var(--hover); }
.sp :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sp .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
/* header: the home page's .top bar */
.sp nav { background: var(--bg); }
.sp nav .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; }
.sp .mark { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 24px; letter-spacing: -.02em; line-height: 1; }
.sp .mark:hover { color: var(--ink); }
.sp .mark i { font-style: normal; color: var(--vaki-i, #f08c2e); }
.sp nav .wrap > a:not(.mark) { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px; box-shadow: 0 2px 0 var(--aqua); }
.sp nav .wrap > a:not(.mark):hover { background: var(--foam); color: var(--ink); }
/* home's header, buttons and hero band, copied from css/book.css */
.sp .top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 10px 20px; line-height: 1.4; }
.sp .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 900; font-size: 24px; }
.sp .top nav { margin-left: auto; background: none; }
.sp .top ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.sp .top li { margin: 0; max-width: none; }
.sp .top nav a { display: inline-block; padding: 8px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px; }
.sp .top nav a:hover { background: var(--foam); color: var(--ink); }
.sp .top nav a.lang { background: var(--paper); box-shadow: 0 2px 0 var(--aqua); }
.sp .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 14px; background: var(--orange); color: var(--button-ink); font-weight: 900; text-decoration: none; box-shadow: 0 5px 0 var(--orange-d); transition: transform .1s, box-shadow .1s; }
.sp .btn:hover { color: var(--button-ink); box-shadow: 0 7px 0 var(--orange-d); }
.sp .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-d); }
.sp .btn.small { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.sp .sp-hero { text-align: center; padding: 26px 20px 0; }
.sp .sp-hero h1 { margin-inline: auto; }
.sp .sp-hero .lead { margin: 0 auto 26px; max-width: 34em; }
.sp .sp-art { height: clamp(96px, 12.5vw, 190px); overflow: hidden; margin-bottom: 8px; }
.sp .sp-art svg { display: block; width: 100%; height: 100%; max-width: none; }
.sp main.wrap.after-hero { padding-top: 0; }
.sp .after-hero h2:first-child { margin-top: 28px; }
@media (max-width: 640px) {
  .sp .top { padding: 8px 14px; gap: 6px 10px; } .sp .brand { font-size: 22px; min-height: 44px; align-items: center; }
  .sp .top nav { order: 3; margin-left: 0; width: 100%; } .sp .top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 9px; font-size: 13.5px; }
  .sp .top .btn.small { margin-left: auto; }
  .sp .sp-art { height: 66px; }
  .sp h1 { font-size: clamp(26px, 8vw, 40px); }
}
/* page head */
.sp main { padding: 28px 0 88px; }
.sp main.wrap { padding-top: 28px; padding-bottom: 88px; }
.sp h2, .sp h3 { font-weight: 900; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.sp h1 { font-weight: 900; }
/* the sticker headline: home's second paper strip, same polygons (css/hero-art.css, index.html), as pure CSS so no page needs extra markup. The slant is in em, not %, so a headline of three or four lines stays fully on the strip */
.sp h1 { position: relative; isolation: isolate; width: fit-content; max-width: 100%; padding: .14em .36em .36em; margin: 0 0 20px; font-size: clamp(30px, 5.2vw, 76px); line-height: 1.12; letter-spacing: -.025em; color: var(--on-teal); text-wrap: balance; }
.sp h1::before, .sp h1::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sp h1::before { background: var(--deep); clip-path: polygon(1.1% .1em, 99.75% .3em, 98.75% 100%, .4% calc(100% - .24em)); }
.sp h1::after { background: var(--teal); clip-path: polygon(1.1% 0, 99.75% .2em, 98.75% calc(100% - .14em), .4% calc(100% - .36em)); }
.sp h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 44px 0 14px; }
.sp h3 { font-size: 19px; margin: 0 0 6px; }
.sp .sub, .sp .lead, .sp .article-meta { color: var(--ink2); }
.sp .sub { margin: 0 0 36px; }
.sp .lead { font-size: clamp(18px, 2vw, 21px); margin: 0 0 8px; font-weight: 600; }
.sp .article-meta { font-size: 15px; margin: 0 0 32px; }
.sp p, .sp li { max-width: 68ch; }
.sp ul { padding-left: 22px; }
.sp li { margin-bottom: 10px; }
.sp li::marker { color: var(--teal); }
.sp strong, .sp b { font-weight: 800; }
/* the note: a taped paper slip */
.sp .note { background: var(--foam); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--aqua); padding: 6px 20px; margin: 28px 0; max-width: 72ch; }
.sp .note p { max-width: none; }
/* the main button: orange paper you press */
.sp .cta { margin: 36px 0 0; }
.sp .cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 26px; font-size: 19px; border-radius: 14px; background: var(--orange); color: var(--button-ink); font-weight: 900; text-decoration: none; box-shadow: 0 5px 0 var(--orange-d); transition: transform .1s, box-shadow .1s; }
.sp .cta a:hover { background: var(--orange); color: var(--button-ink); box-shadow: 0 7px 0 var(--orange-d); }
.sp .cta a:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-d); }
/* cards */
.sp .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin: 8px 0 0; }
.sp .card { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--aqua); padding: 18px 20px 20px; }
.sp .card h3 { margin: 0 0 6px; }
.sp .card p { margin: 0; color: var(--ink); }
.sp .card .tag { display: inline-block; background: var(--petrol); color: #fff; font-weight: 800; font-size: 13px; padding: 3px 12px; border-radius: 99px; margin-bottom: 8px; }
.sp .card.star { background: var(--foam); }
/* questions */
.sp details { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 4px 18px; margin: 0 0 10px; max-width: 72ch; }
.sp details p { margin: 4px 0 12px; }
.sp summary { cursor: pointer; font-weight: 800; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.sp summary::-webkit-details-marker { display: none; }
.sp summary::after { content: "+"; flex: none; font-weight: 900; font-size: 22px; line-height: 1; color: var(--teal); }
.sp details[open] > summary::after { content: "\2212"; }
.sp details[open] > summary { border-bottom: 2px solid var(--aqua); margin-bottom: 8px; }
/* tables */
.sp .tablewrap { overflow-x: auto; margin: 12px 0; border-radius: 14px; border: 2px solid var(--ink); background: var(--paper); }
.sp table { border-collapse: collapse; width: 100%; margin: 0; }
.sp th, .sp td { border: 1px solid var(--aqua); padding: 10px 12px; text-align: left; vertical-align: top; }
.sp th { background: var(--foam); font-weight: 800; }
.sp .tablewrap table th:first-child, .sp .tablewrap table td:first-child { border-left: 0; }
.sp .tablewrap table th:last-child, .sp .tablewrap table td:last-child { border-right: 0; }
.sp .tablewrap table tr:first-child > * { border-top: 0; }
.sp .tablewrap table tr:last-child > * { border-bottom: 0; }
/* link lists (guides) */
.sp .glist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sp .glist li { margin: 0; max-width: 72ch; }
.sp .glist a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 12px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 3px 0 rgba(8, 47, 59, .28); color: var(--ink); font-weight: 800; text-decoration: none; }
.sp .glist a:hover { background: var(--foam); }
/* footer: no band, plain rows on the page ground, like the end of the home page */
.sp footer { background: none; color: var(--ink); font-size: 15px; padding: 28px 0 36px; }
.sp footer.wrap { max-width: none; padding-left: max(20px, calc((100% - 1140px) / 2)); padding-right: max(20px, calc((100% - 1140px) / 2)); }
.sp footer p { max-width: 80ch; margin: 0 0 8px; }
.sp footer a { color: var(--ink); }
.sp footer a:hover { color: var(--orange); }
.sp footer strong { color: var(--ink); }
/* home's two link rows at the page end, same sizes as its inline .siteLinks rules */
/* the language list in the foreign pages' footer */
.sp footer nav { background: none; }
.sp footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.sp footer nav li { margin: 0; max-width: none; }
.sp footer .siteLinks { background: none; margin: 0; padding: 0 0 16px; }
.sp footer .siteLinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.sp footer .siteLinks li { margin: 0; max-width: none; }
.sp footer .siteLinks a { display: inline-block; padding: 6px 0; min-height: 44px; line-height: 32px; color: var(--ink); }
@media (max-width: 600px) {
.sp main.wrap { padding-bottom: 64px; }
.sp footer a { display: inline-flex; align-items: center; min-height: 44px; }
.sp main { padding-bottom: 64px; }
.sp .card, .sp details { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.sp .cta a { transition: none; }
}
/* the Svarar demo page keeps its layout (svarar/page.css), its colours come from the modes like home */
body.sv { --panel: var(--paper); --them: var(--foam); --muted: var(--ink2); --line: var(--aqua); --soft: var(--aqua); --bg2: var(--foam); --accent: var(--orange); --accent-ink: var(--button-ink); --me: var(--teal); --sea: var(--link); }
.sv .msg.me { color: var(--on-teal); }
.sv .chip { color: var(--ink); }
.sv .pick, .sv .send { box-shadow: 0 4px 0 var(--orange-d); }
.sv .pick:hover, .sv .send:hover { background: var(--orange); }
.sv .ask input, .sv .mic { background: var(--paper); color: var(--ink); border-color: var(--aqua); }
.sv .ask input::placeholder { color: var(--ink2); }
.sv .mic:hover { background: var(--foam); }
/* 404: no header on that page, so the one block sits in the middle like a paper slip */
body.sp.lost { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.sp.lost main { max-width: 36rem; padding: 28px 24px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--aqua); }
.sp.lost h1 { font-size: clamp(24px, 6vw, 34px); }
.sp.lost p { margin: .5rem 0; }

/* ---------------------------------------------------------------------------
   The two long pages (info, tours). They were the dark aurora look and run on
   colour variables, so the variables are re-pointed at the paper palette here and
   the few parts that were dark on purpose (photo hero, glass card, frosted bar)
   are turned into the same paper pieces the home page uses.
   --------------------------------------------------------------------------- */
body[data-view] {
  --ground: var(--bg); --surface: var(--paper); --raised: var(--foam); --muted: var(--ink2);
  --hairline: #B9D3CF; --aurora: var(--teal); --aurora-soft: rgba(11, 98, 104, .1);
  --ember: #8F3F06; --ember-soft: rgba(181, 99, 44, .14); --key: var(--teal);
  --display: var(--font); --body: var(--font); --mono: var(--font);
  background: var(--bg); color: var(--ink); color-scheme: light; font-family: var(--font); -webkit-font-smoothing: auto; overflow-x: clip;
}
body[data-view] a { color: var(--link); }
body[data-view] :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
body[data-view] nav { position: static; background: var(--bg); border-bottom: 0; backdrop-filter: none; }
body[data-view] nav .wrap { max-width: 1180px; padding: 10px 20px; }
body[data-view] .mark { color: var(--ink); text-decoration: none; font-family: var(--font); font-weight: 900; font-size: 24px; letter-spacing: -.02em; line-height: 1; display: inline-flex; align-items: center; min-height: 44px; }
body[data-view] .mark i { color: var(--vaki-i, #f08c2e); }
body[data-view] .langs { gap: 6px; }
body[data-view] .langs button { font: 800 14px/1 var(--font); min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--paper); color: var(--ink); border: 0; box-shadow: 0 2px 0 var(--aqua); }
body[data-view] .langs button:hover { background: var(--foam); color: var(--ink); }
body[data-view] .langs button[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); box-shadow: 0 2px 0 var(--deep); }
body[data-view] h1, body[data-view] h2, body[data-view] h3 { font-family: var(--font); font-weight: 900; letter-spacing: -.01em; color: var(--ink); }
body[data-view] h1 { letter-spacing: -.02em; }
body[data-view] h2 { font-weight: 900; }
body[data-view] .eyebrow { font: 800 14px/1 var(--font); letter-spacing: .02em; text-transform: none; color: var(--on-petrol); background: var(--petrol); display: inline-block; padding: 7px 14px; border-radius: 99px; margin-bottom: 18px; }
body[data-view] .hero .eyebrow { color: var(--on-petrol); }

/* hero: paper, no photograph, no frosted glass */
body[data-view] .hero { --ink: inherit; --muted: inherit; --aurora: inherit; --hairline: inherit; background: transparent; color: var(--ink); }
body[data-view] .hero-photos { display: none; }
body[data-view] .hero::after, body[data-view] .hero::before { display: none; }
body[data-view] .glass { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-view="info"] .glass { background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--aqua); }
body[data-view] .hero .standfirst { color: var(--ink2); }

/* buttons: pressed paper */
body[data-view] .btn, body[data-view] .hero .btn { font: 900 16px/1.1 var(--font); border: 0; border-radius: 14px; padding: 14px 24px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 5px 0 var(--orange-d); transition: transform .1s, box-shadow .1s; }
body[data-view] .btn.primary, body[data-view] .start-go { background: var(--orange); color: var(--button-ink); }
body[data-view] .btn.ghost, body[data-view] .hero .btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--aqua); outline: 2px solid var(--ink); outline-offset: -2px; }
body[data-view] .btn:hover { box-shadow: 0 7px 0 var(--orange-d); }
body[data-view] .btn.ghost:hover { box-shadow: 0 7px 0 var(--aqua); background: var(--foam); }
body[data-view] .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-d); }

/* paper cards: the same 2px outline and offset shadow as the home page */
body[data-view] .demo, body[data-view] .card, body[data-view] .tr, body[data-view] .tier, body[data-view] .try, body[data-view] #verd .tier { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--aqua); }
body[data-view="lean"] .demo { border-radius: 18px; box-shadow: 0 6px 0 var(--aqua); }
body[data-view] .tier.pick, body[data-view] #verd .tier.first { border-color: var(--teal); box-shadow: 4px 6px 0 var(--teal); background: var(--foam); }
body[data-view] .tier .tb { background: var(--petrol); color: #fff; font-size: 12px; }
body[data-view] .three .card { background: none; border: 0; border-right: 1px solid var(--hairline); border-radius: 0; box-shadow: none; }
body[data-view] .three .card:last-child { border-right: 0; }
body[data-view] .three .card .tag { background: none; color: var(--ink); }
body[data-view] .card .tag, body[data-view] .tr .lbl, body[data-view] .demo-top, body[data-view] .try-fict { font: 800 12px/1.3 var(--font); letter-spacing: .04em; }
body[data-view] .bubble.guest { background: var(--foam); color: var(--ink); }
body[data-view] .bubble.vaki { background: var(--aurora-soft); color: var(--ink); }
body[data-view="lean"] .demo .bubble.guest { background: var(--teal); color: var(--on-teal); }
body[data-view="lean"] .demo .bubble.vaki { background: var(--foam); color: var(--ink); border: 0; }
body[data-view] .tr .q { background: var(--foam); }
body[data-view] .try-row input { background: var(--paper); border: 2px solid var(--ink2); border-radius: 12px; }
body[data-view] .try-row button { background: var(--orange); color: var(--button-ink); border: 0; border-radius: 14px; font-weight: 900; min-height: 46px; box-shadow: 0 4px 0 var(--orange-d); }
body[data-view] .try-sugg button { border: 2px dashed var(--ink2); border-radius: 12px; color: var(--ink); }
body[data-view] .try-sugg button:hover { background: var(--foam); border-style: solid; }
body[data-view] #verd .tier:not(.first) .start-go { background: var(--paper); color: var(--ink); border: 0; outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: 0 5px 0 var(--aqua); }
body[data-view] #verd .tier-badge, body[data-view] .to-info { color: var(--teal); }
body[data-view] ol.steps li::before { background: var(--foam); color: var(--ink); border: 2px solid var(--ink); }
body[data-view] .next { background: var(--foam); border-left: 4px solid var(--teal); }

/* bands and pictures */
body[data-view] .band .shot, body[data-view] .band-hero .shot { box-shadow: 0 6px 0 var(--aqua); border: 2px solid var(--ink); }
body[data-view] .band.lift { background: var(--paper); }
body[data-view] .band h2 { font-weight: 900; letter-spacing: -.02em; }
body[data-view] .band .kicker { font-family: var(--font); font-weight: 800; color: var(--teal); letter-spacing: .06em; }
body[data-view] .band .huge, body[data-view] .bignum { font-family: var(--font); font-weight: 900; }

/* questions */
body[data-view] .faq details { border-bottom: 1px solid var(--hairline); }
body[data-view] .faq summary { font-weight: 800; min-height: 48px; }
body[data-view] .faq summary::after { border-color: var(--teal); }
body[data-view] details.more > summary { font-weight: 900; }

/* footer: no band, plain rows on the page ground, like the end of the home page */
body[data-view] footer { background: none; color: var(--ink); border: 0; margin-top: 48px; padding: 28px 28px 44px; font-size: 15px; }
body[data-view] footer p { margin: 0 0 8px; }
body[data-view] footer a, body[data-view] footer .foot-links a { color: var(--ink); border-bottom-color: currentColor; }
body[data-view] footer a:hover { color: var(--orange); }
body[data-view] footer strong { color: var(--ink); }
@media (max-width: 600px) {
  body[data-view] footer a { display: inline-flex; align-items: center; min-height: 44px; }
  body[data-view] .three .card { border-right: 0; border-bottom: 1px solid var(--hairline); }
}