/* Paisafy companion site — Material 3 Expressive
   Mirrors the app's design system: emerald primary, mint container,
   tonal surfaces (no shadows), large rounded shapes, Roboto Flex,
   tabular money figures, Material Symbols Rounded chrome icons. */

:root {
  --primary:#006C4C; --on-primary:#FFFFFF;
  --primary-container:#89F8C7; --on-primary-container:#002114;
  --secondary:#4D6357; --secondary-container:#CFE9D9; --on-secondary-container:#092016;
  --tertiary:#3D6373; --tertiary-container:#C1E8FB; --on-tertiary-container:#001F29;
  --error:#BA1A1A;
  --bg:#FBFDF9; --on-bg:#191C1A; --on-surface-var:#414941;
  --sc-lowest:#FFFFFF; --sc-low:#F1F6F1; --sc:#EBF1EC; --sc-high:#E5EBE6; --sc-highest:#DFE4E0;
  --outline:#707972; --outline-variant:#C0C9C1;

  /* money signal */
  --income:#1B5E20; --expense:#B71C1C; --transfer:#3D6373;

  /* budget status */
  --ontrack:#C7EFD4; --ontrack-acc:#2E7D32; --ontrack-on:#002114;
  --watch:#FDE7CF; --watch-acc:#B76E00; --watch-on:#3D2800;
  --over:#FADAD7; --over-acc:#B71C1C; --over-on:#410002;

  /* account avatar palette */
  --indigo:#3730A3; --teal:#0F766E; --rose:#9F1239; --amber:#B45309;

  --max:1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary:#6CDBAC; --on-primary:#003825;
    --primary-container:#005138; --on-primary-container:#89F8C7;
    --secondary:#B4CCBE; --secondary-container:#354B40; --on-secondary-container:#CFE9D9;
    --tertiary:#A5CCE0; --tertiary-container:#244C5A; --on-tertiary-container:#C1E8FB;
    --error:#FFB4AB;
    --bg:#191C1A; --on-bg:#E1E3DF; --on-surface-var:#C0C9C1;
    --sc-lowest:#0F1210; --sc-low:#1C201D; --sc:#202522; --sc-high:#2B302D; --sc-highest:#363A38;
    --outline:#8A938C; --outline-variant:#404943;
    --income:#6CDBAC; --expense:#FFB4AB; --transfer:#A5CCE0;
    --ontrack:#1F3A2A; --ontrack-acc:#6CDBAC; --ontrack-on:#B7E4C6;
    --watch:#3D2C1A; --watch-acc:#E9B97A; --watch-on:#FFDEB0;
    --over:#4A1517; --over-acc:#FFB4AB; --over-on:#FFD9D5;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--on-bg);
  font-family:"Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}

.material-symbols-rounded {
  font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; direction:ltr; -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'opsz' 24,'wght' 400,'FILL' 0,'GRAD' 0;
}

h1,h2,h3 { margin:0 0 0.4em; font-weight:700; letter-spacing:-0.01em; line-height:1.1; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.money { font-weight:800; font-variant-numeric:tabular-nums; }
.pos { color:var(--income); } .neg { color:var(--expense); } .xfer { color:var(--transfer); }

/* ---------- top app bar ---------- */
.bar { position:sticky; top:0; z-index:30; background:var(--sc-low); }
.bar .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; font-size:1.4rem; color:var(--on-bg); }
.brand:hover { text-decoration:none; }
.logo-tile { width:34px; height:34px; object-fit:contain; display:block; flex:none; }
.bar nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.bar nav a { color:var(--on-surface-var); font-weight:500; font-size:.95rem; padding:8px 14px; border-radius:999px; }
.bar nav a:hover { color:var(--on-bg); background:var(--sc-high); text-decoration:none; }
.bar nav a.active { color:var(--on-bg); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-weight:600;
  font-size:.98rem; padding:14px 26px; border-radius:999px; border:none; cursor:pointer; }
.btn .material-symbols-rounded { font-size:20px; }
.btn-filled { background:var(--primary); color:var(--on-primary); }
.btn-filled:hover { text-decoration:none; filter:brightness(1.06); }
.btn-tonal { background:var(--secondary-container); color:var(--on-secondary-container); }
.btn-tonal:hover { text-decoration:none; filter:brightness(.98); }
.btn.soon { opacity:.6; cursor:default; }
.btn.soon:hover { filter:none; }

/* ---------- hero ---------- */
.hero { padding:72px 0 64px; }
.hero .wrap { display:grid; grid-template-columns:1fr 0.92fr; gap:56px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:var(--secondary-container);
  color:var(--on-secondary-container); font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:24px; }
.eyebrow .material-symbols-rounded { font-size:16px; }
.hero h1 { font-size:clamp(2.6rem,6vw,4.2rem); font-weight:800; letter-spacing:-0.02em; }
.hero p.lead { font-size:1.18rem; color:var(--on-surface-var); max-width:40ch; margin:22px 0 32px; }
.cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.reassure { display:flex; align-items:center; gap:7px; color:var(--on-surface-var); font-size:.9rem; margin-top:22px; }
.reassure .material-symbols-rounded { font-size:18px; color:var(--primary); }

/* ---------- recreated app cluster ---------- */
.cluster { position:relative; display:flex; flex-direction:column; gap:16px; }
.card { background:var(--sc-low); border-radius:32px; padding:22px 20px; }
.balance { background:var(--primary-container); color:var(--on-primary-container); position:relative; }
.balance .lbl { font-size:.7rem; font-weight:600; letter-spacing:.12em; opacity:.8; }
.balance .big { font-size:2.9rem; font-weight:800; letter-spacing:-0.02em; margin:2px 0 16px; }
.balance .cols { display:flex; gap:12px; }
.balance .col { flex:1; }
.balance .col .k { font-size:.62rem; font-weight:600; letter-spacing:.1em; opacity:.75; }
.balance .col .v { font-weight:800; font-size:1.28rem; margin-top:4px; }
.balance .eye { position:absolute; top:22px; right:22px; color:var(--on-primary-container); opacity:.7; }

.txn { background:var(--sc-high); display:flex; align-items:center; gap:14px; padding:14px 16px; }
.tile { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:20px; flex:none; }
.txn .mid { flex:1; min-width:0; }
.txn .ttl { font-weight:600; font-size:.98rem; }
.txn .meta { font-size:.8rem; color:var(--on-surface-var); }
.txn .amt { font-size:1.3rem; font-weight:700; }

.budget { background:var(--sc-low); }
.budget .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.budget .name { display:flex; align-items:center; gap:10px; font-weight:600; }
.budget .name .tile { width:34px; height:34px; border-radius:11px; font-size:16px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600;
  padding:5px 11px; border-radius:999px; }
.chip .dot { width:7px; height:7px; border-radius:50%; }
.chip.ontrack { background:var(--ontrack); color:var(--ontrack-on); }
.chip.ontrack .dot { background:var(--ontrack-acc); }
.chip.watch { background:var(--watch); color:var(--watch-on); }
.chip.watch .dot { background:var(--watch-acc); }
.budget .figs { display:flex; justify-content:space-between; font-size:.82rem; color:var(--on-surface-var); margin-top:8px; }
.budget .figs b { color:var(--on-bg); font-weight:700; }

/* AI Overview card (brand tertiary) */
.card.ai { background:var(--tertiary-container); color:var(--on-tertiary-container); }
.ai-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tertiary); margin-bottom:14px; }
.ai-eyebrow .material-symbols-rounded { font-size:16px; color:var(--tertiary); font-variation-settings:'opsz' 24,'wght' 500,'FILL' 1,'GRAD' 0; }
.card.ai .ai-hero { font-size:2.2rem; font-weight:800; color:var(--tertiary); letter-spacing:-0.02em; line-height:1; margin-bottom:8px; }
.card.ai .ai-head { font-size:1.2rem; font-weight:800; letter-spacing:-0.01em; line-height:1.14; margin:0 0 6px; color:var(--on-tertiary-container); }
.card.ai .ai-body { font-size:.92rem; line-height:1.5; margin:0; color:color-mix(in srgb,var(--on-tertiary-container) 82%,transparent); }

