:root{
    /* --bg and --border are deliberately NOT redeclared here: style.css
       already defines both (light + dark) on :root, and this file loads
       after it, so leaving them out lets the page inherit the site's own
       already-theme-aware values instead of silently overriding them
       (that collision was the actual bug behind the guide staying light
       while the rest of the site went dark -- it doesn't just affect
       .guide-hero etc, --bg/--border also feed the shared header/footer
       from style.css). --ink/--subtle/--card aren't in style.css under
       those names, so they're aliased to the closest equivalent tokens
       it does have, which keeps this page dark-mode-aware for free. */
    --ink:var(--text); --subtle:var(--text-soft); --card:var(--surface);
    --primary:#0B5FFF; --primary-dark:#0A4FD6; --primary-soft:#E5EEFF;
    --success:#0A7A32; --success-soft:#E4F5E8;
    --warning:#B8720A; --warning-soft:#FBF0DE;
    --danger:#B00020; --danger-soft:#FBE7E9;
    --spot:#FFB020; --spot-ring:rgba(255,176,32,.55); --spot-ink:#8A5300;
  }

  @media (prefers-color-scheme:dark){
    :root{
      --primary:#5B9BFF; --primary-dark:#8FBCFF; --primary-soft:rgba(91,155,255,.16);
      --success:#34C264; --success-soft:rgba(52,194,100,.16);
      --warning:#E0A542; --warning-soft:rgba(224,165,66,.16);
      --danger:#FF6B7A; --danger-soft:rgba(255,107,122,.16);
      --spot:#FFC24D; --spot-ring:rgba(255,194,77,.5); --spot-ink:#F5D9A8;
    }
  }

  /* The simulated phone screens are meant to look like real screenshots of
     the app -- always light, same as the app's own actual screens --
     regardless of the site's light/dark setting. Re-pinning every token
     back to its light literal here, scoped to .phone-shell, keeps every
     rule inside the mockup unchanged (they still just read var(--ink)
     etc.) while the rest of the page above adapts normally.

     --text/--text-soft/--accent* are style.css's OWN tokens, not guide.css's
     (--ink/--subtle/--primary) -- they're included here too because
     style.css has generic element selectors (p, li { color: var(--text) };
     a { color: var(--accent) }) that match plain tags anywhere on the page,
     phone mockup included, and a direct selector match always wins over
     inherited color regardless of what .phone-shell inherits. Missed this
     the first pass and .confirm-text (a bare <p>) went invisible in dark
     mode because of it -- re-pinning style.css's tokens too closes off the
     whole class, not just that one instance. */
  .phone-shell{
    --ink:#14161A; --subtle:#5B6169; --bg:#FBFBFD; --card:#FFFFFF; --border:#E4E5E9;
    --primary:#0B5FFF; --primary-dark:#0A4FD6; --primary-soft:#E5EEFF;
    --success:#0A7A32; --success-soft:#E4F5E8;
    --warning:#B8720A; --warning-soft:#FBF0DE;
    --danger:#B00020; --danger-soft:#FBE7E9;
    --spot:#FFB020; --spot-ring:rgba(255,176,32,.55); --spot-ink:#8A5300;
    --text:#1a1f26; --text-soft:#5a6572; --accent:#2471d9; --accent-strong:#1b57a6; --accent-contrast:#ffffff;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--ink); font-family:'Atkinson Hyperlegible', system-ui, sans-serif; padding-inline:20px; padding-block:0 48px;}
  h1,h2,h3,.disp{font-family:'Baloo 2', system-ui, sans-serif; text-wrap:balance;}
  p{line-height:1.55;}
  .wrap{max-width:1040px; margin-inline:auto;}
  a{color:var(--primary);}
  /* Browsers give <button> its own default text color instead of
     inheriting the page's -- .task-card is a button, and its h3 title
     (no color of its own) was silently falling back to that default.
     Looked fine in light mode by coincidence (default is dark), went
     invisible on a dark card. color:inherit here fixes every button on
     the page, not just this one. */
  button{font-family:inherit; color:inherit;}

  /* ---------- Nav ---------- */
  .nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); margin-inline:-20px; padding-inline:20px;}
  .nav-row{max-width:1040px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; padding-block:12px;}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:800; font-size:20px; color:var(--primary-dark);}
  .brand-mark{width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#6C6BFF,#3E8BFF); flex:none; overflow:hidden;}
  .brand-mark img{width:100%; height:100%; display:block; object-fit:cover;}
  .lang-toggle{display:flex; background:var(--primary-soft); border-radius:999px; padding:3px; gap:2px;}
  .lang-toggle button{border:none; background:none; padding:6px 14px; border-radius:999px; font-weight:700; font-size:14px; color:var(--primary-dark); cursor:pointer;}
  .lang-toggle button.active{background:var(--primary); color:#fff;}

  /* ---------- Hero ---------- */
  .guide-hero{padding-block:40px 28px; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;}
  .eyebrow{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-dark); margin:0 0 10px;}
  .guide-hero h1{font-size:clamp(30px,4vw,44px); font-weight:800; margin:0 0 14px; color:var(--ink);}
  .guide-hero p{font-size:17px; color:var(--subtle); max-width:46ch; margin:0;}
  .hero-art{justify-self:center; width:100%; max-width:230px;}
  .hero-art-circle{position:relative; width:100%; aspect-ratio:1; border-radius:50%; background:var(--primary-soft); display:flex; align-items:center; justify-content:center;}
  .hero-art-icon{width:54%; border-radius:22%; box-shadow:0 16px 30px -10px rgba(11,95,255,.4); display:block;}
  .hero-art-badge{position:absolute; right:8%; bottom:9%; width:23%; aspect-ratio:1; border-radius:50%; background:var(--spot); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(255,176,32,.55);}
  .hero-art-badge svg{width:52%; height:52%;}

  /* ---------- Task grid ---------- */
  .section-label{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--subtle); margin:0 0 14px;}
  .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:8px;}
  .task-card{text-align:left; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; cursor:pointer; display:flex; flex-direction:column; gap:12px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
  .task-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(20,22,26,.35); border-color:var(--primary-dark);}
  .task-card:focus-visible{outline:3px solid var(--spot); outline-offset:2px;}
  .task-icon{width:52px; height:52px; border-radius:14px; background:var(--primary-soft); color:var(--primary-dark); display:flex; align-items:center; justify-content:center;}
  .task-icon svg{width:28px; height:28px;}
  .task-card h3{margin:0; font-size:19px; font-weight:700;}
  .task-card p{margin:0; font-size:14.5px; color:var(--subtle);}
  .task-go{margin-top:auto; font-weight:700; font-size:14px; color:var(--primary); display:flex; align-items:center; gap:4px;}

  /* ---------- Walkthrough view ---------- */
  #walkthrough{margin-top:8px;}
  .wk-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
  .wk-close{display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:9px 16px; font-weight:700; font-size:14.5px; color:var(--ink); cursor:pointer;}
  .wk-close svg{width:16px; height:16px;}
  .wk-title{font-weight:800; font-size:20px;}
  .wk-step-label{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--primary-dark);}

  .wk-stage{display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start;}
  /* color:var(--ink) here (not just the --ink custom-property re-pin
     above) matters: any phone-mockup text with no color of its own was
     still inheriting the *computed* color from body, which resolves
     var(--ink) against the page's own dark-mode value, not this scope's
     re-pinned one -- inheritance carries the resolved color down, it
     doesn't re-evaluate var() at each descendant. Setting color here
     stops that chain at the mockup's own boundary. */
  .phone-shell{width:296px; max-width:86vw; aspect-ratio:296/608; border-radius:42px; background:linear-gradient(155deg,#8fb8ff 0%,#4a7de0 50%,#2c5bc4 100%); padding:7px; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 26px 48px -18px rgba(20,22,26,.5); margin-inline:auto; color:var(--ink);}
  /* Volume rocker + power button: small bars on the right edge, protruding
     from the frame like a real device's -- .phone-shell has no overflow
     rule, so these aren't clipped by the rounded corners. */
  .phone-shell::before, .phone-shell::after{content:''; position:absolute; right:-3px; width:3px; border-radius:2px 0 0 2px; background:linear-gradient(180deg,#a9caff,#5a89d6); box-shadow:-1px 0 2px rgba(0,0,0,.25);}
  .phone-shell::before{top:15%; height:58px;}
  .phone-shell::after{top:27%; height:36px;}
  .phone-screen{position:relative; width:100%; height:100%; background:var(--bg); border-radius:37px; overflow:hidden; display:flex; flex-direction:column; border:2.5px solid #0C0D10;}
  .phone-notch{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:13px; height:13px; background:#0C0D10; border-radius:50%; z-index:5; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);}
  /* #phoneScreen must have a real height, not content-driven auto: a
     flex column's non-flexed child sizes to content, and an absolutely
     positioned step (the notification-permission overlay) contributes
     nothing to that content height at all, collapsing its container to
     zero and hiding the step entirely. flex:1 gives it the phone's real
     remaining height so every step -- including height:100% children
     like .ph-lock.center and .sys-dialog-wrap -- has something real to
     size against. */
  #phoneScreen{flex:1; min-height:0; display:flex; flex-direction:column;}

  .ph-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:32px 16px 10px; font-family:'Baloo 2'; font-weight:700; font-size:16px;}
  .ph-header .ph-icons{display:flex; gap:10px; color:var(--ink);}
  .ph-back-btn{display:flex; align-items:center; color:var(--ink);}
  .ph-body{padding:0 14px 14px; flex:1; overflow:hidden; position:relative;}
  .med-row{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; background:var(--card); border:1px solid var(--border); margin-bottom:9px; font-size:13.5px;}
  .med-row b{display:block; font-size:14px;}
  .med-row small{color:var(--subtle); font-size:12px;}
  .med-dot{width:9px; height:9px; border-radius:50%; flex:none;}
  .med-dot.mint{background:var(--success);} .med-dot.lav{background:var(--primary);}
  .check-badge{margin-left:auto; color:var(--success); font-weight:800;}
  button.fab{position:absolute; right:16px; bottom:18px; width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff; font-size:26px; font-weight:700; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 18px -6px rgba(11,95,255,.55); cursor:pointer; line-height:1;}

  .f-label{display:block; font-size:11.5px; font-weight:700; color:var(--subtle); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 5px;}
  .f-input{border:1.5px solid var(--border); border-radius:11px; padding:10px 12px; font-size:14px; background:var(--card);}
  .f-input.placeholder{color:#9AA0A8;}
  .f-input.filled{font-weight:700;}
  .btn-scan{width:100%; margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--primary-soft); color:var(--primary-dark); border:none; border-radius:13px; padding:13px; font-weight:700; font-size:14.5px; cursor:pointer;}
  .or-sep{text-align:center; color:var(--subtle); font-size:12px; margin-top:10px;}
  .freq-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
  .freq-pill{border:1.5px solid var(--border); border-radius:11px; padding:10px 6px; font-size:12px; font-weight:700; text-align:center; background:var(--card); color:var(--ink);}
  .freq-pill.selected{border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark);}
  .btn-primary{width:100%; margin-top:18px; background:var(--primary); color:#fff; border:none; border-radius:13px; padding:13px; font-weight:700; font-size:15px; cursor:pointer;}

  .ph-lock{padding:50px 18px 0; display:flex; flex-direction:column; align-items:center; height:100%;}
  .ph-lock.center{justify-content:center; padding-top:0;}
  .lock-time{font-family:'Baloo 2'; font-weight:700; font-size:40px; margin-bottom:16px; color:var(--ink);}
  .notif-card{width:100%; background:var(--card); border-radius:16px; padding:14px; box-shadow:0 10px 24px -14px rgba(20,22,26,.4); border:1px solid var(--border);}
  .notif-top{display:flex; justify-content:space-between; font-size:11.5px; color:var(--subtle); margin-bottom:6px; font-weight:700;}
  .notif-body{font-size:14.5px; margin-bottom:12px;}
  .notif-actions{display:flex; gap:6px;}
  .n-btn{flex:1; border:none; border-radius:10px; padding:9px 4px; font-size:12.5px; font-weight:700; cursor:default;}
  .n-btn.taken{background:var(--success); color:#fff; cursor:pointer;}
  .n-btn.snooze{background:var(--warning-soft); color:var(--spot-ink);}
  .n-btn.skip{background:var(--danger-soft); color:var(--danger);}
  /* The two buttons NOT being practiced in a given step must visibly read
     as inactive -- reported directly: full-color Posponer/Omitir sitting
     next to the one real tap-target looked equally tappable, so people
     tapped them and nothing happened. Dimming them is the fix; each one
     gets its real, active turn in its own step instead. */
  .n-btn.inactive{opacity:.4;}
  .big-check{width:64px; height:64px; border-radius:50%; background:var(--success-soft); color:var(--success); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .big-check svg{width:34px; height:34px;}
  .confirm-text{font-weight:700; font-size:15px; text-align:center;}
  .mini-actions{display:flex; gap:8px; width:100%; margin-top:6px;}
  .mini-actions .n-btn{cursor:default;}

  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:6px;}
  .cal-dow{font-size:10px; text-align:center; color:var(--subtle); font-weight:700;}
  .cal-cell{aspect-ratio:1; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--card); border:1px solid var(--border); color:var(--ink);}
  .cal-cell.done{background:var(--success-soft); color:var(--success); border-color:transparent;}
  .cal-cell.partial{background:var(--warning-soft); color:var(--spot-ink); border-color:transparent;}
  .cal-cell.empty{visibility:hidden;}
  .dose-row{padding:12px; border-radius:13px; background:var(--card); border:1px solid var(--border); margin-bottom:8px;}
  .dose-row b{font-size:14px;} .dose-row small{display:block; color:var(--subtle); font-size:12px; margin-top:2px;}
  .dose-row.done b::before{content:'✓ '; color:var(--success);}
  .share-btn{width:100%; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--primary-soft); color:var(--primary-dark); border:none; border-radius:13px; padding:12px; font-weight:700; font-size:14px; cursor:pointer;}
  .report-stat{text-align:center; padding:16px 10px; background:var(--primary-soft); border-radius:14px; margin-bottom:12px;}
  .report-stat b{display:block; font-family:'Baloo 2'; font-size:26px; color:var(--primary-dark);}
  .report-stat span{font-size:11.5px; color:var(--subtle);}
  .report-row{display:flex; justify-content:space-between; padding:11px 13px; border-radius:12px; background:var(--card); border:1px solid var(--border); margin-bottom:8px; font-size:13.5px; font-weight:700;}
  .report-row span:last-child{color:var(--subtle); font-weight:400;}
  .share-sheet{display:flex; justify-content:center; gap:22px; padding-top:14px;}
  .share-sheet-item{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .share-sheet-item .sq{width:48px; height:48px; border-radius:14px; background:var(--primary-soft); color:var(--primary-dark); display:flex; align-items:center; justify-content:center;}
  .share-sheet-item span{font-size:10.5px; color:var(--subtle); font-weight:700;}

  .settings-row{display:flex; align-items:center; justify-content:space-between; padding:13px 12px; border-radius:13px; background:var(--card); border:1px solid var(--border); margin-bottom:8px; font-size:14px; font-weight:700;}
  .settings-row small{display:block; font-weight:400; color:var(--subtle); font-size:11.5px; margin-top:2px;}
  .chev{color:var(--subtle);}
  .lang-option{display:flex; align-items:center; justify-content:space-between; padding:13px 12px; border-radius:13px; border:1.5px solid var(--border); margin-bottom:8px; font-size:14px; font-weight:700; background:var(--card);}
  .lang-option.selected{border-color:var(--primary); background:var(--primary-soft); color:var(--primary-dark);}
  .radio-dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex:none;}
  .lang-option.selected .radio-dot{border-color:var(--primary); background:radial-gradient(circle,var(--primary) 0 6px, transparent 7px);}

  .tap-target{position:relative; cursor:pointer;}
  .tap-target::after{content:''; position:absolute; inset:-6px; border-radius:inherit; border:3px solid var(--spot); box-shadow:0 0 0 0 var(--spot-ring); animation:pulse-ring 1.7s ease-out infinite; pointer-events:none;}
  .radio-dot.tap-target::after, .cal-cell.tap-target::after, .ph-icons .tap-target::after{border-radius:50%;}
  @keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--spot-ring);}70%{box-shadow:0 0 0 13px rgba(255,176,32,0);}100%{box-shadow:0 0 0 0 rgba(255,176,32,0);}}
  @media (prefers-reduced-motion:reduce){.tap-target::after{animation:none; box-shadow:0 0 0 4px var(--spot-ring);}}

  /* ---------- Caption / nav column ---------- */
  .wk-side{display:flex; flex-direction:column; gap:18px; padding-top:8px;}
  .wk-dots{display:flex; gap:7px;}
  .wk-dots span{width:9px; height:9px; border-radius:50%; background:var(--border);}
  .wk-dots span.active{background:var(--primary); width:22px; border-radius:5px;}
  .wk-hint{display:flex; gap:12px; align-items:flex-start; background:var(--warning-soft); border-radius:16px; padding:16px 18px;}
  .wk-hint .num{font-family:'Baloo 2'; font-weight:800; font-size:22px; color:var(--spot-ink); background:var(--card); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;}
  .wk-hint p{margin:0; font-size:17px; font-weight:700; color:var(--spot-ink); line-height:1.45;}
  .wk-nav{display:flex; gap:10px;}
  .wk-nav button{border-radius:999px; padding:12px 22px; font-weight:700; font-size:15px; cursor:pointer; border:none;}
  .wk-nav .prev{background:var(--card); border:1.5px solid var(--border); color:var(--ink);}
  .wk-nav .prev:disabled{opacity:.4; cursor:default;}
  .wk-nav .next{background:var(--primary); color:#fff; margin-left:auto;}
  .wk-done{background:var(--success-soft); border-radius:18px; padding:20px; text-align:center;}
  .wk-done .big-check{margin-inline:auto;}
  .wk-done h4{margin:2px 0 6px; font-family:'Baloo 2'; font-size:20px; color:var(--success);}
  .wk-done p{margin:0 0 16px; color:var(--success); font-size:14.5px;}
  .wk-done-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .wk-done-actions button{border-radius:999px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid var(--success); background:var(--card); color:var(--success);}
  .wk-done-actions button.primary{background:var(--success); color:#fff;}

  /* ---------- Featured "start here" card ---------- */
  .task-card.featured{grid-column:1/-1; flex-direction:row; align-items:center; gap:18px; background:linear-gradient(135deg,var(--primary-soft),var(--card) 70%); border-color:var(--primary-dark);}
  .task-card.featured .task-icon{background:var(--primary); color:#fff;}
  .featured-ribbon{display:inline-flex; align-items:center; gap:5px; background:var(--primary); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:6px; width:fit-content;}
  .task-card.featured .task-text{flex:1;}
  .task-card.featured .task-go{margin-top:8px;}

  /* ---------- Extra phone-mock components for setup flow ---------- */
  .app-card{width:100%; text-align:center; padding:20px 10px;}
  .app-card-icon{width:72px; height:72px; border-radius:19px; display:block; margin:0 auto 12px; box-shadow:0 10px 20px -8px rgba(20,22,26,.35);}
  .app-card-name{font-family:'Baloo 2'; font-weight:800; font-size:19px;}
  .app-card-sub{color:var(--subtle); font-size:12.5px; margin-top:2px;}

  .home-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px 10px; padding-top:10px;}
  .home-icon{display:flex; flex-direction:column; align-items:center; gap:5px;}
  .home-icon .sq{width:46px; height:46px; border-radius:13px; background:#D7DCE3;}
  .home-icon.real .sq{display:block; object-fit:cover;}
  .home-icon span{font-size:9.5px; color:var(--subtle); font-weight:700;}

  .disclaimer-box{padding-top:8px;}
  .disclaimer-box .d-text{font-size:11.5px; line-height:1.5; color:var(--subtle); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; max-height:150px; overflow:hidden;}
  .disclaimer-box .btn-primary{margin-top:14px;}

  /* Plain, boring, normal-flow centering -- deliberately NOT position:
     absolute + inset:0 anymore. That overlay technique rendered wrong on
     real iOS Safari (confirmed via device screenshot: the dialog card
     came out narrow and left-aligned instead of centered and full-width)
     even though it looked fine in every desktop/emulated check. The
     working steps on this same page (the App Store card, the checkmark
     confirmation) all just center their content in normal flow with
     flex on .ph-body -- doing the same thing here instead of a
     differently-behaved special case removes the failure mode outright
     rather than chasing why it failed on one engine. */
  .sys-dialog-wrap{width:100%; padding:0 20px;}
  .sys-dialog{background:#F4F4F6; border-radius:16px; overflow:hidden; width:100%; text-align:center; box-shadow:0 14px 26px -10px rgba(0,0,0,.28);}
  .sys-dialog-body{padding:18px 16px 14px;}
  .sys-dialog-body b{display:block; font-size:14.5px; margin-bottom:6px;}
  .sys-dialog-body p{font-size:12px; color:var(--subtle); margin:0;}
  .sys-dialog-actions{display:flex; border-top:1px solid #D5D6DA;}
  .sys-dialog-actions button{flex:1; border:none; background:none; padding:12px; font-size:14.5px; color:var(--primary); font-weight:400; border-left:1px solid #D5D6DA;}
  .sys-dialog-actions button:first-child{border-left:none; color:var(--subtle);}
  .sys-dialog-actions button.tap-target{font-weight:700;}

  .toggle-row{display:flex; align-items:center; justify-content:space-between; padding:14px; border-radius:14px; background:var(--card); border:1.5px solid var(--border); margin-top:14px;}
  .toggle-row .t-label{font-weight:700; font-size:14.5px;}
  .toggle-row .t-label small{display:block; font-weight:400; color:var(--subtle); font-size:11.5px; margin-top:2px;}
  .toggle{width:46px; height:27px; border-radius:999px; background:#D7DCE3; position:relative; flex:none;}
  .toggle .knob{position:absolute; top:2.5px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s ease;}
  .toggle.on{background:var(--success);}
  .toggle.on .knob{left:21px;}

  .reco-badge{display:inline-flex; align-items:center; gap:6px; background:var(--primary-dark); color:#fff; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:10px;}
  .reco-badge svg{width:13px; height:13px;}

  @media (max-width:760px){
    .task-card.featured{flex-direction:column; align-items:flex-start;}
    .guide-hero{grid-template-columns:1fr; padding-block:28px 20px;}
    .hero-art{max-width:160px; order:-1;}
    .grid{grid-template-columns:1fr;}

    /* Tried shrinking the phone + pinning the caption/button to a fixed
       bottom bar so nothing required scrolling to reach -- reverted on
       Oscar's explicit call: he'd rather scroll than have the mockup
       stop looking like a real, full-size phone. Back to a plain stack,
       natural size. */
    .wk-stage{grid-template-columns:1fr;}
  }

  .footer{margin-top:54px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; color:var(--subtle); font-size:13.5px;}
  .footer a{font-weight:700;}

  main.no-top-pad{padding-top:0;}
  .nav-row-end{justify-content:flex-end;}
  .wk-topbar-meta{text-align:right;}