/*
 * The spjallið look, and the two views of the tours page.
 *
 * Helgi, 2026-09-19, of docs/redesign-2026-09-19/a-spjallid.html: "I like the
 * spjallid", "this one", then "spjallið is ofc ferðir right? so keep it that",
 * and "more info should host the FAQ, and everything else".
 *
 * ONE FILE, TWO VIEWS. site/tours.html carries `data-view="lean"` and shows the
 * conversation, three points and the way to start. site/info.html is
 * that same file with `data-view="info"`, written by scripts/site-info.mjs, and
 * shows everything else: the long sections, the demos and the FAQ. The words,
 * the chat, the website demo and the real-answers proof all live in one place,
 * so nothing had to be copied and nothing can drift. tests/spjall.test.ts fails
 * if info.html is not exactly what the script would write today.
 *
 * Loaded AFTER the page's own inline styles, so everything here wins by order.
 */

/* ------------------------------------------------------------ which view shows */
body[data-view="lean"] .v-info{display:none!important}
body[data-view="info"] .v-lean{display:none!important}

/* ------------------------------------------------------------------- the hero */
/* His aurora film plays behind the hero again. The page's own rules place and
   darken it; this only sets the room around the conversation. */
body[data-view="lean"] .hero{padding:clamp(28px,4vw,60px) 0 clamp(40px,6vw,90px)}
body[data-view="lean"] .hero .grid{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;
  min-height:calc(100vh - 170px);max-width:1400px;margin:0 auto}
