/* Journara gallery design system (brand-profile.md v2.2).
   One family (Plus Jakarta Sans), one accent (oxblood), hairlines over boxes,
   whitespace as material. Light is gallery paper; dark is espresso, first-class. */

:root, [data-theme="light"]{
  --ground:   #F7F3EC;
  --surface:  #FFFFFF;
  --ink:      #1A1815;
  --muted:    #8F887B;
  --line:     #E3DCD0;
  --accent:   #722F37;
  --accent-hover: #5E262D;
  --accent-ink: #F7F3EC;
  --ok:   #2E6B47;  --ok-bg:   #E4EEE7;
  --info: #2B5A77;  --info-bg: #E2ECF2;
  --warn: #8A6420;  --warn-bg: #F3ECDC;
  --risk: #93333A;  --risk-bg: #F5E4E5;
}
[data-theme="dark"]{
  --ground:   #15120F;
  --surface:  #1D1916;
  --ink:      #F0EAE0;
  --muted:    #8C8478;
  --line:     #2E2823;
  --accent:   #B05560;
  --accent-hover: #C16671;
  --accent-ink: #15120F;
  --ok:   #7FC79C;  --ok-bg:   #1B2B21;
  --info: #82B8D6;  --info-bg: #18272F;
  --warn: #D9B36A;  --warn-bg: #2C2415;
  --risk: #E08A92;  --risk-bg: #321B1D;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --ground:   #15120F;
    --surface:  #1D1916;
    --ink:      #F0EAE0;
    --muted:    #8C8478;
    --line:     #2E2823;
    --accent:   #B05560;
    --accent-hover: #C16671;
    --accent-ink: #15120F;
    --ok:   #7FC79C;  --ok-bg:   #1B2B21;
    --info: #82B8D6;  --info-bg: #18272F;
    --warn: #D9B36A;  --warn-bg: #2C2415;
    --risk: #E08A92;  --risk-bg: #321B1D;
  }
}
/* Compatibility aliases: older markup references these names; they all resolve
   to brand tokens so the whole product re-themes from one place. */
:root{
  --paper:var(--ground); --card:var(--surface); --tint:var(--ground); --tint2:var(--ground);
  --mid:var(--muted); --faint:var(--muted); --line2:var(--line);
  --ever:var(--accent); --ever2:var(--accent-hover); --ever-soft:var(--ground); --ever-line:var(--accent);
  --gold:var(--accent); --gold-deep:var(--accent); --gold-soft:var(--warn-bg);
  --ok-soft:var(--ok-bg); --info-soft:var(--info-bg); --warn-soft:var(--warn-bg);
  --bad:var(--risk); --bad-soft:var(--risk-bg); --res:var(--info); --res-soft:var(--info-bg);
  --inkdeep:#1A1815; --inkdeep2:#1A1815;
  --serif:"Plus Jakarta Sans",-apple-system,sans-serif; --sans:"Plus Jakarta Sans",-apple-system,sans-serif;
  --sh-sm:none; --sh-md:none; --sh-lg:none;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ground); color:var(--ink); line-height:1.6; font-size:15px;
     font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     font-weight:400; -webkit-font-smoothing:antialiased;}
::selection{background:var(--accent); color:var(--accent-ink);}
a{color:var(--accent); text-decoration:none;}
svg.ic{width:16px; height:16px; vertical-align:-3px; flex:none;}

/* ---------- type ---------- */
.display{font-weight:600; letter-spacing:-.3px; color:var(--ink); font-family:inherit;}
h1.display{font-size:clamp(32px,4vw,36px); line-height:1.2;}
h2.display{font-size:24px; line-height:1.25;}
h3{font-size:18px; font-weight:600;}
.eyebrow{display:block; font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
     color:var(--muted);}