/* wavy (M3 Expressive squiggle) progress */
.wavy { position:relative; height:24px; }
.wavy .track { position:absolute; inset:0; display:flex; align-items:center; }
.wavy .track line { stroke:var(--outline-variant); stroke-width:4; stroke-linecap:round; }
.wavy .fill { position:absolute; inset:0; overflow:hidden; }
.wavy .fill svg { display:block; }
.wavy .fill path { fill:none; stroke:var(--primary); stroke-width:4; stroke-linecap:round; }
.wavy.over .fill path { stroke:var(--over-acc); }

/* ---------- sections ---------- */
section { padding:72px 0; }
.sec-head { max-width:620px; margin-bottom:48px; }
.sec-head .eyebrow { margin-bottom:18px; }
.sec-head h2 { font-size:clamp(2rem,4vw,2.9rem); font-weight:800; letter-spacing:-0.02em; }
.sec-head p { color:var(--on-surface-var); font-size:1.1rem; margin:14px 0 0; }
.alt { background:var(--sc-low); }

/* feature grid */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.feature { background:var(--sc-lowest); border-radius:28px; padding:28px; border:1px solid var(--outline-variant); }
.alt .feature { background:var(--bg); }
.feature .ftile { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:20px;
  background:color-mix(in srgb,var(--primary) 13%,transparent); color:var(--primary); }
