/* TripSanity template-trip pages (marketing content, light-only like the landing).
   Brand: Figtree, navy #1A2838, blue #3C75A4, orange #F2A03D. */

@font-face{
  font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('/assets/fonts/figtree-var.woff2') format('woff2');
}

:root{
  --bg:#F5F7FA; --card:#FFFFFF; --navy:#1A2838; --muted:#5B7186;
  --blue:#3C75A4; --blue-soft:#E7F0F7; --orange:#F2A03D; --orange-soft:#FDF0DC;
  --line:#DDE7EF; --hairline:rgba(26,40,56,.1);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--navy);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0938rem; line-height:1.62;
}
a{color:var(--blue)}
a:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:3px}

/* topbar (mirrors landing) */
.topbar{background:var(--card); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:10}
.topbar .row{display:flex; align-items:center; gap:28px; padding:14px 24px; max-width:1060px; margin:0 auto}
.topbar img{height:34px; width:auto; display:block}
.topbar nav{display:flex; gap:24px; margin-left:auto; align-items:center; font-size:.9688rem; font-weight:600}
.topbar nav a{color:var(--navy); text-decoration:none}
.topbar nav a:hover{color:var(--blue)}
.pill-cta{
  background:var(--orange); color:var(--navy) !important; padding:9px 18px; border-radius:10px; font-weight:800;
}

.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
article.tpl{max-width:820px; margin:0 auto; padding:48px 24px 24px}

/* header */
.crumbs{font-size:.9063rem; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--muted)}
h1{font-size:clamp(32px,5.4vw,44px); line-height:1.08; letter-spacing:-.02em; font-weight:900; margin:0 0 14px; text-wrap:balance}
.byline{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.9375rem; color:var(--muted); margin-bottom:20px}
.byline b{color:var(--navy); font-weight:700}
.lede{font-size:1.1875rem; line-height:1.6; color:rgba(26,40,56,.85); margin:0 0 26px; text-wrap:pretty}

/* at-a-glance */
.glance{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px 24px; margin:0 0 36px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px, 100%), 1fr)); gap:14px 22px;
}
.glance div b{display:block; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px}
.glance div span{font-size:1rem; font-weight:600}

h2{font-size:1.625rem; letter-spacing:-.015em; font-weight:900; margin:44px 0 6px; text-wrap:balance}
h2 .daytag{display:block; font-size:.875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); font-weight:800; margin-bottom:4px}
h3{font-size:1.1875rem; font-weight:800; margin:26px 0 8px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px; padding-left:24px}
li{margin-bottom:6px}
.daynote{font-size:.9688rem; color:var(--muted); margin:0 0 14px}

/* itinerary table */
.itin-wrap{overflow-x:auto; margin:0 0 10px; border:1px solid var(--line); border-radius:14px; background:var(--card)}
table.itin{border-collapse:collapse; width:100%; min-width:640px; font-size:.9688rem}
.itin th{
  text-align:left; font-size:.7813rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-weight:800; padding:12px 16px 8px; border-bottom:1px solid var(--line);
}
.itin td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.itin tr:last-child td{border-bottom:none}
.itin td.t{white-space:nowrap; font-weight:800; font-variant-numeric:tabular-nums; color:var(--blue)}
.itin td .place{font-weight:800; display:block}
.itin td .addr{font-size:.875rem; color:var(--muted); display:block; margin-top:1px}
.itin td.wear{font-size:.9375rem; color:rgba(26,40,56,.8); min-width:180px}
.itin td.wear::before{content:"👕 "; opacity:.85}
.itin td.wear:empty::before{content:""}
.itin td.note{font-size:.9375rem; color:rgba(26,40,56,.8); min-width:180px}