.placard{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.sub{color:var(--muted); font-size:15px; max-width:58ch;}
.small{font-size:13px; color:var(--muted);}
.faint{color:var(--muted);}
.statement{font-size:24px; font-weight:600; letter-spacing:-.3px; line-height:1.35; max-width:26ch;}
.statement em{font-style:normal; color:var(--accent);}

/* ---------- buttons ---------- */
button{font-family:inherit;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent);
     color:var(--accent-ink); border:none; border-radius:2px; padding:14px 24px; font-size:13px;
     font-weight:600; letter-spacing:.2px; cursor:pointer; min-height:48px;
     transition:background 150ms ease;}
.btn:hover{background:var(--accent-hover); transform:none; box-shadow:none; filter:none;}
.btn-line{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent;
     color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:13px 22px; font-size:13px;
     font-weight:500; cursor:pointer; min-height:48px; transition:border-color 150ms ease, color 150ms ease;}
.btn-line:hover{border-color:var(--accent); color:var(--accent); background:transparent;}
.btn-sm{padding:8px 16px; min-height:40px;}
.btn-text{background:none; border:none; color:var(--accent); font-size:13px; font-weight:500; cursor:pointer;
     padding:6px 2px; text-decoration:underline; text-underline-offset:3px; transition:color 150ms ease;
     white-space:nowrap;}
.btn-text:hover{color:var(--accent-hover);}
.btn-danger{color:var(--risk); border-color:var(--line);}
.btn-danger:hover{border-color:var(--risk); color:var(--risk); background:transparent;}

/* ---------- forms ---------- */
label{display:block; font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--muted); margin:22px 0 8px;}
input,select,textarea{
  width:100%; background:var(--ground); border:1px solid var(--line); color:var(--ink);
  border-radius:2px; padding:12px 14px; font-size:15px; font-family:inherit;
  transition:border-color 150ms ease; color-scheme:light dark;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:none;}
textarea{min-height:90px; resize:vertical;}
.hint{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.5;}
.checks{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.checks input{display:none;}
.checks span{display:inline-flex; align-items:center; min-height:40px; padding:6px 16px; border-radius:2px;
      background:var(--ground); border:1px solid var(--line); cursor:pointer; font-size:13px;
      color:var(--muted); user-select:none; transition:all 150ms ease;}
.checks span:hover{border-color:var(--accent); color:var(--ink);}
.checks input:checked + span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}

/* ---------- layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
@media(min-width:760px){ .wrap{padding:0 48px;} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:28px;
      margin-bottom:16px; box-shadow:none;}
.grid{display:grid; gap:16px;}
@media(min-width:760px){ .grid.cols2{grid-template-columns:1fr 1fr;} .grid.cols3{grid-template-columns:1fr 1fr 1fr;} }
.hidden{display:none !important;}
.view{display:none;} .view.active{display:block;}
.rule{border:none; border-top:1px solid var(--line); margin:28px 0;}

/* ---------- self-test ---------- */
#selftest{background:var(--risk-bg); border:1px solid var(--line); color:var(--risk);
      padding:11px 16px; border-radius:2px; margin:14px 24px 0; font-size:13px; max-width:1032px;}
@media(min-width:1080px){ #selftest{margin:14px auto 0;} }
#selftest.ok{background:var(--ok-bg); color:var(--ok);}
#selftest .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor;
      margin-right:9px; vertical-align:1px;}

/* ---------- landing nav ---------- */
.lnav{position:sticky; top:0; z-index:60; background:var(--ground); border-bottom:1px solid var(--line);
      backdrop-filter:none;}
.lnav-in{max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:24px;}
@media(min-width:760px){ .lnav-in{padding:16px 48px;} }
.wordmark{font-size:18px; font-weight:600; letter-spacing:-.2px; color:var(--ink); cursor:pointer;
      user-select:none; font-family:inherit;}
.wordmark i{font-style:normal; color:var(--accent);}
.ver{font-size:11px; font-weight:500; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase;
      border:none; padding:0;}
