/* ═══════════════════════════════════════════════════════════════
   TravelWell4Life — "The Open Road" palette (Karoo dusk, a dust road at first light)
   Indigo + clay + fynbos on Kalahari-sand paper. Structure ported from the
   family site stylesheet (WorkSmart4Life) so the chrome stays a twin of the
   other built sites; own skin.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --tw-graphite:#2E3A5C;   /* primary — midnight */
  --tw-steel:#3D4C74;      /* mid — indigo */
  --tw-signal:#C0603A;     /* accent — chartreuse */
  --tw-signal-dk:#96431F;  /* hover */
  --tw-signal-lt:#E8B89E;  /* accent on midnight */
  --tw-ember:#C0603A;      /* emphasis */
  --tw-chalk:#F8F4EC;      /* paper */
  --tw-mist:#F7E9DF;       /* tint */
  --tw-line:#E5DFD2;
  --tw-ink:#2A3038;        /* body text stays dark for readability */
  --tw-ink-soft:#575E6B;
  --tw-white:#FFFFFF;
  --tw-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --tw-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}

/* ⛔ CONTRAST RULE — chartreuse #C0603A is an ACCENT, never body/label text on
   a light background: it fails contrast badly. On paper, text uses --tw-ink or
   --tw-graphite. Chartreuse is allowed as: a FILL behind dark text (buttons,
   step numbers), a BORDER, or TEXT only on the midnight bands (use the lighter
   --tw-signal-lt there). Check this before adding any new component. */

*{box-sizing:border-box}
/* the off-canvas slide-out sits at translateX(102%) — without this it
   creates a horizontal scrollbar on narrow screens */
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--tw-sans);color:var(--tw-ink);background:var(--tw-chalk);
     line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--tw-serif);line-height:1.18;margin:0 0 .5em}
a{color:inherit}
img,svg{max-width:100%}