/* comparison pages */
table.itin td.rowlab{font-weight:800; white-space:nowrap}
.verdict{
  background:var(--orange-soft); border-left:4px solid var(--orange); border-radius:0 12px 12px 0;
  padding:16px 20px; margin:0 0 28px; font-size:1.0625rem;
}
.verdict b{font-weight:800}
.choose{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr)); gap:16px; margin:18px 0 8px}
.choose .col{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.choose .col.us{border-color:var(--orange)}
.choose h3{margin:0 0 10px}
.choose ul{margin:0; padding-left:20px; font-size:.9688rem}
.asof{font-size:.875rem; color:var(--muted)}

/* "check before you go" — official sources under each itinerary */
.sources{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px 18px; margin:34px 0 8px;
}
.sources h2{margin:0 0 8px; font-size:1.3125rem}
.sources p{margin:0 0 12px; font-size:.9688rem; color:var(--muted)}
.sources ul{margin:0 0 12px; padding-left:20px; font-size:.9688rem}
.sources li{margin-bottom:7px}
.sources li a{font-weight:700}
.sources .asof{margin:0}

/* callouts */
.tip{
  background:var(--blue-soft); border-left:4px solid var(--blue); border-radius:0 12px 12px 0;
  padding:14px 18px; margin:18px 0; font-size:1rem;
}
.tip b{font-weight:800}

/* FAQ */
.faq-tpl{margin-top:8px}
.faq-tpl .qa{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:14px}
.faq-tpl h3{margin:0 0 6px; font-size:1.125rem}
.faq-tpl p{margin:0; font-size:1rem; color:rgba(26,40,56,.8)}

/* CTA */
.cta{
  background:linear-gradient(165deg,#14202D 0%,#1A2838 55%,#22344a 100%);
  color:#F5F7FA; border-radius:20px; padding:32px 30px; margin:44px 0 8px; text-align:center;
}
.cta h2{margin:0 0 8px; color:#fff}
.cta p{color:rgba(245,247,250,.85); max-width:520px; margin:0 auto 18px; font-size:1.0313rem}
.cta .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta .btn-primary{
  background:var(--orange); color:var(--navy); font-weight:800; text-decoration:none;
  padding:13px 24px; border-radius:12px; font-size:1.0313rem; border:none; cursor:pointer; font-family:inherit;
}
.cta .btn-ghost{
  background:transparent; color:#fff; font-weight:700; text-decoration:none;
  padding:13px 24px; border-radius:12px; font-size:1.0313rem; border:1.5px solid rgba(245,247,250,.4); cursor:pointer; font-family:inherit;
}
.cta .copied{display:block; margin-top:12px; font-size:.9375rem; color:var(--orange); min-height:20px}

/* more templates */
.more{margin:40px 0 8px}
.more .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px, 100%), 1fr)); gap:14px}
.more a.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  text-decoration:none; color:var(--navy); display:block;
}
.more a.card:hover{border-color:var(--blue)}
.more a.card b{display:block; font-size:1.0313rem; font-weight:800; margin-bottom:4px}
.more a.card span{font-size:.9375rem; color:var(--muted)}

/* hub grid */
.hub-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr)); gap:18px; margin:30px 0}
.hub-cards a.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 26px 22px;
  text-decoration:none; color:var(--navy); display:block;
}
.hub-cards a.card:hover{border-color:var(--blue)}
.hub-cards .emoji{font-size:1.875rem; display:block; margin-bottom:10px}
.hub-cards b{display:block; font-size:1.1875rem; font-weight:800; letter-spacing:-.01em; margin-bottom:6px}
.hub-cards span{font-size:.9688rem; color:var(--muted); line-height:1.5; display:block}
.hub-cards .meta{margin-top:12px; font-size:.875rem; color:var(--blue); font-weight:700}

/* footer */
footer.tpl-footer{border-top:1px solid var(--hairline); margin-top:48px; background:var(--card)}
footer.tpl-footer .row{
  max-width:1060px; margin:0 auto; padding:26px 24px; display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; font-size:.9375rem; color:var(--muted);
}
footer.tpl-footer nav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
footer.tpl-footer a{color:var(--muted); text-decoration:none}
footer.tpl-footer a:hover{color:var(--blue)}
.disclosure{font-size:.9063rem; color:var(--muted); margin-top:20px}

@media (max-width:640px){
  .topbar nav a:not(.pill-cta){display:none}
  article.tpl{padding-top:32px}
}

/* ---------- phone tables (Oct 9 2026, audit M02) ----------
   Most visitors here are on a phone, where every table sat in a 340px scroller at 640–760px:
   a comparison showed its row labels and half of OUR column, and every template hid its
   What-to-wear column off-screen with no hint. Below 641px nothing scrolls sideways:
   - comparison tables (table.itin.cmp: the compare pages, /retreats/, the offsite template)
     put each row's label on its own line and the tools side by side under it; a .lab table
     names every cell from its data-label instead of a header row — two by two for four tools
     (/retreats/), one per line for three (.c3), where three columns broke words mid-word;
   - every other .itin (the template days, the community pages) is time | stop, with the
     wear / notes line under the stop. A new comparison table needs `cmp`, or it reads as a day. */