.feature .ftile .material-symbols-rounded { font-size:28px; }
.feature:nth-child(2) .ftile { background:color-mix(in srgb,var(--tertiary) 16%,transparent); color:var(--tertiary); }
.feature:nth-child(3) .ftile { background:color-mix(in srgb,var(--amber) 14%,transparent); color:var(--amber); }
.feature:nth-child(4) .ftile { background:color-mix(in srgb,var(--indigo) 14%,transparent); color:var(--indigo); }
.feature h3 { font-size:1.25rem; margin-bottom:8px; }
.feature p { margin:0; color:var(--on-surface-var); font-size:.97rem; }

/* privacy band */
.privacy-card { background:var(--primary-container); color:var(--on-primary-container);
  border-radius:48px; padding:56px 48px; }
.privacy-card .eyebrow { background:color-mix(in srgb,var(--on-primary-container) 12%,transparent);
  color:var(--on-primary-container); }
.privacy-card h2 { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; max-width:18ch; letter-spacing:-0.02em; }
.privacy-card ul { list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; }
.privacy-card li { display:flex; gap:13px; font-size:1.02rem; }
.privacy-card li .material-symbols-rounded { flex:none; font-size:24px; color:var(--primary);
  font-variation-settings:'FILL' 1; }
@media (prefers-color-scheme: dark) { .privacy-card li .material-symbols-rounded { color:#89F8C7; } }

/* video */
.video .sec-head { text-align:center; margin-left:auto; margin-right:auto; }
.video-frame { max-width:900px; margin:0 auto; aspect-ratio:16/9; border-radius:28px; overflow:hidden;
  background:var(--sc-high); border:1px solid var(--outline-variant); }
.video-frame iframe { width:100%; height:100%; border:0; display:block; }

/* screens */
.screens { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.screens figure { margin:0; }
.screens img { width:100%; display:block; border-radius:28px; background:var(--sc-high); }
.screens figcaption { margin-top:12px; font-size:.86rem; color:var(--on-surface-var); font-weight:500; text-align:center; }

/* closing CTA */
.closing { text-align:center; }
.closing h2 { font-size:clamp(2rem,4.5vw,3rem); font-weight:800; letter-spacing:-0.02em; }
.closing p { color:var(--on-surface-var); font-size:1.1rem; margin:14px auto 30px; max-width:42ch; }
.closing .cta { justify-content:center; }

/* ---------- doc pages (privacy / faq) ---------- */
.doc { padding:56px 0 80px; }
.doc .wrap { max-width:820px; }
.doc h1 { font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.doc .updated { color:var(--on-surface-var); font-size:.95rem; margin:0 0 28px; }
.doc h2 { font-size:1.5rem; font-weight:700; margin-top:44px; }
.doc h3 { font-size:1.18rem; font-weight:700; margin-top:28px; }
.doc p, .doc li { color:var(--on-bg); }
.doc a { font-weight:500; }
.doc hr { border:none; border-top:1px solid var(--outline-variant); margin:40px 0; }
.doc .lead-note { background:var(--primary-container); color:var(--on-primary-container);
  border-radius:20px; padding:18px 22px; font-size:1.02rem; }
.doc code { background:var(--sc-high); border-radius:6px; padding:1px 6px; font-size:.92em; }
.doc table { width:100%; border-collapse:collapse; margin:18px 0; font-size:.95rem; }
.doc th, .doc td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--outline-variant); vertical-align:top; }

/* faq accordions */
.faq-item { border:1px solid var(--outline-variant); border-radius:20px;
  background:var(--sc-lowest); margin-bottom:14px; overflow:hidden; }
.faq-item summary { cursor:pointer; padding:20px 24px; font-weight:600; font-size:1.08rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"expand_more"; font-family:"Material Symbols Rounded";
  color:var(--primary); font-size:1.5rem; flex:none; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(180deg); }
.faq-item .body { padding:0 24px 22px; color:var(--on-surface-var); }
.faq-item .body p { margin:0 0 10px; }

/* ---------- feedback form ---------- */
.feedback-form { margin-top:36px; }
.field { margin-bottom:22px; }
.field > label { display:block; font-weight:600; font-size:.98rem; margin-bottom:8px; }
.field .hint { font-weight:400; color:var(--on-surface-var); font-size:.86rem; }
.control {
  width:100%; font-family:inherit; font-size:1rem; color:var(--on-bg);
  background:var(--sc-lowest); border:1px solid var(--outline-variant); border-radius:16px;
  padding:14px 16px; transition:border-color .15s, box-shadow .15s; }
.doc .control { color:var(--on-bg); }
textarea.control { min-height:150px; resize:vertical; line-height:1.5; }
select.control { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23707972' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:44px; }
.control:hover { border-color:var(--outline); }
.control:focus { outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent); }
.control::placeholder { color:var(--on-surface-var); opacity:.7; }

/* segmented feedback-type chips */
.seg { display:flex; flex-wrap:wrap; gap:10px; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--sc-lowest); border:1px solid var(--outline-variant); color:var(--on-surface-var);
  font-weight:600; font-size:.94rem; padding:11px 18px; border-radius:999px; transition:all .15s; }
.seg label .material-symbols-rounded { font-size:19px; }
.seg label:hover { border-color:var(--outline); color:var(--on-bg); }
.seg input:checked + label { background:var(--primary-container); color:var(--on-primary-container);
  border-color:transparent; }
.seg input:focus-visible + label { box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent); }