.lnav a.nl{color:var(--muted); font-size:13px; font-weight:500; transition:color 150ms ease;}
.lnav a.nl:hover{color:var(--ink);}
.lnav .spacer{flex:1;}
@media(max-width:720px){ .lnav a.nl{display:none;} }
.theme-toggle{background:none; border:none; cursor:pointer; font-size:11px; font-weight:500;
      letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); padding:8px 4px; min-height:40px;}
.theme-toggle:hover{color:var(--ink);}

/* ---------- hero ---------- */
.hero{position:relative; padding:88px 0 56px; display:grid; gap:48px; align-items:center;}
@media(min-width:980px){ .hero{grid-template-columns:1.05fr .95fr; padding:104px 0 72px;} }
.hero h1 em{font-style:normal; color:var(--accent);}
.hero .sub{margin:24px 0 32px;}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero .micro{margin-top:18px; font-size:13px; color:var(--muted);}
.hero .micro b{color:var(--ink); font-weight:600;}

/* product mockups: flat, hairlines, no motion the user didn't cause */
.collage{position:relative; min-height:420px;}
.mock{position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:2px;
      padding:20px 22px; font-size:13px; box-shadow:none; animation:none; transform:none;}
.mock-a{top:8px; left:0; width:min(78%,360px);}
.mock-b{top:170px; right:0; width:min(74%,340px);}
.mock-c{bottom:0; left:8%; display:flex; gap:10px; align-items:center; padding:14px 20px;}
.m-date{color:var(--accent); font-size:15px; font-weight:600; font-family:inherit;}
.m-row{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:10px;}
.m-hack{display:flex; align-items:center; gap:9px; color:var(--muted); margin-top:8px;}
.m-tag{flex:none; font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
      padding:3px 10px; border-radius:2px; border:1px solid var(--line); color:var(--muted); background:var(--ground);}
.m-tag.ok{color:var(--ok); background:var(--ok-bg); border-color:var(--line);}
.m-hack b{color:var(--ink); font-weight:600;}
.m-city{font-size:18px; font-weight:600; display:flex; justify-content:space-between; align-items:baseline;
      margin-bottom:10px; font-family:inherit;}
.m-match{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.m-tiles{display:flex; gap:10px; margin-top:14px;}
.m-tile{flex:1; background:var(--ground); border:1px solid var(--line); border-radius:2px; padding:10px 12px;}
.m-tile b{display:block; font-size:15px; color:var(--ink); font-weight:600;}
.m-tile span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;}
.m-c-ic{width:34px; height:34px; border-radius:2px; background:var(--ok-bg); color:var(--ok);
      display:grid; place-items:center;}
.m-c-ic svg{width:17px; height:17px;}
.mock-c b{font-size:13px; display:block; color:var(--ink);}
.mock-c span.s{font-size:12px; color:var(--muted);}
@media(max-width:979px){
  .collage{min-height:0; display:flex; flex-direction:column; gap:14px;}
  .mock{position:static; width:100% !important;}
}

/* ---------- landing sections ---------- */
.sect{padding:72px 0;}
.sect-head{max-width:680px; margin-bottom:48px;}
.sect-head .eyebrow{margin-bottom:14px;}
.sect-head p{margin-top:16px;}
.datastrip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0;
      display:flex; gap:14px 40px; flex-wrap:wrap; align-items:center; justify-content:center;}
.datastrip .lbl{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:500;}
.datastrip a{color:var(--ink); font-size:13px; font-weight:500; font-style:normal; font-family:inherit;}
.datastrip a:hover{color:var(--accent);}

/* no-login radar preview: a real answer before any signup */
.preview-box{margin-top:16px; border-top:1px solid var(--line); padding-top:28px;}
.preview-form{display:flex; gap:12px; flex-wrap:wrap; align-items:end;}
.preview-form > div{flex:1; min-width:170px;}
.preview-form label{margin-top:0;}
.preview-out{margin-top:20px;}
.preview-out .vrow{font-size:15px;}