@media (max-width:640px){
  table.itin.cmp{min-width:0 !important; display:block}
  table.itin.cmp :is(thead, tbody){display:block}
  table.itin.cmp tr{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 14px; padding:12px 14px;
    border-bottom:1px solid var(--line)}
  table.itin.cmp.c3 tr{grid-template-columns:minmax(0, 1fr)}
  table.itin.cmp tbody tr:last-child{border-bottom:none}
  table.itin.cmp :is(th, td){display:block; padding:0; border:0; min-width:0; overflow-wrap:anywhere}
  table.itin.cmp tr > th:first-child, table.itin.cmp.lab thead{display:none}
  table.itin.cmp td.rowlab{grid-column:1 / -1; white-space:normal}
  table.itin.cmp td[data-label]::before{content:attr(data-label); display:block; margin:6px 0 1px; font-size:.7188rem;
    letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--muted)}

  article.tpl table.itin:not(.cmp):not(.fplans){min-width:0; display:block}
  article.tpl table.itin:not(.cmp):not(.fplans) thead{display:block}
  /* the header becomes one legend line: TIME · STOP · WHAT TO WEAR */
  article.tpl table.itin:not(.cmp):not(.fplans) thead tr{display:flex; flex-wrap:wrap; gap:0 6px; padding:10px 14px 8px;
    border-bottom:1px solid var(--line)}
  article.tpl table.itin:not(.cmp):not(.fplans) th{padding:0; border:0}
  article.tpl table.itin:not(.cmp):not(.fplans) th:empty{display:none}
  article.tpl table.itin:not(.cmp):not(.fplans) th + th::before{content:"· "}
  /* one grid for the body so every row's time column lines up (subgrid; a fixed column without it) */
  article.tpl table.itin:not(.cmp):not(.fplans) tbody{display:grid; grid-template-columns:fit-content(6.5em) minmax(0, 1fr)}
  article.tpl table.itin:not(.cmp):not(.fplans) tbody tr{display:grid; grid-column:1 / -1;
    grid-template-columns:4.5em minmax(0, 1fr); grid-template-columns:subgrid; column-gap:12px;
    padding:12px 14px; border-bottom:1px solid var(--line)}
  article.tpl table.itin:not(.cmp):not(.fplans) tbody tr:last-child{border-bottom:none}
  article.tpl table.itin:not(.cmp):not(.fplans) td{display:block; padding:0; border:0; min-width:0}
  article.tpl table.itin:not(.cmp):not(.fplans) td:first-child{white-space:normal; overflow-wrap:break-word}
  article.tpl table.itin:not(.cmp):not(.fplans) td:nth-child(n+2){grid-column:2}
  article.tpl table.itin:not(.cmp):not(.fplans) td:nth-child(3){margin-top:6px}
  article.tpl table.itin:not(.cmp):not(.fplans) td:empty{display:none}
}

/* ---------- mid-page next step (Oct 9 2026, audit M02) ----------
   Each compare page puts one under "Who should choose which" (/retreats/ under Pricing): on a
   phone the closing block sat 2,800–5,600px further down, past the FAQ, after the reader had
   already decided. Same orange button as the templates' "Use this itinerary". */
.midcta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:20px 0 8px; padding:18px 20px;
  background:var(--card); border:1px solid var(--line); border-radius:14px}
.midcta p{flex-basis:100%; margin:0; font-size:1rem}
.midcta .alt{font-size:.9688rem; font-weight:700}

/* ---------- "Use this itinerary" (Sept 29 2026) ----------
   The one-tap start: the new-trip wizard opens with the page's plan.json already in it
   (js/template-plan.js) — via the homepage's email box when signed out, straight to the
   dashboard or back into the editor's trip otherwise (js/template-use.js). Under the byline
   and again after the last day; template-print.js drops its PDF link in beside the button. */
.usebar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:-4px 0 26px}
.usebar.useend{margin:18px 0 6px}
.btn-use{
  background:var(--orange); color:var(--navy); font-weight:800; text-decoration:none; display:inline-block;
  padding:12px 22px; border-radius:12px; font-size:1.0313rem; line-height:1.3;
}
.btn-use:hover{filter:brightness(1.05)}
.btn-use:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.usehow{flex-basis:100%; font-size:.9375rem; color:var(--muted); line-height:1.5}
/* the editor's "Start from a template" sent this tab here to pick a plan for one trip
   (js/template-use.js) — the way back, and the way out */
.intobar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0 0 22px; padding:12px 16px;
  background:var(--blue-soft); border:1px solid var(--line); border-radius:14px; font-size:.9375rem; line-height:1.5}
.intobar span{flex-basis:100%}
.intobar a{font-weight:700}
.intobar button{background:none; border:none; padding:0; font:inherit; color:var(--muted); text-decoration:underline; cursor:pointer}