.form-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.btn[disabled] { opacity:.55; cursor:default; }
.btn[disabled]:hover { filter:none; }
.form-note { color:var(--on-surface-var); font-size:.86rem; margin:20px 0 0;
  display:flex; align-items:center; gap:7px; }
.form-note .material-symbols-rounded { font-size:18px; color:var(--primary); }

/* status banner (success / error) */
.form-status { display:none; align-items:flex-start; gap:12px; border-radius:20px;
  padding:18px 22px; margin-top:8px; font-size:1rem; }
.form-status.show { display:flex; }
.form-status .material-symbols-rounded { flex:none; font-size:24px; margin-top:1px; }
.form-status.ok { background:var(--ontrack); color:var(--ontrack-on); }
.form-status.ok .material-symbols-rounded { color:var(--ontrack-acc); font-variation-settings:'FILL' 1; }
.form-status.err { background:var(--over); color:var(--over-on); }
.form-status.err .material-symbols-rounded { color:var(--over-acc); font-variation-settings:'FILL' 1; }
.form-status .h { font-weight:700; display:block; margin-bottom:2px; }

/* ---------- footer ---------- */
footer { background:var(--sc-low); padding:48px 0; margin-top:24px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
footer .links { display:flex; gap:8px; flex-wrap:wrap; }
footer .links a { color:var(--on-surface-var); font-size:.92rem; padding:8px 12px; border-radius:999px; }
footer .links a:hover { background:var(--sc-high); color:var(--on-bg); text-decoration:none; }
footer .muted { color:var(--on-surface-var); font-size:.86rem; margin:6px 0 0; }

@media (max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; gap:40px; }
  .privacy-card { padding:40px 28px; border-radius:36px; }
  .privacy-card ul { grid-template-columns:1fr; }
}

/* ---------- guide ---------- */
.guide .wrap { max-width:1000px; }
.guide .updated { max-width:60ch; }

/* journey table of contents */
.gtoc { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:30px 0 8px; }
.gtoc a { display:block; background:var(--sc-low); border:1px solid var(--outline-variant);
  border-radius:24px; padding:20px 20px 22px; color:var(--on-bg); }
.gtoc a:hover { background:var(--sc); text-decoration:none; }
.gtoc .jnum { width:34px; height:34px; border-radius:11px; background:var(--primary-container);
  color:var(--on-primary-container); display:grid; place-items:center; font-weight:800; font-size:1.05rem; }
.gtoc h3 { font-size:1.08rem; margin:14px 0 5px; }
.gtoc p { margin:0; color:var(--on-surface-var); font-size:.9rem; line-height:1.45; }

/* journey section */
.journey { scroll-margin-top:80px; }
.journey-head { display:flex; gap:18px; align-items:flex-start; margin:64px 0 8px; padding-top:8px;
  border-top:1px solid var(--outline-variant); }
.journey:first-of-type .journey-head { border-top:none; margin-top:40px; }
.journey-head .jnum { flex:none; width:46px; height:46px; border-radius:15px; margin-top:6px;
  background:var(--primary); color:var(--on-primary); display:grid; place-items:center; font-weight:800; font-size:1.2rem; }
.journey-head h2 { font-size:clamp(1.6rem,3.4vw,2.1rem); margin:0; }
.journey-head .jlead { margin:6px 0 0; color:var(--on-surface-var); font-size:1.05rem; }

/* a step: phone shots + numbered notes */
.gstep { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:40px;
  align-items:center; margin:44px 0; }