/* ── Header ─────────────────────────────────────────────── */
.tw-header{position:sticky;top:0;z-index:60;background:rgba(35,41,77,.97);
           backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.tw-header-inner{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;
                 align-items:center;justify-content:space-between;gap:18px}
.tw-logo{font-family:var(--tw-serif);font-size:1.32rem;color:#fff;text-decoration:none;letter-spacing:.2px;white-space:nowrap}
.tw-logo span{color:var(--tw-signal-lt)}
.tw-nav{display:flex;align-items:center;gap:20px}
.tw-nav a{color:#EFE6D8;text-decoration:none;font-size:.88rem;white-space:nowrap}
.tw-nav a:hover{color:#fff}
.tw-nav-cta{background:var(--tw-signal);color:#fff !important;padding:8px 16px;border-radius:6px;
            font-weight:650;font-size:.86rem !important}
.tw-nav-cta:hover{background:var(--tw-signal-dk);color:#fff !important}
.tw-burger{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:2px 4px;line-height:1}
@media(max-width:980px){.tw-nav-mid{display:none}}
@media(max-width:640px){.tw-nav a:not(.tw-nav-cta){display:none}}

/* ── Slide-out menu ─────────────────────────────────────── */
.tw-menu-overlay{position:fixed;inset:0;background:rgba(15,20,24,.55);opacity:0;pointer-events:none;
                 transition:opacity .25s;z-index:70}
.tw-menu-overlay.active{opacity:1;pointer-events:auto}
.tw-menu{position:fixed;top:0;right:0;height:100%;width:340px;max-width:88vw;background:var(--tw-graphite);
         transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:80;
         overflow-y:auto;padding:20px 22px 40px}
.tw-menu.active{transform:translateX(0)}
.tw-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.tw-menu-head .t{font-family:var(--tw-serif);color:#fff;font-size:1.15rem}
.tw-menu-head .g{color:var(--tw-signal-lt)}
.tw-menu-close{background:none;border:0;color:#DCCDB6;font-size:1.7rem;cursor:pointer;line-height:1}
.tw-menu-group{margin-bottom:20px}
.tw-menu-title{color:var(--tw-signal-lt);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
               margin-bottom:8px;font-weight:700}
.tw-menu-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;
              color:#EFE6D8;text-decoration:none;font-size:.9rem}
.tw-menu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.tw-menu-item .ic{width:22px;text-align:center;flex:none}
.tw-menu-note{color:#DCCDB6;font-size:.76rem;line-height:1.5;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}

/* ── Sections ───────────────────────────────────────────── */
.tw-section{max-width:1120px;margin:0 auto;padding:74px 22px}
.tw-center{text-align:center}
.tw-kicker{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
           font-weight:700;color:var(--tw-graphite);margin-bottom:12px}
.tw-section h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:20ch}
.tw-center h2{max-width:none}
.tw-section .sub{font-size:1.03rem;color:var(--tw-ink-soft);max-width:62ch;margin:0 0 26px}
.tw-tint{background:var(--tw-mist);border-top:1px solid var(--tw-line);border-bottom:1px solid var(--tw-line)}
.tw-band{background:var(--tw-graphite);color:#F3EEE4}
.tw-band h2,.tw-band h3{color:#fff}
.tw-band .sub{color:#E8DCCB}
.tw-band .tw-kicker{color:var(--tw-signal-lt)}

/* ── Hero ───────────────────────────────────────────────── */
.tw-hero{background:linear-gradient(165deg,var(--tw-graphite) 0%,var(--tw-steel) 100%);
         color:#fff;padding:88px 22px 0;text-align:center;position:relative;overflow:hidden}
.tw-hero h1{font-size:clamp(2rem,5.2vw,3.5rem);max-width:17ch;margin:0 auto .22em}
.tw-hero h1 em{color:var(--tw-signal-lt);font-style:italic}
.tw-hero .lead{max-width:60ch;margin:0 auto 30px;color:#EFE6D8;font-size:1.06rem}
.tw-cta{display:inline-block;background:var(--tw-signal);color:#fff;text-decoration:none;
        padding:13px 27px;border-radius:7px;font-weight:650;margin:0 6px 10px;font-size:.95rem}
.tw-cta:hover{background:var(--tw-signal-dk);color:#fff}
.tw-cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.tw-cta.ghost:hover{background:rgba(255,255,255,.1)}
.tw-hero-art{margin-top:44px;line-height:0}

/* ── Split ──────────────────────────────────────────────── */
.tw-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.tw-split{grid-template-columns:1fr}}
.tw-split .col{padding:28px;border-radius:11px;background:var(--tw-white);border:1px solid var(--tw-line)}
.tw-split .col h3{font-size:1.16rem;margin-bottom:.5em}
.tw-split .col p{margin:0;color:var(--tw-ink-soft);font-size:.96rem}
.tw-split .col.grey{background:#F3EEE4}
.tw-split .col.signal{border-color:var(--tw-signal);box-shadow:0 2px 16px rgba(192,96,58,.22)}
.tw-split .col.signal h3{color:var(--tw-graphite)}

/* ── Steps ──────────────────────────────────────────────── */
.tw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
@media(max-width:900px){.tw-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tw-steps{grid-template-columns:1fr}}
.tw-step{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
         border-radius:11px;padding:22px}
.tw-step .num{width:34px;height:34px;border-radius:8px;background:var(--tw-signal);color:#fff;
              display:flex;align-items:center;justify-content:center;font-weight:750;margin-bottom:13px}
.tw-step h3{font-size:1.08rem;margin-bottom:.42em}
.tw-step p{margin:0;font-size:.9rem;color:#E8DCCB}

/* ── Feature / evidence ─────────────────────────────────── */
.tw-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
@media(max-width:880px){.tw-feat{grid-template-columns:1fr}}
.tw-feat .item{background:var(--tw-white);border:1px solid var(--tw-line);border-radius:11px;padding:26px}
.tw-feat .item h3{font-size:1.1rem}
.tw-feat .item p{font-size:.94rem;color:var(--tw-ink-soft);margin:0 0 .7em}
.tw-ref{font-size:.78rem !important;color:#8A8F99 !important;font-style:italic;
        border-top:1px solid var(--tw-line);padding-top:9px;margin:0 !important}

/* ── Card grid ──────────────────────────────────────────── */
.tw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:920px){.tw-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tw-grid{grid-template-columns:1fr}}
.tw-card{display:block;background:var(--tw-white);border:1px solid var(--tw-line);border-radius:11px;
         padding:24px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.tw-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(35,41,77,.16);border-color:var(--tw-graphite)}
.tw-card .eyebrow{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
                  font-weight:700;color:var(--tw-graphite);margin-bottom:9px}
.tw-card h3{font-size:1.1rem;margin-bottom:.45em}
.tw-card p{font-size:.92rem;color:var(--tw-ink-soft);margin:0 0 14px}
.tw-card .tag{display:inline-block;font-size:.73rem;font-weight:700;padding:4px 11px;border-radius:20px}
.tw-card .live{background:#F7E9DF;color:#96431F}
.tw-card .soon{background:#F3EEE4;color:#6E8F66}

/* ── Chips ──────────────────────────────────────────────── */
.tw-dims{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.tw-dim{background:var(--tw-white);border:1px solid var(--tw-line);border-radius:20px;
        padding:7px 15px;font-size:.86rem;color:var(--tw-ink-soft)}

/* ── Ledger (gamification teaser) ───────────────────────── */
.tw-ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:880px){.tw-ledger{grid-template-columns:1fr}}
.tw-lev{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
        border-radius:11px;padding:22px}
.tw-lev .rank{font-family:var(--tw-serif);color:var(--tw-signal-lt);font-size:1.22rem;margin-bottom:6px}
.tw-lev p{margin:0;font-size:.9rem;color:#E8DCCB}
.tw-privacy{margin-top:26px;background:rgba(220,232,111,.15);border:1px solid rgba(220,232,111,.45);
            border-radius:11px;padding:20px 24px}
.tw-privacy b{color:var(--tw-signal-lt)}
.tw-privacy p{margin:0;color:#EFE6D8;font-size:.94rem}

/* ── Pricing ────────────────────────────────────────────── */
.tw-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;text-align:left}
@media(max-width:880px){.tw-price-grid{grid-template-columns:1fr}}
.tw-price{background:var(--tw-white);border:1px solid var(--tw-line);border-radius:11px;padding:28px}
.tw-price.feature{border-color:var(--tw-signal);box-shadow:0 4px 22px rgba(192,96,58,.25)}
.tw-price h3{font-size:1.12rem}
.tw-price .amt{font-family:var(--tw-serif);font-size:1.9rem;color:var(--tw-ink);margin-bottom:.35em}
.tw-price .amt small{font-size:.8rem;color:var(--tw-ink-soft);font-family:var(--tw-sans)}
.tw-price p{font-size:.92rem;color:var(--tw-ink-soft);margin:0 0 16px}

/* ── Swatches ───────────────────────────────────────────── */
.tw-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:22px}
@media(max-width:880px){.tw-swatches{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.tw-swatches{grid-template-columns:repeat(2,1fr)}}
.tw-swatch .chip{height:64px;border-radius:9px;margin-bottom:9px}
.tw-swatch .meta b{display:block;font-size:.87rem}
.tw-swatch .meta span{font-size:.75rem;color:var(--tw-ink-soft)}

/* ── Footer ─────────────────────────────────────────────── */
.tw-footer{background:var(--tw-graphite);color:#E8DCCB;padding:54px 22px 26px;font-size:.9rem}
.tw-footer-inner{max-width:1120px;margin:0 auto;display:grid;
                 grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.tw-footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tw-footer-inner{grid-template-columns:1fr}}
.tw-footer h4{color:#fff;font-size:.98rem;margin-bottom:.7em}
.tw-footer p{margin:0 0 14px;line-height:1.6}
.tw-footer ul{list-style:none;padding:0;margin:0}
.tw-footer li{margin-bottom:7px}
.tw-footer a{color:#E8DCCB;text-decoration:none}
.tw-footer a:hover{color:var(--tw-signal-lt)}
.tw-social .lbl{color:#fff;font-size:.8rem;margin-bottom:6px}
.tw-social a{display:inline-block;margin-right:13px}
.tw-copy{max-width:1120px;margin:34px auto 0;padding-top:18px;
         border-top:1px solid rgba(255,255,255,.11);font-size:.8rem;color:#DCCDB6}

/* ── Very small screens: keep the header on one line ────── */
@media(max-width:400px){
  .tw-header-inner{padding:10px 14px;gap:10px}
  .tw-logo{font-size:1.05rem}
  .tw-nav{gap:10px}
  .tw-nav-cta{padding:7px 11px;font-size:.78rem !important}
  .tw-section{padding:52px 16px}
}

/* ── Login link in nav ──────────────────────────────────── */
.tw-nav-login{opacity:.85}

/* ── Free / status pill ─────────────────────────────────── */
.tw-card .freetag{background:#F7E9DF;color:#96431F}

/* ── FAQ ────────────────────────────────────────────────── */
.tw-faq{margin-top:22px;max-width:820px}
.tw-q{background:var(--tw-white);border:1px solid var(--tw-line);border-radius:11px;
      padding:16px 20px;margin-bottom:10px}
.tw-q summary{font-family:var(--tw-serif);font-size:1.04rem;cursor:pointer;color:var(--tw-graphite);
              list-style:none;position:relative;padding-right:26px}
.tw-q summary::-webkit-details-marker{display:none}
.tw-q summary::after{content:"+";position:absolute;right:2px;top:-2px;font-size:1.3rem;
                     color:var(--tw-graphite);font-family:var(--tw-sans)}
.tw-q[open] summary::after{content:"\2212"}
.tw-q p{margin:12px 0 0;color:var(--tw-ink-soft);font-size:.95rem}

/* ── Prose (legal / long-form) ──────────────────────────── */
.tw-prose{max-width:760px}
.tw-prose h2{font-size:1.2rem;margin-top:1.6em}
.tw-prose h2:first-child{margin-top:0}
.tw-prose p{color:var(--tw-ink-soft);margin:0}

/* ── Steps: allow 3-up as well as 4-up ──────────────────── */
.tw-steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.tw-steps.three{grid-template-columns:1fr}}
.tw-steps.light .tw-step{background:var(--tw-white);border:1px solid var(--tw-line)}
.tw-steps.light .tw-step h3{color:var(--tw-ink)}
.tw-steps.light .tw-step p{color:var(--tw-ink-soft)}

/* ── TravelWell additions ── */
.tw-quote{font-family:var(--tw-serif);font-size:1.3rem;font-style:italic;color:var(--tw-graphite);margin:.2em 0}
.tw-quote-by{color:var(--tw-ink-soft);font-size:.9rem;margin-bottom:1.4em}
.tw-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:14px}
.tw-quotes .q{background:#fff;border:1px solid var(--tw-line);border-left:4px solid var(--tw-signal);border-radius:10px;padding:18px 20px}
.tw-finding{background:#fff;border:1px solid var(--tw-line);border-left:4px solid #6E8F66;border-radius:10px;padding:16px 18px}
.tw-finding p{margin:.2em 0}
.tw-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.tw-shots img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--tw-line)}
.tw-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.tw-two img{width:100%;border-radius:12px;border:1px solid var(--tw-line)}
@media(max-width:760px){.tw-two{grid-template-columns:1fr}}
.tw-form{background:#fff;border:1px solid var(--tw-line);border-radius:12px;padding:24px;max-width:640px}
.tw-form label{display:block;font-weight:600;font-size:.88rem;margin:12px 0 4px}
.tw-form input,.tw-form select,.tw-form textarea{width:100%;padding:11px 12px;border:1.5px solid var(--tw-line);border-radius:8px;font:inherit}
.tw-form textarea{min-height:110px}
.tw-form button{margin-top:16px;background:var(--tw-signal);color:#fff;border:0;border-radius:8px;padding:12px 22px;font-weight:700;cursor:pointer}
/* outline buttons on light sections must be dark (white-on-paper is invisible) */
.tw-section .tw-cta.ghost,.tw-tint .tw-cta.ghost,.tw-cta.ghost.dark{color:var(--tw-graphite);border-color:var(--tw-graphite);background:transparent}
.tw-section .tw-cta.ghost:hover,.tw-tint .tw-cta.ghost:hover,.tw-cta.ghost.dark:hover{background:var(--tw-graphite);color:#fff}
.tw-hero .tw-cta.ghost,.tw-band .tw-cta.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.tw-shots{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
/* steps on a light section (tint or paper): white cards with dark text */
.tw-tint .tw-step,.tw-section .tw-step{background:var(--tw-white);border:1px solid var(--tw-line)}
.tw-tint .tw-step h3,.tw-section .tw-step h3{color:var(--tw-ink)}
.tw-tint .tw-step p,.tw-section .tw-step p{color:var(--tw-ink-soft)}
.tw-band .tw-step{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22)}
.tw-band .tw-step h3{color:#fff}.tw-band .tw-step p{color:#E8DCCB}
/* reflections and simple chooser pages */
.tw-prose{max-width:720px;margin:0 auto}
.tw-prose p{font-size:1.08rem;line-height:1.78;color:var(--tw-ink);margin:0 0 1.1em}
.tw-prose h2{font-family:var(--tw-serif);font-size:1.5rem;color:var(--tw-graphite);margin:1.6em 0 .5em}
.tw-prose .sig{margin-top:2em;font-weight:700;color:var(--tw-graphite)}.tw-prose .sig small{display:block;font-weight:400;color:var(--tw-ink-soft)}
.tw-refl{display:block;max-width:720px;margin:24px auto 0;background:#fff;border:1px solid var(--tw-line);border-left:5px solid var(--tw-signal);border-radius:12px;padding:24px 26px;text-decoration:none;color:var(--tw-ink)}
.tw-refl:hover{box-shadow:0 6px 22px rgba(46,58,92,.12)}
.tw-refl h3{font-family:var(--tw-serif);color:var(--tw-graphite);font-size:1.35rem;margin:.2em 0}
.tw-refl .st{color:var(--tw-ink-soft);font-style:italic;margin:0 0 .7em}.tw-refl .by{font-size:.85rem;color:var(--tw-ink-soft);margin-top:.8em}
.tw-refl .go{display:inline-block;margin-top:.6em;font-weight:700;color:var(--tw-signal-dk)}
.tw-choose{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:28px auto 0}
@media(max-width:760px){.tw-choose{grid-template-columns:1fr}}
.tw-choose .c{background:#fff;border:1px solid var(--tw-line);border-radius:14px;padding:26px}
.tw-choose .c h3{font-family:var(--tw-serif);color:var(--tw-graphite);font-size:1.3rem;margin:.3em 0 .4em}
.tw-choose .c p{color:var(--tw-ink-soft);font-size:.98rem;line-height:1.65}
.tw-note{max-width:900px;margin:26px auto 0;background:var(--tw-mist);border-radius:12px;padding:18px 22px;color:var(--tw-ink);font-size:.98rem;line-height:1.65}
.tw-prose h2{max-width:none}