/* steps */
.steps{display:grid; gap:0; border-top:1px solid var(--line);}
@media(min-width:880px){ .steps{grid-template-columns:1fr 1fr 1fr; gap:40px;} }
.step{background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0;
      padding:28px 0; transition:none;}
.step:hover{transform:none; box-shadow:none;}
@media(min-width:880px){ .step{border-bottom:none;} }
.step .num{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--accent); display:block; margin-bottom:14px; font-style:normal; font-family:inherit;}
.step h3{margin-bottom:10px; font-size:18px;}
.step p{font-size:13px; color:var(--muted);}
.step .vis{margin-top:20px; border-top:none; padding-top:0; display:flex; flex-wrap:wrap; gap:8px;}

/* feature grid */
.bento{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:880px){ .bento{grid-template-columns:repeat(6,1fr);}
  .b-a{grid-column:span 4;} .b-b{grid-column:span 2;} .b-c{grid-column:span 2;}
  .b-d{grid-column:span 2;} .b-e{grid-column:span 2;} .b-f{grid-column:span 3;} .b-g{grid-column:span 3;}
}
.cell{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:28px;
      box-shadow:none; transition:none; overflow:hidden; position:relative;}
.cell:hover{transform:none; box-shadow:none;}
.cell h3{margin-bottom:8px; font-size:18px;}
.cell > p{font-size:13px; color:var(--muted); max-width:46ch;}
.cell .vis{margin-top:20px;}
.cell.tinted{background:var(--ground);}
.hrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0;
      border-bottom:1px solid var(--line); font-size:13px;}
.hrow:last-child{border:none;}
.hrow .d{color:var(--accent); font-weight:600; min-width:86px; font-family:inherit;}
.hrow .tags{display:flex; gap:6px;}

/* pills: status is always text + color, never color alone */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:500; letter-spacing:1px;
     text-transform:uppercase; padding:4px 12px; border-radius:999px; margin:2px 6px 2px 0;
     border:1px solid var(--line);}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor;}
.p-free{color:var(--ok); background:var(--ok-bg);}
.p-voa{color:var(--info); background:var(--info-bg);}
.p-evisa{color:var(--warn); background:var(--warn-bg);}
.p-req{color:var(--risk); background:var(--risk-bg);}
.p-res{color:var(--info); background:var(--info-bg);}
.p-tent{color:var(--warn); background:var(--warn-bg);}
.p-season{color:var(--ok); background:var(--ok-bg);}
.p-plain{color:var(--muted); background:var(--ground);}

/* proof: flat dark surface, no gradients */
.proof{background:#1A1815; color:#F7F3EC; border-radius:2px; padding:64px 28px; text-align:center;
      overflow:visible; position:relative;}
@media(min-width:880px){ .proof{padding:72px 56px;} }
[data-theme="dark"] .proof{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
.proof::before{content:none;}
.proof > *{position:static;}
.proof .eyebrow{color:inherit; opacity:.55;}
.proof h2{color:inherit; margin:14px auto 12px; max-width:24ch;}
.proof .sub{color:inherit; opacity:.65; margin:0 auto 44px;}
.proofgrid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); max-width:840px; margin:0 auto;}
@media(min-width:880px){ .proofgrid{grid-template-columns:repeat(4,1fr);} }
.pstat{border:1px solid rgba(247,243,236,.18); border-radius:2px; padding:24px 14px; background:transparent;}
[data-theme="dark"] .pstat{border-color:var(--line);}
.pstat b{font-weight:600; font-size:32px; display:block; line-height:1.15; color:inherit;
      font-variant-numeric:tabular-nums; font-family:inherit;}
.pstat > span{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; font-weight:500;
      color:inherit;}
.proof .note{margin-top:30px; font-size:13px; opacity:.55; color:inherit;}