.gstep.rev .gshots { order:2; }
.gstep h3 { font-size:1.3rem; margin:0 0 4px; }
.gstep .kicker { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); margin:0 0 8px; display:inline-flex; align-items:center; gap:6px; }
.gstep .intro { color:var(--on-surface-var); margin:6px 0 18px; }

.gshots { display:flex; gap:16px; justify-content:center; }
.gshot { position:relative; width:100%; max-width:280px; border-radius:30px; background:#0b0e0c;
  padding:7px; border:1px solid var(--outline-variant); box-sizing:border-box; }
.gshots.duo .gshot { max-width:215px; }
.gshot img { width:100%; display:block; border-radius:24px; }
.gpin { position:absolute; width:25px; height:25px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--primary); color:var(--on-primary); font-size:.78rem; font-weight:800;
  display:grid; place-items:center; box-shadow:0 0 0 3px var(--bg),0 2px 5px rgba(0,0,0,.45); }

/* numbered notes (numbers mirror the pins) */
.gnotes { list-style:none; counter-reset:g; margin:0; padding:0; }
.gnotes li { counter-increment:g; position:relative; padding:0 0 15px 42px; color:var(--on-bg); }
.gnotes li:last-child { padding-bottom:0; }
.gnotes li::before { content:counter(g); position:absolute; left:0; top:-1px; width:27px; height:27px;
  border-radius:50%; background:var(--primary); color:var(--on-primary); font-weight:800; font-size:.82rem;
  display:grid; place-items:center; }
.gnotes li .h { font-weight:700; }
.gnotes li span.muted { color:var(--on-surface-var); }

/* tip callout */
.gtip { display:flex; gap:12px; background:var(--secondary-container); color:var(--on-secondary-container);
  border-radius:20px; padding:15px 20px; margin:22px 0 0; font-size:.96rem; }
.gtip .material-symbols-rounded { flex:none; font-size:22px; color:var(--primary); }
@media (prefers-color-scheme: dark) { .gtip .material-symbols-rounded { color:#89F8C7; } }

@media (max-width:760px) {
  .gstep { grid-template-columns:1fr; gap:24px; }
  .gstep.rev .gshots { order:0; }
  .gshots { max-width:320px; margin:0 auto; }
}

/* ---------- interactive tour (progressive enhancement) ----------
   All guide text lives in the static HTML and is NEVER display:none'd, so
   search crawlers and no-JS readers get the full content. JS only adds
   emphasis (glowing pin + highlighted note) and auto-advances the steps. */
.gshots { position:relative; }
.gpin { cursor:pointer; border:none; font-family:inherit; padding:0; }
.js-tour .gpin { opacity:.4; transform:translate(-50%,-50%) scale(.8); transition:opacity .18s, transform .18s; }
.js-tour .gpin.is-active { opacity:1; transform:translate(-50%,-50%) scale(1.18);
  animation:gpulse 1.7s ease-out infinite; }
@keyframes gpulse {
  0% { box-shadow:0 0 0 3px var(--bg),0 0 0 6px color-mix(in srgb,var(--primary) 55%,transparent); }
  70% { box-shadow:0 0 0 3px var(--bg),0 0 0 16px transparent; }
  100% { box-shadow:0 0 0 3px var(--bg),0 0 0 16px transparent; }
}

/* the notes list stays fully visible; JS just emphasises the active step */
.gnotes li { border-radius:12px; transition:opacity .25s, background .25s; }
.js-tour .gnotes li { opacity:.55; cursor:pointer; padding-top:4px; padding-bottom:11px; margin-bottom:4px; }
.js-tour .gnotes li.is-active { opacity:1; background:color-mix(in srgb,var(--primary) 9%,transparent); }
.js-tour .gnotes li.is-active::before { box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent); }

/* step controls (only meaningful with JS) */
.gtour-nav { display:none; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap; }
.js-tour .gtour-nav { display:flex; }
.gtour-nav button { font-family:inherit; font-weight:600; font-size:.92rem; border:none; cursor:pointer;
  padding:9px 16px; border-radius:999px; background:var(--secondary-container); color:var(--on-secondary-container);
  display:inline-flex; align-items:center; gap:6px; }
.gtour-nav button:hover { filter:brightness(.97); }
.gtour-nav button.tplay { background:var(--primary); color:var(--on-primary); }
.gtour-nav button .material-symbols-rounded { font-size:18px; }
.gtour-nav .tcount { font-size:.88rem; color:var(--on-surface-var); font-weight:600; min-width:84px; text-align:center; }
@media (prefers-reduced-motion: reduce) { .js-tour .gpin.is-active { animation:none; } }