body[data-view="lean"] .hero > .wrap{max-width:1400px;padding-inline:clamp(20px,5vw,64px)}
body[data-view="lean"] .glass{background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-view="lean"] .hero .eyebrow{color:var(--aurora)}
body[data-view="lean"] .hero h1{font-size:clamp(44px,6.2vw,96px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:14px 0 0}
body[data-view="lean"] .hero .standfirst{font-size:clamp(18px,1.5vw,22px);color:var(--muted);max-width:36ch;margin-top:26px}
body[data-view="lean"] .hero .cta{margin-top:36px}
body[data-view="lean"] .hero .btn{border-radius:999px;padding:14px 26px;font-size:16px}

/* The conversation is the picture. */
body[data-view="lean"] .demo{background:var(--surface);border:1px solid var(--hairline);border-radius:28px;padding:22px;
  min-height:clamp(380px,52vh,520px);display:flex;flex-direction:column;
  box-shadow:0 40px 120px -40px rgba(79,220,174,.25)}
body[data-view="lean"] .demo-top{padding-bottom:16px;border-bottom:1px solid var(--hairline);margin-bottom:auto}
body[data-view="lean"] .demo .bubble{font-size:clamp(16px,1.3vw,19px);line-height:1.45;padding:14px 18px;border-radius:20px;margin-top:14px;margin-bottom:0;max-width:88%}
body[data-view="lean"] .demo .bubble.guest{align-self:flex-end;background:var(--aurora);color:#04211A;border-bottom-right-radius:6px}
body[data-view="lean"] .demo .bubble.vaki{align-self:flex-start;background:#18252A;border-left:0;border-bottom-left-radius:6px}
body[data-view="lean"] .demo-foot{margin-top:16px}

/* ------------------------------------------------------------ three, in a row */
.three{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:0!important}
.three .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;max-width:1400px;margin-inline:auto}
.three .card{background:none;border:0;border-right:1px solid var(--hairline);border-radius:0;padding:clamp(36px,6vw,90px) clamp(20px,4vw,56px)}
.three .card:last-child{border-right:0}
.three.starts{border-top:0}
.three .card .tag{display:block;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1.02;
  color:var(--ink);background:none;border:0;padding:0;text-transform:none}
.three .card p{color:var(--muted);margin:14px 0 0;font-size:17px;line-height:1.5;max-width:32ch}


/* ------------------------------------------------------------- the way to start */
#verd.start-band{border-bottom:0;text-align:center;padding:clamp(72px,9vw,128px) 24px}
#verd .start-note{max-width:58ch;margin:18px auto 40px;color:var(--muted);font-size:clamp(17px,1.5vw,21px);line-height:1.5}
#verd .start-go{display:inline-block;position:static;margin:0;padding:17px 38px;border-radius:999px;font-size:17px}
#verd .to-info{margin-top:30px}

/* The three fixed prices, side by side, the founding one lit. Since 2026-10-01
   there is no quote: the price is on the page (see the comment in tours.html). */
#verd .tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1180px;margin:0 auto;text-align:left}
#verd .tier{background:var(--surface);border:1px solid var(--hairline);border-radius:24px;padding:30px 26px 26px;display:flex;flex-direction:column;text-align:left}
#verd .tier.first{border-color:var(--aurora);box-shadow:0 40px 110px -50px rgba(79,220,174,.45)}
#verd .tier h3{font-family:var(--display);font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1;margin:0}
#verd .tier-price{margin:12px 0 0;color:var(--muted);font-size:16px}
#verd .tier-price b{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
#verd .tier-price span{display:block;margin-top:2px;white-space:nowrap}
#verd .tier-badge{margin:12px 0 0;color:var(--aurora);font-weight:600;font-size:15px;line-height:1.4}
#verd .tier ul{list-style:none;padding:0;margin:22px 0 26px;flex:1}
#verd .tier li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--hairline);font-size:16px;line-height:1.45;color:var(--ink)}
#verd .tier li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--aurora)}
#verd .tier .start-go{display:block;text-align:center}
#verd .tier:not(.first) .start-go{background:transparent;color:var(--ink);border:1px solid var(--hairline)}
#verd .tier:not(.first) .start-go:hover{border-color:var(--aurora)}

/* ---------------------------------------------------------- the info view */
body[data-view="info"] .wrap > section:first-of-type{padding-top:34px}
.to-info{display:inline-block;margin-top:26px;color:var(--aurora);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}

@media(max-width:860px){
  body[data-view="lean"] .hero .grid{grid-template-columns:1fr;min-height:0;padding-top:30px}
  .three .cards{grid-template-columns:1fr}
  .three .card{border-right:0;border-bottom:1px solid var(--hairline)}
  .three .card:last-child{border-bottom:0}
  #verd .tiers{grid-template-columns:1fr;max-width:480px}
}

body[data-view="info"] .hero{padding:0 0 6px;min-height:0;background:none}
body[data-view="info"] .hero::before,body[data-view="info"] .hero::after{display:none}

/* Currency flip above the three prices (site/currency.js). */
#verd .cur-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:0 auto 26px;color:var(--muted);font-size:15px}
.cur-switch{display:inline-flex;border:1px solid var(--hairline);border-radius:999px;overflow:hidden}
.cur-switch button{font:inherit;font-weight:600;font-size:14px;letter-spacing:.04em;padding:8px 16px;background:none;border:0;color:var(--muted);cursor:pointer}
.cur-switch button+button{border-left:1px solid var(--hairline)}
.cur-switch button[aria-pressed="true"]{background:var(--aurora);color:var(--ground)}
.cur-switch button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* Phone pass, 2026-10-09 (site QA at 390x844). The long Icelandic headline word ran off the screen and pushed the
   demo card with it; the eyebrow lines touched; flags, currency buttons and footer links were under 44px tall;
   the price intro was nine centred lines. Layout only, no wording and no numbers. */
@media(max-width:700px){
  .hero .grid>*{min-width:0}
  body[data-view="lean"] .hero h1{font-size:clamp(30px,8.6vw,44px);overflow-wrap:anywhere}
  .hero .eyebrow{line-height:1.5}
  nav .wrap{padding-block:4px}
  .langs button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .cur-switch button{min-height:44px;padding-inline:18px}
  footer a{display:inline-block;padding:12px 4px}
  #verd [data-t="priceNote"]{text-align:left;max-width:36em;margin-inline:auto}
}