/* honesty */
.honest{display:grid; gap:40px;}
@media(min-width:880px){ .honest{grid-template-columns:1fr 1fr; gap:64px; align-items:center;} }
.tenet{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.tenet:last-child{border:none;}
.tenet .tic{width:36px; height:36px; flex:none; border-radius:2px; background:var(--ground);
      border:1px solid var(--line); color:var(--accent); display:grid; place-items:center;}
.tenet .tic svg{width:17px; height:17px;}
.tenet b{display:block; font-size:15px; margin-bottom:3px; font-weight:600;}
.tenet p{font-size:13px; color:var(--muted);}

/* final cta */
.final{background:transparent; border:none; border-top:1px solid var(--line); border-radius:0;
      text-align:center; padding:72px 24px 64px; overflow:visible;}
.final h2{max-width:22ch; margin:0 auto 14px;}
.final .sub{margin:0 auto 32px;}
.final .rings2{display:none;}
.final > *:not(.rings2){position:static;}

footer.lfoot{border-top:1px solid var(--line); padding:40px 0 56px; margin-top:0;
      color:var(--muted); font-size:13px; line-height:1.8;}
footer.lfoot .frow{display:flex; gap:20px 40px; flex-wrap:wrap; justify-content:space-between; align-items:baseline;}
footer.lfoot a{color:var(--muted);}
footer.lfoot a:hover{color:var(--accent);}

/* reveal: quiet */
.rv{opacity:0; transform:translateY(10px); transition:opacity 150ms ease, transform 150ms ease;}
.rv.in{opacity:1; transform:none;}
.rv.d1{transition-delay:40ms;} .rv.d2{transition-delay:80ms;} .rv.d3{transition-delay:120ms;}

/* ---------- app shell ---------- */
nav.tabs{position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:1px solid var(--line);
     margin:0 0 30px; padding:14px 24px; display:flex; gap:4px; align-items:center; overflow-x:auto;
     backdrop-filter:none;}
@media(min-width:760px){ nav.tabs{padding:14px 48px;} }
nav.tabs .wordmark{font-size:16px; margin-right:18px;}
nav.tabs button{background:transparent; color:var(--muted); border:none; padding:10px 14px; border-radius:2px;
     font-size:13px; font-weight:500; white-space:nowrap; cursor:pointer; min-height:40px;
     transition:color 150ms ease;}
nav.tabs button:hover{color:var(--ink);}
nav.tabs button.active{background:transparent; color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);}
nav.tabs .spacer{flex:1;}
.appwrap{max-width:1032px; margin:0 auto; padding:0 24px 110px;}
@media(min-width:760px){ .appwrap{padding:0 48px 110px;} }

/* banners: sacred surfaces. plain language, functional color, zero personality */
.banner{display:flex; gap:12px; align-items:flex-start; background:var(--warn-bg); color:var(--warn);
     border:1px solid var(--line); border-radius:2px; padding:14px 18px; font-size:13px; margin:0 0 20px;
     line-height:1.55;}
.banner svg.ic{margin-top:2px;}
.banner b{color:inherit; font-weight:600;}
.errbar{display:flex; gap:12px; align-items:center; justify-content:space-between; background:var(--risk-bg);
     color:var(--risk); border:1px solid var(--line); border-radius:2px; padding:12px 18px; font-size:13px;
     margin:8px 0;}

.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:20px 18px;
     box-shadow:none;}
.stat b{font-weight:600; font-size:28px; display:block; line-height:1.15; color:var(--ink);
     font-variant-numeric:tabular-nums; font-family:inherit;}
.stat span{color:var(--muted); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:500;}
.holiday{padding:18px 0; border-bottom:1px solid var(--line);}
.holiday:last-child{border-bottom:none;}
.holiday .top{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline;}
.holiday .date{font-size:15px; color:var(--accent); font-weight:600; font-family:inherit;}
.holiday .name{font-weight:600;}
.range{font-size:15px; color:var(--ink); font-weight:600; white-space:nowrap; font-family:inherit;}
.urgency{display:flex; gap:9px; align-items:center; font-size:13px; margin-top:10px; padding:9px 13px;
     border-radius:2px; line-height:1.45;}
