@font-face { font-family: "Bricolage"; src: url("assets/fonts/bricolage-wdth.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
:root { --display: "Bricolage", "Figtree", system-ui, sans-serif; }
.shareopt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
/* RideInstead website: same look as the extension's welcome page (tokens come from assets/base.css). */
body { margin: 0; }
.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding: 0 clamp(16px, 4vw, 32px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.top nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.top nav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.top nav a:hover { background: var(--mint); color: var(--ink); }
.top .brand { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); font-size: 20px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 7vh, 72px) 0 clamp(28px, 5vh, 48px); }
h1 { margin: 0; font-size: clamp(46px, 7.4vw, 88px); line-height: 1.04; font-weight: 800; font-stretch: 88%; letter-spacing: -0.035em; }
h2 { margin: 0 0 8px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; font-weight: 800; font-stretch: 88%; letter-spacing: -0.03em; }
.lead { margin: 18px 0 26px; max-width: 46ch; font-size: 18px; color: var(--muted); }
.installs { display: flex; flex-wrap: wrap; gap: 10px; }
.installs .primary, .installs .btn { width: auto; white-space: nowrap; }
.installs [aria-disabled="true"] { opacity: .55; pointer-events: none; }
.fine { margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
section.block { padding: clamp(28px, 6vh, 56px) 0; }
.sub { max-width: 56ch; margin: 0 0 26px; color: var(--muted); font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { padding: 20px; border-radius: var(--leafcorner); background: var(--mint); }
.card h3 { margin: 10px 0 6px; font: 800 18px var(--display); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--leaf); color: #fff; font-weight: 800; }
.card svg { width: 28px; height: 28px; fill: none; stroke: var(--leaf); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 0; margin: 0; list-style: none; }
.facts li { position: relative; padding-left: 30px; color: var(--ink); }
.facts li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 14px; border-radius: 2px 10px 2px 10px; background: var(--leaf); }
.facts small { display: block; color: var(--muted); font-size: 14px; }
details { padding: 14px 0; border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font: 700 17px var(--display); }
details p { margin: 10px 0 0; color: var(--muted); max-width: 70ch; }
.cta-band { margin: 24px 0 8px; padding: clamp(24px, 5vw, 44px); border-radius: 26px; background: var(--mint); text-align: center; }
.cta-band .installs { justify-content: center; margin-top: 18px; }
.sfoot { margin-top: 40px; padding: 36px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.sf-main { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px clamp(20px, 5vw, 64px); }
.sf-brand .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 20px; }
.sf-brand .brand .wm, .sf-brand .brand .wm * { text-decoration: none; }
.sf-tag { margin: 10px 0 0; max-width: 26ch; font-size: 15px; line-height: 1.4; color: var(--ink); }
.sf-col { display: grid; gap: 9px; align-content: start; }
.sf-col h2 { margin: 0 0 4px; font: 800 12px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sf-col a { width: fit-content; padding-block: 4px; color: inherit; text-decoration: none; }
.sf-col a:hover, .sf-col a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.sf-bottom .langs { margin: 0; font-size: 13px; }
@media (max-width: 640px) {
  .sf-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-brand { grid-column: 1 / -1; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}
.contactblock .sub { max-width: 58ch; }
.contactcard { max-width: 680px; margin-top: 24px; padding: clamp(18px, 4vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--mint) 70%, transparent); box-shadow: 0 14px 44px rgba(0, 0, 0, .14); }
.form { display: grid; gap: 14px; max-width: 620px; }
.contactcard .form { max-width: none; gap: 18px; }
.formrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .formrow { grid-template-columns: minmax(0, 1fr); } }
.topicgroup { display: grid; gap: 8px; font: 700 14px var(--display); }
.topicchips { display: flex; flex-wrap: wrap; gap: 8px; }
.topicchips .chip[aria-checked=true] { background: var(--leaf); border-color: var(--leaf); color: var(--on-action); }
.count { justify-self: end; margin-top: -2px; font: 500 12px var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.contactcard .sendbtn { width: 100%; justify-content: center; }
@media (min-width: 561px) { .contactcard .sendbtn { width: auto; justify-self: start; } }
.msg.ok { background: color-mix(in srgb, var(--leaf) 16%, transparent); border-left: 3px solid var(--leaf); }
.form label.l { display: grid; gap: 6px; font: 700 14px var(--display); }
.form textarea.field { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--mint); font-size: 15px; }
.msg.err { background: var(--danger-wash); color: var(--danger); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } }
/* Wordmark with a rail under "instead" and a little train that rides along it. */
@font-face { font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/pacifico-latin.woff) format("woff"); }
#headline .inst { font-family: "Pacifico", cursive; font-weight: 400; font-size: .94em; letter-spacing: 0; color: var(--amber); }
.inst { position: relative; z-index: 0; white-space: nowrap; }
/* Word roller adapted from uiverse.io (kennyotsu/fresh-lizard-20, MIT): lines slide up one at a time, softly faded top and bottom. */
/* Checkbox adapted from uiverse.io (Shoh2008/bad-emu-73, MIT). */
.shareopt { padding: 6px 8px; border-radius: 6px; transition: background .2s ease; user-select: none; }
.shareopt:hover { background: rgba(111, 207, 105, .08); }
.shareopt .inp-cbx { position: absolute; width: 0; height: 0; opacity: 0; }
.cbx-box { flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1px solid var(--muted); transition: all .2s ease; box-shadow: 0 1px 1px rgba(0, 16, 75, .05); }
.cbx-box svg { position: absolute; top: 3px; left: 2px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all .3s ease .1s; }
.shareopt:hover .cbx-box { border-color: var(--leaf); }
.inp-cbx:checked + .cbx-box { background: var(--leaf); border-color: var(--leaf); animation: wave-4 .4s ease; }
.inp-cbx:checked + .cbx-box svg { stroke-dashoffset: 0; }
.inp-cbx:focus-visible + .cbx-box { outline: 2px solid var(--sprout); outline-offset: 2px; }
@keyframes wave-4 { 50% { transform: scale(.9); } }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }

/* Animated preview of the real popup. Fixed dark palette so it reads like the extension on any page theme. */
.stage { --p-bg: #0f1d15; --p-card: #13241a; --p-line: rgba(214,236,200,.22); --p-ink: #eaf3e4; --p-mute: #a9bfae; --p-leaf: #8fdc7b; --p-amber: #f3b24a; position: relative; width: 100%; width: 400px; max-width: 100%; margin-inline: auto; color: var(--p-ink); }
@media (max-width: 440px) { .stage { zoom: .84; } }
.popup .ico { color: var(--p-mute); font-size: 16px; }
.stage .page { position: relative; height: 176px; border-radius: 16px 16px 0 0; background: #fff; color: #1b2430; border: 1px solid #d6dde6; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(0,0,0,.5); }
.page .bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #eef1f5; border-bottom: 1px solid #d6dde6; }
.page .bar i { width: 8px; height: 8px; border-radius: 50%; background: #c8d0da; }
.page .bar span { flex: 1; margin: 0 8px; height: 14px; border-radius: 7px; background: #fff; font: 600 9px/14px var(--display); padding-left: 8px; color: #6b7686; }
.page .bar .ext { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--leaf); display: grid; place-items: center; color: #fff; font: 800 9px var(--display); }
.page .bar .ext::after { content: ""; position: absolute; inset: -4px; border-radius: 8px; border: 2px solid var(--leaf); opacity: 0; }
.page .res { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font: 700 13px var(--display); }
.page .res small { display: block; color: #6b7686; font-weight: 500; font-size: 11px; }
.page .fare { position: relative; padding: 6px 12px; border-radius: 10px; background: #fff3d6; font: 800 18px var(--display); color: #7a4a00; }
.page .scan { position: absolute; top: 26px; bottom: 0; width: 38px; left: -50px; background: linear-gradient(90deg, transparent, rgba(74,163,94,.35), transparent); }
.popup { position: relative; margin-top: -6px; padding: 14px; border-radius: 20px; background: var(--p-bg); border: 1px solid var(--p-line); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); transform-origin: 80% 0; }
.popup .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.popup .hd .wm i { color: var(--p-amber); }
.popup .hd .wm b { color: var(--p-ink); }
.pcard { padding: 14px; border-radius: 16px; background: var(--p-card); border: 1px solid var(--p-line); }
.prow { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pill2 { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(143,220,123,.14); color: var(--p-leaf); font: 800 10px var(--display); letter-spacing: .08em; }
.pill2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p-leaf); }
.dates { text-align: right; color: var(--p-amber); font: 800 11px/1.3 var(--display); }
.rt { position: relative; height: 46px; margin: 4px 0 0; }
.rt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rt .arc { fill: none; stroke: var(--p-leaf); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rt .leaf { fill: var(--p-leaf); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.rt .dot { fill: var(--p-bg); stroke: var(--p-leaf); stroke-width: 2.5; }
.rt .tr { position: absolute; left: 0; top: 0; width: 34px; height: 12px; offset-path: path("M 6 36 C 80 -6, 266 -6, 334 36"); offset-rotate: auto; opacity: 0; }
.cities { display: flex; justify-content: space-between; margin-top: 2px; font: 800 26px var(--display); letter-spacing: -.02em; }
.meta2 { margin: 2px 0 0; color: var(--p-mute); font-size: 12px; }
.save { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 12px; color: var(--p-mute); }
.save .big { display: block; margin-top: 2px; color: var(--p-ink); font: 800 22px var(--display); }
.save .big em { font-style: normal; color: var(--p-leaf); }
.save .ln { display: flex; justify-content: space-between; }
.co2l { margin: 10px 0 0; font-size: 12px; color: var(--p-ink); }
.pbtn { display: flex; justify-content: center; gap: 8px; margin-top: 12px; padding: 11px; border-radius: 14px; background: var(--p-leaf); color: #0b2014; font: 800 14px var(--display); }
.tree { margin: 10px 0 0; text-align: center; font-size: 11px; color: var(--p-mute); }
.tree b { color: var(--p-leaf); font-weight: 700; }
.aff { margin: 6px 0 0; text-align: center; font-size: 11px; color: var(--p-mute); }
.replay { display: inline-flex; gap: 6px; align-items: center; margin: 12px auto 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 700 12px var(--display); cursor: pointer; }
.replay:hover { background: var(--mint); color: var(--ink); }
.replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stagewrap { text-align: center; }
.eg { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.page .url { flex: 1; margin: 0 8px; height: 14px; border-radius: 7px; background: #fff; font: 600 9px/14px var(--display); padding-left: 8px; color: #6b7686; }
.page .bar span { display: none; }
.page .badge { position: absolute; top: -5px; right: -5px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 6px; background: #e8a93a; color: #1b1300; font: 800 8px/12px var(--display); text-align: center; text-decoration: none; opacity: 0; transform: scale(0); }
.page .search { display: flex; align-items: center; height: 36px; margin: 10px 12px 6px; padding: 0 10px; border: 1px solid #d6dde6; border-radius: 10px; font: 700 12px var(--display); background: #fff; }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid #4aa35e; }
.fcs { display: grid; gap: 6px; margin: 0 12px; }
.fc { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fff; font: 700 12px var(--display); overflow: hidden; opacity: 0; }
.fc small { display: block; color: #6b7686; font-weight: 500; font-size: 10px; }
.fc .fare, .fc .fare2 { padding: 4px 10px; border-radius: 8px; font: 800 15px var(--display); }
.fc .fare { background: #fff3d6; color: #7a4a00; }
.fc .fare2 { background: #eef1f5; color: #3a4655; }
.fc .scan { position: absolute; top: 0; bottom: 0; width: 44px; left: -60px; background: linear-gradient(90deg, transparent, rgba(74,163,94,.4), transparent); }
.cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 22px; height: 22px; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cursor svg { width: 22px; height: 22px; }
.cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: rgba(74,163,94,.5); opacity: 0; transform: scale(.2); }
.toast2 { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 14px; background: #1b3a26; border: 1px solid var(--p-leaf); box-shadow: 0 14px 30px -14px rgba(0,0,0,.8); opacity: 0; transform: translateY(16px); }
.toast2 svg { flex: none; width: 26px; height: 26px; overflow: visible; }
.toast2 .stem { fill: none; stroke: var(--p-leaf); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.toast2 .lf { fill: var(--p-leaf); transform-box: fill-box; transform-origin: 0 100%; transform: scale(0); }
.toast2 b { display: block; font: 800 13px var(--display); }
@keyframes fade { to { opacity: 0; } }
.toast2 small { display: none; }
.stage .popup, .stage .pcard > *, .stage .save, .stage .co2l, .stage .pbtn, .stage .tree, .stage .aff { opacity: 0; }
/* Timeline (about 14 s): type the search, results appear, the cursor picks a flight, the extension reads the fare, the popup drops in,
   the train rides the route, savings count up, the cursor presses "See train options" and a tree is planted. */
.stage.play .typed { animation: type 1.1s steps(26) .3s both, caret 0.8s step-end 1.5s 1 both; }
.stage.play .fc.a { animation: rise2 .5s var(--ease-out) 1.5s both, sel .4s ease 3s both; }
.stage.play .fc.b { animation: rise2 .5s var(--ease-out) 1.7s both; }
.stage.play .fc .scan { animation: scan 1s ease-in-out 3.3s both; }
.stage.play .fc .fare { animation: flash .6s ease 4.1s both; }
.stage.play .ext::after { animation: ping 1s ease-out 4.5s both; }
.stage.play .badge { animation: badge .5s cubic-bezier(.34,1.56,.64,1) 4.5s both; }
.stage.play .popup { animation: drop .7s var(--ease-out) 4.9s both; }
.stage.play .pcard > .prow, .stage.play .pcard > .rt, .stage.play .pcard > .cities, .stage.play .pcard > .meta2 { animation: rise2 .5s var(--ease-out) both; }
.stage.play .pcard > .prow { animation-delay: 5.3s; } .stage.play .pcard > .rt { animation-delay: 5.45s; } .stage.play .pcard > .cities { animation-delay: 5.6s; } .stage.play .pcard > .meta2 { animation-delay: 5.7s; }
.stage.play .arc { animation: draw 1.1s ease-out 5.6s both; }
.stage.play .leaf { animation: pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.stage.play .tr { animation: ride 2.2s cubic-bezier(.45,0,.3,1) 6.2s both; }
.stage.play .save { animation: rise2 .5s var(--ease-out) 7.4s both; }
.stage.play .co2l { animation: rise2 .5s var(--ease-out) 8.8s both; }
.stage.play .pbtn { animation: rise2 .5s var(--ease-out) 9.1s both, glow 1.4s ease-in-out 9.8s 2, press .35s ease 11s both; }
.stage.play .tree, .stage.play .aff { animation: rise2 .5s var(--ease-out) 9.4s both, fade .3s ease 11.5s both; }
.stage.play .cursor { animation: move 14s linear both; }
.stage.play .cursor::after { animation: click 14s linear both; }
.stage.play .toast2 { animation: rise3 .6s var(--ease-out) 11.5s both; }
.stage.play .toast2 .stem { animation: draw .7s ease-out 11.8s both; }
.stage.play .toast2 .lf { animation: pop .5s cubic-bezier(.34,1.56,.64,1) 12.3s both; }
.stage.play .toast2 .lf + .lf { animation-delay: 12.5s; }
@keyframes type { to { width: 100%; } }
@keyframes caret { to { border-right-color: transparent; } }
@keyframes sel { to { border-color: #4aa35e; box-shadow: 0 0 0 3px rgba(74,163,94,.25); } }
@keyframes scan { from { left: -60px; opacity: 1; } 90% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes flash { 40% { background: #4aa35e; color: #fff; transform: scale(1.08); } }
@keyframes ping { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes badge { to { opacity: 1; transform: scale(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rise2 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise3 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
@keyframes ride { 0% { offset-distance: 0%; opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(143,220,123,.28); } }
@keyframes press { 40% { transform: scale(.95); filter: brightness(1.15); } }
@keyframes move {
  0%, 14% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
  15% { opacity: 1; transform: translate(var(--x0), var(--y0)); }
  21.5% { opacity: 1; transform: translate(var(--x1), var(--y1)); }
  72.5% { opacity: 1; transform: translate(var(--x1), var(--y1)); }
  78.5%, 96% { opacity: 1; transform: translate(var(--x2), var(--y2)); }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}
@keyframes click {
  0%, 21% { opacity: 0; transform: scale(.2); }
  21.6% { opacity: .9; transform: scale(.3); } 25% { opacity: 0; transform: scale(2.2); }
  78.6% { opacity: .9; transform: scale(.3); } 82% { opacity: 0; transform: scale(2.2); }
  100% { opacity: 0; }
}
.stage.still .popup, .stage.still .pcard > *, .stage.still .save, .stage.still .co2l, .stage.still .pbtn, .stage.still .tree, .stage.still .aff, .stage.still .fc, .stage.still .toast2 { opacity: 1; transform: none; }
.stage.still .typed { width: 100%; border-color: transparent; }
.stage.still .arc, .stage.still .toast2 .stem { stroke-dashoffset: 0; } .stage.still .leaf, .stage.still .toast2 .lf { opacity: 1; transform: none; }
.stage.still .badge { opacity: 1; transform: none; }
@media (max-width: 440px) { .stage { zoom: .84; } }

.themebtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.themebtn:hover { background: var(--mint); color: var(--ink); }
.themebtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.badges { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font: 700 14px var(--display); color: var(--ink); }
.badges li { display: flex; align-items: center; gap: 8px; }
.badges svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--leaf); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pcol { padding: clamp(20px, 3vw, 32px); border-radius: var(--leafcorner); background: var(--mint); }
.pcol svg { width: 36px; height: 36px; fill: none; stroke: var(--leaf); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcol h2 { margin: 12px 0 8px; font-size: clamp(22px, 2.6vw, 30px); }
.pcol p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 800px) { .promise { grid-template-columns: 1fr; } }

/* Logo: always the Bricolage wordmark, same as the welcome page. */
.wm { font-family: "Bricolage", "Figtree", system-ui, sans-serif; font-stretch: 88%; font-weight: 800; letter-spacing: -0.03em; }
.wm b, .wm i { font-weight: 800; }

/* Headline: the words pull in like a train arriving (skewed, blurred, then settle); "instead." is the last carriage and its highlight sweeps in after it stops. */
#headline { cursor: pointer; }
#headline .w { display: inline-block; }
#headline.go .w { animation: arrive .85s var(--ease-out) both; animation-delay: calc(var(--i) * .16s); }
#headline.go .inst { animation: arrive .85s var(--ease-out) both, bump .5s ease 1.55s both; animation-delay: .64s, 1.55s; }
@keyframes arrive { from { opacity: 0; transform: translateX(-70%) skewX(-16deg); filter: blur(8px); } 60% { transform: translateX(4%) skewX(4deg); filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bump { 40% { transform: translateY(-6%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #headline.go .w, #headline.go .inst  }

/* Word roller adapted from uiverse.io (kennyotsu/fresh-lizard-20, MIT): lines slide up one at a time, softly faded top and bottom. */
.rot { margin: 14px 0 0; font: 700 18px var(--display); color: var(--leaf); }
.words { -webkit-mask-image: linear-gradient(transparent 0%, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 28%, #000 72%, transparent 100%); display: block; position: relative; overflow: hidden; height: 1.6em; line-height: 1.6em; }
.word { display: block; height: 1.6em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .words .word { animation: none; } }
.hero .rot { margin: 18px 0 0; font-size: clamp(14px, 4vw, 22px); } .hero .rot + .lead { margin-top: 12px; }

/* Departure-board look: board bar on top, board panel, amber kickers. */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap .rwbar { width: 100%; margin-top: 12px; position: sticky; top: 10px; z-index: 20; }
.rwbar .themebtn { width: 34px; height: 34px; padding: 0; color: var(--board-dim); }
.rwbar .themebtn:hover { background: var(--board-2); color: var(--board-fg); }
.rwbar nav { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 10px; border-radius: 6px; background: var(--board); color: var(--amber); font: 700 11px var(--display); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--board-edge); }
.kicker::before { content: ""; flex: none; width: 30px; height: 6px; background: linear-gradient(var(--go), var(--go)) -10px 50% / 10px 4px no-repeat, repeating-linear-gradient(90deg, var(--board-dim) 0 2px, transparent 2px 5px); animation: glide 2.8s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes glide { from { background-position: -10px 50%, 0 50%; } to { background-position: 30px 50%, 0 50%; } }
@media (prefers-reduced-motion: reduce) { .kicker::before { animation: none; background-position: 10px 50%, 0 50%; } }
:root[data-motion="reduce"] .kicker::before { animation: none; background-position: 10px 50%, 0 50%; } }
.board { margin: 0; padding-bottom: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--board-edge), var(--board-lift); }
.boardhead { padding: 16px 16px 12px; font: 700 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--board-dim); }
.boardhead .flaps { font-size: 15px; letter-spacing: 0; text-transform: none; }
.cols, .rows li { display: grid; grid-template-columns: minmax(0, 1fr) 76px 84px; gap: 12px; padding: 8px 16px; align-items: center; }
.cols { font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--board-dim); }
.rows { margin: 0; padding: 0; list-style: none; min-height: 12.5rem; }
.rows li { border-top: 1px solid var(--board-rule); animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.rows .flaps { font-size: 17px; }
.rows .c { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.rows .c.direct { color: var(--go); }
.boardfoot { margin: 0; padding: 12px 16px 6px; font-size: 12px; color: var(--board-dim); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#board .rows li { animation: none; }
/* Scroll reveal and icon motion */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
svg.ico { overflow: visible; }
svg.ico path, svg.ico circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease .15s; }
.rv.in svg.ico path, .rv.in svg.ico circle { stroke-dashoffset: 0; }
.card svg.ico, .pcol svg.ico, .badges svg.ico { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.card:hover svg.ico, .pcol:hover svg.ico { transform: rotate(-8deg) scale(1.15); }
.rv.in svg.i-leaf { animation: sway 4.5s ease-in-out 1s infinite; transform-origin: 20% 90%; }
.rv.in svg.i-shield { animation: beat 3.6s ease-in-out 1s infinite; }
.rv.in svg.i-globe { animation: spin 18s linear 1s infinite; }
@keyframes sway { 50% { transform: rotate(8deg); } }
@keyframes beat { 8%, 28% { transform: scale(1.12); } 18% { transform: scale(.96); } }
@keyframes spin { to { transform: rotate(360deg); } }
.card .num { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.card:hover .num { transform: scale(1.15) rotate(8deg); }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } svg.ico path, svg.ico circle { stroke-dashoffset: 0; transition: none; } .rv.in svg.i-leaf, .rv.in svg.i-shield, .rv.in svg.i-globe { animation: none; } .kicker::before { animation: none; } }

#board .cols, #board .rows li { grid-template-columns: minmax(0, 1fr) 112px 84px; }
.rwbar .brand, .rwbar .brand:hover { text-decoration: none; color: var(--board-fg); }

/* Accessibility helpers */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--leaf); color: #fff; font-weight: 700; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagetitle { font-size: clamp(32px, 4.4vw, 48px); }
.sendbtn { width: auto; justify-self: start; }
.sub.center { margin-inline: auto; }
.rt .leaf[data-l="1"] { animation-delay: 3.4s !important; } .rt .leaf[data-l="2"] { animation-delay: 3.7s !important; } .rt .leaf[data-l="3"] { animation-delay: 4s !important; }
/* Interactive FAQ */
.faqbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.faqbar .field { flex: 1 1 240px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 700 13px var(--display); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.chip:hover { background: var(--mint); color: var(--ink); transform: translateY(-1px); }
.chip.on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
details.qa { padding: 0; border-top: 1px solid var(--line); }
details.qa[hidden] { display: none; }
details.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; list-style: none; cursor: pointer; transition: color .2s, padding .2s; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--leaf); font: 800 18px/1 var(--display); transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s; }
details.qa[open] summary::after { transform: rotate(135deg); background: var(--leaf); color: #fff; }
details.qa summary:hover { color: var(--leaf); padding-left: 10px; }
details.qa .ans { overflow: hidden; padding: 0 4px 16px; }
details.qa .ans p { margin: 0 0 10px; }
.linkcopy { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 700 12px var(--display); cursor: pointer; }
.linkcopy:hover { background: var(--mint); color: var(--ink); }
.none { padding: 18px 4px; color: var(--muted); }
#faqList { border-bottom: 1px solid var(--line); }
#faqCount { min-height: 1.4em; }
@media (max-width: 800px) { } @media (max-width: 520px) { }
/* Route pages */
.crumbs { margin: 18px 0 0; font-size: 13px; color: var(--muted); } .crumbs a { color: inherit; }
.prose { max-width: 68ch; } .prose p { color: var(--muted); font-size: 17px; }
@media (max-width: 800px) { }
/* 404 */
.lost { text-align: center; padding: clamp(40px, 10vh, 100px) 0; }
.lost .code { font: 800 clamp(80px, 18vw, 180px)/1 var(--display); letter-spacing: -.05em; color: var(--ink); }
.lost .code i { font-style: normal; color: var(--amber); }
.lost .track { position: relative; height: 34px; margin: 6px auto 20px; max-width: 520px; overflow: hidden; border-bottom: 3px dashed var(--board-dim); }
.lost .track svg { position: absolute; bottom: 4px; left: -90px; width: 72px; animation: pass 6s linear infinite; }
.lost .track .lamp { fill: var(--amber); } .lost .track .body { fill: var(--leaf); }
@keyframes pass { to { left: 100%; } }
.lost .dep { max-width: 520px; margin: 22px auto 0; text-align: left; }
.lost .dep .rows { min-height: 0; }
.lost .dep .rows li { grid-template-columns: minmax(0, 1fr) 120px; }
.lost .dep .rows li a { color: inherit; text-decoration: none; }
.cancel { color: var(--danger) !important; }
@media (prefers-reduced-motion: reduce) { .lost .track svg { animation: none; left: 40%; } }
.lost .code { margin: 0; } .lost h1 { margin: 6px 0 8px; }

.hashline { margin-top: 18px; text-align: center; }
.hashline code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 4px 8px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; }
.cta-band .fine { text-align: center; }
.okmsg { color: var(--leaf); font-weight: 700; } .badmsg { color: var(--danger); font-weight: 700; }
.formnote { max-width: 620px; margin-top: 14px; }


.newsblock { text-align: center; }
.newsblock .sub { margin-left: auto; margin-right: auto; }
.newsform { display: grid; gap: 14px; max-width: 560px; margin: 22px auto 0; justify-items: center; }
.newsrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 6px 6px 8px; border-radius: 16px 5px 16px 5px; border: 1.5px solid color-mix(in srgb, var(--ink) 56%, transparent); background: var(--paper); transition: box-shadow .2s, border-color .2s; }
.newsrow:focus-within { border-color: var(--sprout); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 22%, transparent); }
.newsrow input[type=email] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 10px 16px; outline: none; }
.newsrow input[aria-invalid=true] { color: #b3261e; }
.newsrow .primary { width: auto; flex: none; white-space: nowrap; padding: 11px 20px; }
.newsform .shareopt { justify-self: center; text-align: left; max-width: 480px; }
.newsform .msg { text-align: center; }
.newsform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .newsrow { flex-direction: column; align-items: stretch; } .newsrow .primary { width: 100%; } }

/* FAQ: collapsed by default, a fade hints that there is more */
#faqList.collapsed { position: relative; max-height: 330px; overflow: hidden; }
#faqList.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.faqmore { display: flex; justify-content: center; margin-top: 16px; }
.faqmore .ghost { display: inline-flex; gap: 8px; align-items: center; }
.faqmore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.faqmore [aria-expanded=true] svg { transform: rotate(180deg); }

.afterdl[hidden] { display: none; }
.afterdl { scroll-margin-top: 70px; }
.steps2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.stepcard { padding: 20px; border-radius: 18px 5px 18px 5px; border: 1.5px solid var(--line); background: var(--paper); }
.stepcard h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--display); }
.stepcard .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--leaf); color: var(--on-action); font-size: 14px; }
.ostabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ostabs .chip[aria-selected=true] { background: var(--leaf); color: var(--on-action); border-color: var(--leaf); }
.cmdrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmdrow code, #hashCmd { padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: 13px; overflow-wrap: anywhere; }
.cmdrow.inline { display: inline-flex; vertical-align: middle; }
.olsteps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.okmsg { color: var(--leaf); font-weight: 700; } .badmsg { color: var(--danger, #b3261e); font-weight: 700; }
@media (max-width: 760px) { .steps2 { grid-template-columns: 1fr; } }

.checker { display: flex; gap: 10px; max-width: 560px; }
.checker .field { flex: 1; min-width: 0; } .checker .primary { width: auto; flex: none; }
.msg.ok { color: var(--leaf); font-weight: 700; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.shots figure { margin: 0; } .shots img, .shots video { width: 100%; height: auto; border-radius: 14px; border: 1.5px solid var(--line); }
.shots figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
@media (max-width: 520px) { .checker { flex-direction: column; } .checker .primary { width: 100%; } }

/* Breadcrumbs */
.crumbs { margin: 20px 0 14px; font-size: 14px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .6; }
.crumbs a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Mobile: full-width install buttons, no sideways scroll, tap targets */
@media (max-width: 640px) {
  .installs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .installs .primary { grid-column: 1 / -1; justify-content: center; }
  .installs .btn { justify-content: center; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  nav[aria-label="Main"] a { padding: 10px 6px; }
  img, svg, video, table { max-width: 100%; }
  .gtable, table { display: block; overflow-x: auto; }
}
body { overflow-x: clip; }

/* Site checker: suggestions + compact result */
.checkwrap { position: relative; max-width: 560px; }
.checker { max-width: none; }
#siteOut { max-width: 560px; margin-top: 10px; font-size: 14px; line-height: 1.45; padding: 10px 14px; }
.sugg { position: absolute; left: 0; right: 0; top: 54px; z-index: 5; margin: 0; padding: 6px; list-style: none; background: var(--paper, #fff); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.25); max-height: 240px; overflow-y: auto; }
.sugg li { padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--mint); }
@media (max-width: 520px) { .sugg { top: 54px; right: 0; } }

.reportbtn { display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid currentColor; font-weight: 700; text-decoration: none; }

.langs { text-align: center; margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.langs a { color: inherit; text-decoration: none; padding: 4px 2px; }
.langs a:hover, .langs a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Ko-fi box (loaded only after a click, see site.js) */
.kofi-holder { margin: 16px auto 0; max-width: 560px; }
.kofi-frame { display: block; width: 100%; height: 712px; border: 0; padding: 4px; background: transparent; border-radius: 14px; color-scheme: light; }
.tree-widget { display: block; border: 0; background: transparent; }
#support a.btn { text-decoration: none; }

.tlink { display: inline-block; margin-top: 12px; color: var(--leaf-dark, var(--leaf)); font-weight: 600; }

.tree-holder { margin-top: 20px; }
.tree-widget + .tree-widget { margin-top: 28px; }
.pcol .fine { margin-top: 8px; font-size: 13px; }

.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 460px; padding: 14px 16px; border-radius: 16px; background: var(--paper, #fff); color: var(--ink); border: 1px solid var(--line, #d7e3db); box-shadow: 0 12px 32px rgba(15, 42, 29, .18); font-size: 14px; }
.consent p { margin: 0 0 12px; }
.consent a { color: var(--leaf); font-weight: 600; }
.consent-row { display: flex; gap: 8px; justify-content: flex-end; }

#support { text-align: center; }
#support .sub { margin-left: auto; margin-right: auto; }
#support .installs { justify-content: center; }
.langpop-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8, 17, 12, .5); backdrop-filter: blur(3px); animation: lp-fade .25s ease both; }
.langpop { width: 100%; max-width: 360px; padding: 26px 22px 22px; border-radius: 3px 26px 3px 26px; background: var(--paper, #fff); color: var(--ink); text-align: center; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(8, 17, 12, .35); animation: lp-rise .35s cubic-bezier(.16, 1, .3, 1) both; }
.langpop-globe { width: 40px; height: 40px; margin: 0 auto 10px; padding: 8px; border-radius: 50%; background: var(--mint); fill: none; stroke: var(--leaf); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; display: block; }
.langpop-title { margin: 0 0 18px; font-weight: 700; font-size: 14px; color: var(--muted); letter-spacing: .01em; }
.langpop-list { display: grid; gap: 8px; }
.langpop-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.langpop-opt:hover { background: var(--mint); border-color: var(--leaf); transform: translateY(-1px); }
.langpop-opt:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.langpop-opt.is-pick { background: var(--mint); border-color: var(--leaf); }
.langpop-code { padding: 2px 7px; border-radius: 6px; background: var(--mint-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .langpop-back, .langpop { animation: none; } .langpop-opt { transition: none; } }


/* Back to top */
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50% 50% 50% 8px; border: 1px solid var(--line); background: var(--paper); color: var(--leaf); box-shadow: 0 8px 22px rgba(15, 42, 29, .18); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--mint); }
.totop:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body:has(.consent) .totop { display: none; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

.pcol, .card { border-left: 3px solid color-mix(in srgb, var(--leaf) 55%, transparent); }
body { overflow-x: clip; }

/* Ko-fi draws its own page: keep it in a quiet rounded card instead of recolouring it. */
.kofi-holder { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--mint); }
.kofi-frame { padding: 0; border-radius: 0; }

/* Carriage stack (wide screens, motion allowed): each section is a ticket that slides over the one before it. */
.stack { counter-reset: car; }
.stack-on { --stack-top: 84px; }
.stack-on > section.block { counter-increment: car; position: sticky; top: var(--top, 84px); margin: 0 0 22vh; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 26px 26px 12px 12px; background: var(--bg-card, var(--mint)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .12); transform-origin: 50% 0; transform: scale(calc(1 - var(--p, 0) * .06)) rotate(calc(var(--p, 0) * var(--tilt, 1deg))); will-change: transform; }
.stack-on > section.block:nth-of-type(even) { --tilt: -1deg; }
.stack-on > section.block:last-of-type { margin-bottom: 0; }
.stack-on > section.block::before { content: "CARD " counter(car, decimal-leading-zero) " · " attr(data-cars); position: absolute; right: 26px; top: 14px; font: 700 11px var(--display); letter-spacing: .16em; color: var(--muted); }
.stack-on > section.block::after { content: ""; position: absolute; left: 0; right: 0; top: 48px; height: 16px; pointer-events: none;
  background: radial-gradient(circle at 0 50%, var(--bg) 8px, transparent 8.5px) left / 16px 16px no-repeat, radial-gradient(circle at 100% 50%, var(--bg) 8px, transparent 8.5px) right / 16px 16px no-repeat, repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px) center / calc(100% - 44px) 1px no-repeat; }
.stack-on > section.block > :first-child { margin-top: 36px; }

/* Slideshow mode: while you are inside the stack, the rest of the page dims so the card gets the whole stage. */
.stage-dim { position: fixed; inset: 0; z-index: 22; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(3, 8, 5, .72), rgba(3, 8, 5, .93)); transition: opacity .5s ease; }
.stage-dim.on { opacity: 1; }
.stack-on > section.block { z-index: 30; }
@media (prefers-reduced-motion: reduce) { .stage-dim { transition: none; } }

/* Store buttons with the browser logos (not active yet). */
.installs a[data-store="chrome"], .installs a[data-store="firefox"] { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; border-radius: 16px; font-size: 15px; white-space: nowrap; font-weight: 700; }
.installs a[data-store="firefox"] { border: 1.5px solid var(--line); background: var(--mint); color: var(--ink); text-decoration: none; }
.installs .logo { flex: none; width: 26px; height: 26px; stroke: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }

/* The side scrollbar is hidden; a progress line at the very top shows where you are. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body.sbarwrap { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 6px; background: color-mix(in srgb, var(--ink) 14%, transparent); pointer-events: none; }
.sbar { position: fixed; left: 0; top: 0; height: 6px; width: 100%; z-index: 46; box-shadow: 0 0 10px color-mix(in srgb, var(--leaf) 70%, transparent); transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--leaf), var(--amber)); pointer-events: none; }

/* Support: the Ko-fi card sits alone on a clean stage; its grey backdrop is cropped away. */
#support .kofi-holder { width: min(401px, 100%); height: 640px; margin: 26px auto 0; border: 0; border-radius: 20px; background: transparent; box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 1px var(--line); }
#support .kofi-frame { width: 558px; max-width: none; margin-left: -79px; height: 712px; }
@media (max-width: 460px) { #support .kofi-holder { height: 712px; } #support .kofi-frame { width: 100%; margin-left: 0; } }

.navsep { display: inline-block; align-self: center; width: 1px; height: 22px; margin: 0 6px; background: var(--line); }
/* Immersive cards: each carriage fills the stage, wider than the page column, with a soft glow and bigger type. */
.stack-on > section.block { min-height: calc(100vh - 150px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-inline: calc(-1 * min(6vw, 84px)); padding: clamp(40px, 5vw, 76px); border-radius: 32px 32px 14px 14px;
  background-image: radial-gradient(ellipse at 88% -10%, color-mix(in srgb, var(--leaf) 22%, transparent), transparent 55%), radial-gradient(ellipse at 0% 110%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 50%); box-shadow: 0 -16px 60px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06); }
.stack-on > section.block h2 { font-size: clamp(34px, 4.3vw, 60px); line-height: 1.02; }
.stack-on > section.block .sub { font-size: clamp(16px, 1.5vw, 20px); max-width: 52ch; }
.stack-on > section.block::after { top: 52px; }
.stack-on > section.block > :not(.kicker) { align-self: stretch; }

.tree-widget { color-scheme: light; }

/* Support: copy on the left, the Ko-fi card on the right; one centred column until the card is loaded. */
#support { text-align: left; }
#support .supgrid { display: grid; grid-template-columns: minmax(0, 1fr) min(401px, 100%); gap: clamp(28px, 5vw, 72px); align-items: center; }
#support .sub { margin-left: 0; margin-right: 0; max-width: 46ch; }
#support .installs { justify-content: flex-start; margin-top: 20px; }
#support .kofibtn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 16px; font-size: 16px; font-weight: 700; border: 1.5px solid color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 14%, var(--mint)); color: var(--ink); }
#support .kofibtn:hover { background: color-mix(in srgb, var(--amber) 24%, var(--mint)); transform: translateY(-1px); }
#support .kofibtn svg { width: 22px; height: 22px; fill: var(--amber); stroke: none; }
#support .fine { margin: 22px 0 0; padding: 12px 14px; max-width: 46ch; border-left: 3px solid color-mix(in srgb, var(--leaf) 55%, transparent); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--leaf) 7%, transparent); font-size: 13.5px; line-height: 1.5; text-align: left; }
#support .supside { display: grid; justify-items: center; }
#support .kofi-holder { margin: 0; }
#support .kofi-holder:empty { display: none; }
#support .kofi-holder:not(:empty) ~ .kofi-card { display: none; }
.kofi-card { width: 100%; max-width: 401px; padding: clamp(24px, 4vw, 34px); border: 1px solid color-mix(in srgb, var(--amber) 38%, var(--line)); border-radius: 24px; text-align: center; background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--amber) 26%, transparent), transparent 62%), var(--mint); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.kofi-card .kc-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: color-mix(in srgb, var(--amber) 22%, transparent); animation: kcbeat 2.6s ease-in-out infinite; }
.kofi-card .kc-ic svg { width: 30px; height: 30px; fill: var(--amber); stroke: none; }
.kofi-card h3 { margin: 0 0 18px; font: 800 20px/1.2 var(--display); letter-spacing: -.02em; }
.kofi-card .kofibtn { width: 100%; justify-content: center; }
@keyframes kcbeat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.1); } 80% { transform: scale(1); } 90% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .kofi-card .kc-ic { animation: none; } }
@media (max-width: 900px) { #support .supgrid { grid-template-columns: minmax(0, 1fr); } #support .supcopy { text-align: center; } #support .sub, #support .fine { margin-inline: auto; } }
@media (max-width: 460px) { .kofi-card { padding: 22px 18px; border-radius: 20px; } #support .kofi-holder { border-radius: 16px; } }

/* One sun and one moon, shown for the current mode, on the site and in the extension. */
.themebtn .moon, .themeicon .moon { display: none; }
html[data-theme="dark"] .themebtn .sun, html[data-theme="dark"] .themeicon .sun { display: none; }
html[data-theme="dark"] .themebtn .moon, html[data-theme="dark"] .themeicon .moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .themebtn .sun, html:not([data-theme="light"]) .themeicon .sun { display: none; }
  html:not([data-theme="light"]) .themebtn .moon, html:not([data-theme="light"]) .themeicon .moon { display: inline-block; }
}
.themeicon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* Mobile top bar: brand, theme and a menu button; the links open as a panel under the bar. */
.menubtn { display: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--board-dim); cursor: pointer; }
.menubtn:hover, .rwbar.open .menubtn { background: var(--board-2); color: var(--board-fg); }
.menubtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rwbar > .navsep { margin: 0 2px; }
@media (max-width: 760px) {
  .rwbar { gap: 8px; }
  .menubtn { display: inline-grid; }
  .rwbar > .navsep { display: none; }
  .rwbar .brand { margin-right: auto; }
  .rwbar nav { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 16px; background: var(--board); box-shadow: inset 0 0 0 1px var(--board-edge), 0 20px 44px rgba(0, 0, 0, .4); }
  .rwbar.open nav { display: flex; }
  .rwbar nav a { display: block; padding: 14px 14px; font-size: 16px; border-radius: 12px; }
  .rwbar .rwclock { display: none; }
}

/* Phones: the same carriage stack and slideshow as on desktop, sized to fit. */
@media (max-width: 700px) {
  .stack-on > section.block { min-height: calc(100vh - 140px); min-height: calc(100svh - 140px); margin-inline: -8px; padding: 34px 20px 24px; border-radius: 22px 22px 10px 10px; margin-bottom: 14vh; }
  .stack-on > section.block h2 { font-size: clamp(28px, 8vw, 36px); }
  .stack-on > section.block::before { right: 18px; top: 12px; font-size: 10px; }
  .stack-on > section.block::after { top: 40px; }
  .stack-on > section.block > :first-child { margin-top: 28px; }
}
@media (max-width: 520px) {
  .installs a[data-store] { grid-column: 1 / -1; justify-content: center; }
  #board .cols, #board .rows li { grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; padding-inline: 12px; }
  #board .cols span:nth-child(3), #board .rows li .c { display: none; }
  #board .rows .flaps { font-size: 13px; }
  .sfoot { padding-bottom: 72px; }
}

.sendbtn:disabled { opacity: .7; cursor: progress; }

/* Contact: attachments and draft note */
.attach { display: grid; gap: 8px; }
.attlabel { font: 700 14px var(--display); }
.attbtn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.attbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.attbtn:disabled { opacity: .5; cursor: not-allowed; }
.attlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.attlist li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper, #fff); }
.attth { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: color-mix(in srgb, var(--leaf) 14%, transparent); font: 800 11px var(--display); color: var(--leaf); }
.attname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.attsize { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.attrm { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.attrm:hover, .attrm:focus-visible { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.contactcard .form.drop { outline: 2px dashed var(--leaf); outline-offset: 10px; border-radius: 14px; }
.metarow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: -10px; }
.metarow .count { margin: 0; }
.draftnote { flex: 1; text-align: left; color: var(--muted); font: 500 12px var(--display); }
.draftbtn { padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* What's new: release notes next to the install buttons */
.wn { position: relative; width: fit-content; margin: 12px 0 0; }
.cta-band .wn { margin-inline: auto; }
.wn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--leaf); font: 700 14px var(--display); cursor: pointer; }
.wn-lbl { text-decoration: underline dashed 1.5px; text-underline-offset: 5px; }
.wn-btn b { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--ink); font-size: 12px; text-decoration: none; }
.wn-btn:hover .wn-lbl, .wn-btn[aria-expanded=true] .wn-lbl { text-decoration-style: solid; }
.wn-pop { position: absolute; z-index: 60; top: 100%; left: 0; width: min(340px, calc(100vw - 24px)); padding: 14px 14px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--mint); box-shadow: 0 18px 50px rgba(0, 0, 0, .24); text-align: left; animation: wnin .18s var(--ease-out); }
.wn-pop[hidden] { display: none; }
@keyframes wnin { from { opacity: 0; transform: translateY(-4px); } }
.wn-head { display: flex; align-items: center; gap: 8px; }
.wn-head strong { font: 800 16px var(--display); }
.wn-tag { padding: 2px 8px; border-radius: 999px; font: 800 10px var(--display); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--leaf) 20%, transparent); color: var(--leaf); }
.wn-tag[data-k=old] { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); }
.wn-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.wn-title { margin: 8px 0 6px; font: 700 14px var(--display); }
.wn-notes { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.wn-notes li::marker { color: var(--amber); }
.wn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.wn-dots { display: flex; gap: 5px; }
.wn-dots span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.wn-dots span.on { background: var(--leaf); }
.wn-nav { display: flex; gap: 4px; }
.wn-nav button { width: 44px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.wn-nav button:hover:not(:disabled), .wn-nav button:focus-visible { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.wn-nav button:disabled { opacity: .3; cursor: default; }
@media (prefers-reduced-motion: reduce) { .wn-pop { animation: none; } }

@media (max-width: 900px) {
  /* Stacked layout: the notes open in the flow, pushing the cards down instead of floating over them. */
  .wn { width: 100%; }
  .cta-band .wn { text-align: center; }
  .wn-pop { position: static; width: 100%; margin-top: 6px; left: auto !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
}

/* Contact page: title spacing and the handwritten "hello" */
.contactblock .kicker { margin-bottom: 16px; }
.contactblock .pagetitle { margin: 0 0 14px; line-height: 1.12; }
.contactblock .pagetitle .hand { display: inline-block; padding: 0 .14em .06em 0; font-family: "Pacifico", cursive; font-weight: 400; font-size: .94em; letter-spacing: 0; color: var(--amber); }
.contactblock .pagetitle .hand.go { -webkit-mask-image: linear-gradient(100deg, #000 58%, transparent 74%); mask-image: linear-gradient(100deg, #000 58%, transparent 74%); -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: handwrite 1.7s cubic-bezier(.45, .05, .25, 1) .15s both; }
@keyframes handwrite { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: rotate(-1.5deg) translateY(2px); } 70% { transform: rotate(-.4deg); } to { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contactblock .pagetitle .hand.go { animation: none; -webkit-mask-image: none; mask-image: none; } }
.contactblock .sub { margin: 0 0 6px; line-height: 1.55; }
.contactcard { margin-top: 30px; }

/* Goodbye page */
.reasons { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
.reasons legend { margin-bottom: 8px; padding: 0; font: 700 14px var(--display); }
.dlcard { margin-top: 20px; }
.dlcard h2 { margin: 0 0 6px; font: 800 18px var(--display); }
.dlcard .btn { margin-top: 10px; }

/* Coverage map */
.covcard { margin: 0; padding: clamp(12px, 3vw, 20px); border: 1px solid var(--line); border-radius: 22px; background: var(--mint); }
.cmapwrap { border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.cmap { display: block; width: 100%; height: auto; }
.cmap .nc path { fill: color-mix(in srgb, var(--ink) 16%, transparent); stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: .5; }
.cmap .cv path { fill: var(--leaf); stroke: var(--mint); stroke-width: .7; stroke-linejoin: round; transition: filter .2s; }
.cmap .cv path:hover { filter: brightness(1.12); }
.cmleg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.cmleg span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sw.cv { background: var(--leaf); } .sw.nc { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.cmap .cv path.lim { fill: url(#hatch); stroke: var(--leaf); stroke-width: .8; }
.cmap .hb { fill: color-mix(in srgb, var(--leaf) 18%, transparent); } .cmap .hl { fill: var(--leaf); }
.sw.lim { background: repeating-linear-gradient(45deg, var(--leaf) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1.5px var(--leaf); }
.cmnote { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .cmnote strong { color: var(--ink); }

/* Download .zip button: same size and shape as the store buttons, with an icon and a small caption. */
.installs a[data-store="zip"] { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 16px; font-size: 15px; font-weight: 600; line-height: 1.15; white-space: nowrap; border: 1.5px dashed var(--leaf); background: transparent; color: var(--leaf); text-decoration: none; transition: background-color .2s, transform .15s; }
.installs a[data-store="zip"]:hover { background: var(--mint); }
.installs a[data-store="zip"]:active { transform: scale(.98); }
.installs a[data-store="zip"] svg.dl { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.installs a[data-store="zip"] small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--muted); }
.installs a[data-store="zip"] svg.dl { filter: none; }