/* ---------- Save as PDF (js/template-print.js) ---------- */
.pdfline{margin:-6px 0 18px}
.pdflink{background:none; border:none; padding:0; font:inherit; font-size:.875rem; font-weight:700; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
button.btn-ghost{font:inherit; cursor:pointer}
@media print{
  @page{margin:14mm 12mm}
  html, body{background:#fff !important}
  .topbar, .tpl-footer, .cta, .midcta, .more, .cards, .pdfline, .usebar.useend, .intobar, .crumbs, .copied{display:none !important}
  /* the saved PDF keeps a way back (M02): the Use bar under the byline prints as one plain line
     with this template's own one-tap link, e.g. "Use this itinerary — free: tripsanityapp.com/?template=…" */
  .usebar{display:block; margin:0 0 12px}
  .usebar > :not(.btn-use){display:none !important}
  .usebar .btn-use{background:none !important; padding:0; border-radius:0; color:#000 !important; font-size:10pt; font-weight:800}
  .usebar .btn-use[data-use]::after{content:": tripsanityapp.com/?template=" attr(data-use); font-weight:400}
  .tpl{max-width:none !important; padding:0 !important; margin:0 !important}
  .itin-wrap{overflow:visible !important; border:none !important; box-shadow:none !important}
  table.itin{min-width:0 !important; font-size:9.5pt}
  .itin tr, .verdict, .glance, .tip, .qa{break-inside:avoid}
  h2, h3{break-after:avoid}
  a{color:inherit !important; text-decoration:none !important}
  .tpl::after{content:"From tripsanityapp.com/templates — free to use. Run it as a live shared trip at tripsanityapp.com";
    display:block; margin-top:18px; padding-top:8px; border-top:1px solid #ccc; font-size:8.5pt; color:#666}
}

/* ---------- features page (Oct 2 2026) ----------
   /features/ is generated by tools/build-features.mjs from features/features.json. Every
   feature is an anchor other pages link to (/features/#money-splits), so a targeted row
   has to clear the sticky topbar and say which one it is. */
.fjump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px}
.fjump a{
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px 14px;
  font-size:.9063rem; font-weight:700; color:var(--navy); text-decoration:none;
}
.fjump a:hover{border-color:var(--blue); color:var(--blue)}
.feats{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:2px 22px; margin:0 0 8px}
.feat{padding:16px 0; border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:none}
.feat h3{margin:0 0 4px; font-size:1.0938rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.feat p{margin:0; font-size:1rem; color:rgba(26,40,56,.82)}
.feat .fmore{font-size:.9063rem; color:var(--muted); margin-top:6px}
.feat .fmore a{font-weight:700}
.ftag{
  display:inline-block; font-size:.6875rem; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; font-weight:800;
  color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:1px 9px;
  vertical-align:middle; white-space:nowrap;
}
.ftag.pro{background:var(--orange-soft); border-color:var(--orange); color:var(--navy)}
/* the Free/Pro table has to fit a phone without the sideways scroll the itinerary tables use */
table.itin.fplans{min-width:0; table-layout:fixed}
table.itin.fplans th:first-child{width:42%}
table.itin.fplans th, table.itin.fplans td{padding:12px 14px}
table.itin.fplans td.rowlab{white-space:normal}
.tpl h2[id], .feat{scroll-margin-top:78px}
.feat:target{background:var(--orange-soft); box-shadow:-22px 0 0 var(--orange-soft), 22px 0 0 var(--orange-soft)}
@media (max-width:640px){
  .feats{padding:2px 16px}
  .feat:target{box-shadow:-16px 0 0 var(--orange-soft), 16px 0 0 var(--orange-soft)}
}

/* ---------- Liquid Glass (Oct 15 2026): the default look, on the content pages ----------
   Mirrors landing.css: a fixed wash of the brand's colours under the page, the sticky header a
   pane that blurs what scrolls under it, cards and tables as frosted panes with a lit top edge.
   Panes stay at .66 white so the long copy these pages carry keeps its contrast; solid again
   under Reduce Transparency. */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(74% 46% at 6% 42%, rgba(143,185,220,.58), transparent 72%),
    radial-gradient(60% 42% at 96% 62%, rgba(242,160,61,.3), transparent 72%),
    radial-gradient(84% 50% at 40% 104%, rgba(60,117,164,.28), transparent 70%),
    var(--bg)}
.topbar{background:rgba(245,247,250,.8); border-bottom-color:rgba(26,40,56,.08);
  -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.glance, .faq-tpl .qa, .more a.card, .hub-cards a.card, .feats, .sources, .choose .col, .itin-wrap, .fjump a{
  background-color:rgba(255,255,255,.66); border-color:rgba(255,255,255,.9);
  background-image:linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.12) 46%, rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 #fff, 0 14px 36px -16px rgba(15,42,67,.3)}
.choose .col.us{border-color:var(--orange)}
.more a.card:hover, .hub-cards a.card:hover, .fjump a:hover{border-color:var(--blue)}
.tip, .verdict{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 36px -16px rgba(15,42,67,.4)}
.ftag{background:rgba(255,255,255,.5)}
footer.tpl-footer{background:rgba(255,255,255,.55); border-top-color:rgba(255,255,255,.9)}
@media (prefers-reduced-transparency: reduce){
  body::before{display:none}
  .glance, .faq-tpl .qa, .more a.card, .hub-cards a.card, .feats, .sources, .choose .col, .itin-wrap, .fjump a,
  footer.tpl-footer{background-color:var(--card); background-image:none}
  .topbar{background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none} }