.urgency svg.ic{width:14px; height:14px; flex:none;}
.urgency.u-hot{color:var(--risk); background:var(--risk-bg); border:1px solid var(--line);}
.urgency.u-warm{color:var(--warn); background:var(--warn-bg); border:1px solid var(--line);}
.bchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.bchip{font-size:13px; border:1px solid var(--line); border-radius:2px; padding:6px 14px;
     color:var(--muted); background:var(--surface);}
.bchip b{color:var(--ink); font-weight:600;}
.bchip.zero{border-color:var(--line); background:var(--ok-bg);}
.bchip.zero b{color:var(--ok);}

.dest{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:24px; cursor:pointer;
     box-shadow:none; transition:border-color 150ms ease;}
.dest:hover{transform:none; box-shadow:none; border-color:var(--accent);}
.dest.open{border-color:var(--accent);}
.dest h3{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:18px;
     font-weight:600; font-family:inherit;}
.dest .match{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
     font-family:inherit;}
.dest .pills{margin:10px 0 4px;}
.dest .meta{color:var(--muted); font-size:13px; margin:6px 0 2px;}
.dest .meta b{color:var(--ink); font-weight:600;}
.budget{font-weight:600; color:var(--ink);}
.dest .spots{font-size:13px; color:var(--muted); margin-top:14px; border-top:1px solid var(--line); padding-top:12px;}
.dest .spots b{color:var(--ink); font-weight:600;}
.dest .spots div{margin:3px 0;}
.dest .detail{display:none;}
.dest.open .detail{display:block; animation:none;}
.dest .more{color:var(--accent); font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
     margin-top:16px;}
.vnote{display:flex; gap:9px; font-size:13px; color:var(--warn); background:var(--warn-bg);
     border:1px solid var(--line); border-radius:2px; padding:10px 12px; margin-top:12px; line-height:1.5;}
.livebox{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.livebox .lb{background:var(--ground); border:1px solid var(--line); border-radius:2px; padding:11px 14px;
     font-size:13px; min-width:130px; color:var(--muted);}
.livebox .lb b{display:block; font-size:15px; color:var(--ink); font-weight:600;}
.livebox .lb .src{color:var(--muted); font-size:11px; letter-spacing:1px; text-transform:uppercase; display:block;}
.links{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap;}
.links a{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); min-height:40px;
     border:1px solid var(--line); padding:8px 16px; border-radius:2px; transition:all 150ms ease;
     background:var(--surface);}
.links a:hover{border-color:var(--accent); color:var(--accent); background:var(--surface);}
.links a svg.ic{width:14px; height:14px;}

.search input{margin-bottom:14px;}
.vrow{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line);
     font-size:15px; gap:8px; flex-wrap:wrap;}
.vrow:last-child{border:none;}
details{margin-top:10px; border:1px solid var(--line); border-radius:2px; padding:14px 18px;
     background:var(--surface);}
details[open]{background:var(--ground);}
summary{cursor:pointer; font-size:15px; padding:2px 0; list-style:none; display:flex; align-items:center; gap:10px;}
summary::-webkit-details-marker{display:none;}
summary .count{color:var(--muted); font-size:13px;}

.kv{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:12px; font-size:13px; color:var(--muted);}
.kv b{color:var(--ink); font-weight:600;}
.capnote{font-size:13px; color:var(--muted); line-height:1.7;}
.capnote b{color:var(--ink); font-weight:600;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
footer.afoot{margin-top:64px; border-top:1px solid var(--line); padding-top:20px; color:var(--muted);
     font-size:13px; line-height:1.7;}
footer.afoot a{color:var(--muted);}

.skeleton{height:14px; border-radius:2px; background:var(--line); opacity:.6; animation:none; margin:10px 0;}
.section{display:none;} .section.active{display:block;}

/* auth / onboarding shells */
.auth-shell{max-width:430px; margin:56px auto 80px; padding:0 24px;}
.auth-tabs{display:flex; gap:0; background:transparent; border:1px solid var(--line); border-radius:2px;
     padding:0; margin-bottom:26px; overflow:hidden;}
.auth-tabs button{flex:1; background:var(--ground); border:none; color:var(--muted); padding:12px;
     border-radius:0; font-size:13px; font-weight:500; cursor:pointer; min-height:48px;
     transition:all 150ms ease;}
.auth-tabs button.active{background:var(--surface); color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);}
.auth-msg{font-size:13px; color:var(--risk); margin-top:14px; min-height:1.2em;}
.auth-card .btn{width:100%; margin-top:26px;}
.ob-shell{max-width:680px; margin:48px auto 80px; padding:0 24px;}

/* ---------- trips ---------- */
.trip-card{background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:24px;
     margin-bottom:14px; cursor:pointer; transition:border-color 150ms ease;}
.trip-card:hover{border-color:var(--accent);}
.trip-card h3{font-size:18px;}
.member-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line);
     flex-wrap:wrap;}
.member-row:last-child{border:none;}
.member-row .who{min-width:150px;}
.member-row .who b{font-weight:600; display:block;}
.member-row .who span{font-size:13px; color:var(--muted);}
.member-row .visa{flex:1; min-width:240px;}
.visa-placard{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
     color:var(--muted); margin:2px 0 8px;}
.visa-verdict{font-size:15px; font-weight:600; margin-bottom:4px;}
.visa-detail{font-size:13px; color:var(--muted); line-height:1.55;}
.visa-detail a{text-decoration:underline; text-underline-offset:2px;}
.risk-banner{display:flex; gap:10px; align-items:flex-start; background:var(--risk-bg); color:var(--risk);
     border:1px solid var(--line); border-radius:2px; padding:13px 16px; font-size:13px; margin:10px 0;
     line-height:1.5;}
.risk-banner b{font-weight:600;}
.ok-banner{display:flex; gap:10px; align-items:flex-start; background:var(--ok-bg); color:var(--ok);
     border:1px solid var(--line); border-radius:2px; padding:13px 16px; font-size:13px; margin:10px 0;
     line-height:1.5;}
.invite-box{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--ground);
     border:1px solid var(--line); border-radius:2px; padding:14px 16px; margin-top:8px;}
.invite-box code{font-size:13px; color:var(--ink); word-break:break-all; font-family:ui-monospace,Menlo,monospace;}
.empty-state{padding:56px 24px; text-align:center; color:var(--muted); font-size:15px;}

/* ---------- Percy (residence contract: corner, small, consent-only) ---------- */
.percy{position:fixed; left:18px; bottom:14px; width:64px; height:auto; cursor:pointer; z-index:40;
     opacity:.92; transition:opacity 150ms ease; background:none; border:none; padding:0;}
/* The residence contract says Percy never overlaps content. Small screens have
   no free corner, so he simply stays outside. */
@media(max-width:880px){ .percy, .percy-bubble{display:none !important;} }
.percy:hover{opacity:1;}
.percy .blink{transform-origin:center 58%; animation:percy-blink 7s infinite;}
@keyframes percy-blink{0%,96%,100%{transform:scaleY(1);} 97.5%{transform:scaleY(.12);}}
.percy-bubble{position:fixed; left:18px; bottom:140px; max-width:230px; background:var(--surface);
     border:1px solid var(--line); border-radius:2px; padding:10px 14px; font-size:13px; color:var(--ink);
     z-index:41; line-height:1.45;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .rv{opacity:1; transform:none;}
  .percy .blink{animation:none;}
}

/* ---------- v6.1: the calm radar ---------- */
.hero-centered{display:block; text-align:center; max-width:640px; margin:0 auto;
     padding:96px 0 64px;}
.hero-centered .sub{margin-left:auto; margin-right:auto;}
.hero-centered .cta{justify-content:center;}

/* the break chart: plain divs, one accent bar, generous tap targets */
.chart{display:flex; align-items:flex-end; gap:8px; height:150px;}
.barhit{flex:1; display:flex; align-items:flex-end; height:100%; min-width:20px;
     cursor:pointer; background:none; border:none; padding:0;}
.barhit .bar{width:100%; background:var(--line); border-radius:1px; min-height:6px;
     transition:height 500ms ease, background 150ms ease;}
.barhit:hover .bar{background:var(--muted);}
.barhit.best .bar{background:var(--accent);}
.barhit.best:hover .bar{background:var(--accent-hover);}
.barhit.sel .bar{background:var(--ink);}
.barhit.best.sel .bar{background:var(--accent);}
.chart-cap{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
     font-weight:500; margin-top:14px;}
.chart-panel{overflow:hidden; height:0; opacity:0; transition:height 180ms ease, opacity 180ms ease;}
.chart-panel .inner{padding:20px 0 8px; border-bottom:1px solid var(--line);}
.chart-panel h3{font-size:15px; font-weight:600;}
.chart-panel .play{font-size:15px; color:var(--muted); padding:7px 0;}
.chart-panel .play b{color:var(--ink); font-weight:600;}

/* quiet destination rows: hairlines, almost no color at rest */
.qcard{padding:22px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.qcard.top{border-left:2px solid var(--accent); padding-left:18px;}
.qcard .qhead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.qcard .qhead b{font-size:16px; font-weight:600;}
.qcard .qmeta{color:var(--muted); font-size:13px; flex:1;}
.qcard .qmore{color:var(--accent); font-size:13px; font-weight:500; white-space:nowrap;}
.qbody{overflow:hidden; height:0; opacity:0; transition:height 180ms ease, opacity 180ms ease;}
.qbody .inner{padding-top:16px;}
.verdict{font-size:15px; line-height:1.6; margin-bottom:10px; max-width:58ch;}
.verdict .v-ok{color:var(--ok); font-weight:600;}
.verdict .v-info{color:var(--info); font-weight:600;}
.verdict .v-warn{color:var(--warn); font-weight:600;}
.verdict .v-risk{color:var(--risk); font-weight:600;}
.agentline{font-size:13px; color:var(--muted); margin:4px 0; max-width:58ch;}
.agentline b{color:var(--ink); font-weight:600;}
.qspots{font-size:13px; color:var(--muted); margin-top:12px; border-top:1px solid var(--line); padding-top:12px;}
.qspots b{color:var(--ink); font-weight:600;}
.qspots div{margin:3px 0;}
.qplacard{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
     color:var(--muted); margin-top:14px;}
.qplacard a{color:inherit; text-decoration:underline; text-underline-offset:2px;}

/* passport map, calmer: hairline groups instead of the floating white table */
.vgroup{border-bottom:1px solid var(--line); padding:6px 0;}
.vgroup summary{display:flex; align-items:baseline; gap:12px; padding:12px 0; cursor:pointer; list-style:none;}
.vgroup summary::-webkit-details-marker{display:none;}
.vgroup .glabel{font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink);}
.vgroup .gcount{color:var(--muted); font-size:13px;}
.vgroup{border-left:none; border-right:none; border-top:none; border-radius:0; background:transparent; margin:0; padding:0 0 4px;}
.vgroup[open]{background:transparent;}

/* mobile: bars must stay comfortably tappable, so the chart scrolls sideways */
@media(max-width:520px){
  .chart{overflow-x:auto; padding-bottom:6px;}
  .barhit{min-width:36px;}
}