/* Trocaly legal pages (privacy.html, terms.html).
   Shared minimal style matching the app: same palette and the
   same self-hosted Plus Jakarta Sans as styles.css (v16.4,
   Nov 3, 2026 — one typeface across the whole product),
   readable single column. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/jakarta-var-latin.woff2?v=29') format('woff2')}
:root{
  /* v16.3 orange re-theme: same palette as styles.css — one
     unified ember system (see the :root note there for the
     verified contrast ratios). */
  --flame:#F06400; --ember:#F04E23; --rust:#E63329; --deep:#9A3412;
  --give:#BC3A10; --want:#BC3A10; --ink:#33231B; --muted:#6E5B4C;
  --line:#EDDCD0; --bg:#FFFFFF; --soft:#FDF3EC;
}
*{box-sizing:border-box}
html{color:var(--ink)}
body{margin:0;font-family:'Plus Jakarta Sans',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(240,78,35,.14)}
/* v16.4: the same browser-chrome tokens as styles.css — selection
   and scrollbars stay in the theme on the legal pages too. */
::selection{background:#FAD9AE;color:var(--ink)}
html{scrollbar-color:#E3C3AB transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#E3C3AB;border-radius:8px;border:2px solid #fff}
::-webkit-scrollbar-track{background:transparent}
/* V16.3.2: the same global link rule as styles.css. A bare <a>
   must never fall back to the browser's default link blue — the
   brand header link carried no colour of its own at all (.doc a
   and footer a below already carried the ember; this closes the
   remaining gaps). Ember --want is 5.60:1 on white; hover/active
   deepen to --deep (7.31:1) with an underline. */
a{color:var(--want)}
a:hover,a:active{color:var(--deep);text-decoration:underline}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-icon{width:40px;height:40px;border-radius:10px}
.brand-name{font-weight:800;font-size:20px;background:linear-gradient(90deg,#C2410C,#BE3A12,#B02A1B);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.brand-tag{color:var(--deep);font-size:12px;font-weight:600;letter-spacing:.4px;white-space:nowrap}
main.doc{max-width:680px;margin:0 auto;padding:24px 16px 10px}
.doc h1{font-size:28px;margin:10px 0 8px;line-height:1.25;letter-spacing:-.01em}
.doc h2{font-size:19px;margin:28px 0 8px;line-height:1.35;letter-spacing:-.01em}
.doc p{font-size:17px;line-height:1.7;margin:10px 0}
.doc ul{margin:10px 0;padding-left:22px}
.doc li{font-size:17px;line-height:1.7;margin:6px 0}
.doc .draft-note{color:var(--muted);font-style:italic;font-size:14px;line-height:1.6;border-bottom:1px solid var(--line);padding-bottom:14px}
footer{text-align:center;color:var(--deep);font-weight:600;padding:18px 10px 30px}
footer p{margin:6px 0}
footer a{color:var(--want);text-decoration:none}
footer a:hover{text-decoration:underline}
footer p a{display:inline-block;padding:13px 8px;min-height:44px;white-space:nowrap}
/* v18.17: each footer separator rides in a nowrap unit with the
   link AFTER it, so a wrap can never strand a "·" at a line end. */
.fl-u{white-space:nowrap}
:focus-visible{outline:3px solid var(--want);outline-offset:2px;border-radius:4px}
.doc a{color:var(--want)}

/* v17: Help Q&A — the same component as the in-app Help
   (styles.css carries the twin rules). legal.css styles no form
   controls elsewhere, so the search input is styled here. */
.qa-search{margin:16px 0 6px}
.qa-search-label{display:block;font-weight:700;margin-bottom:6px}
.qa-search-input{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.qa-count{color:var(--muted);font-size:13px;margin:6px 0 0}
.qa-cat{margin:26px 0 0}
/* v18.8.6: on the Help page the guide sits directly above the
   answers — the first category's own top margins (26px cat +
   28px .doc h2) would stack the player->answers gap past the
   guide's 24px cap, so the first category starts flush and
   the guide's 16px bottom margin sets the gap. */
#help-qa>.qa-cat:first-child{margin-top:8px}
#help-qa>.qa-cat:first-child>h2{margin-top:0}
.qa-item{border-top:1px solid var(--line)}
.qa-item h3{margin:0;font-size:16px}
.qa-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;padding:12px 2px;min-height:44px;font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.qa-q::after{content:'+';font-size:20px;font-weight:400;color:var(--muted);flex:none}
.qa-q[aria-expanded="true"]::after{content:'\2013'}
.qa-a p{margin:0 0 14px;font-size:16px;line-height:1.65}
.qa-video{display:block;width:100%;aspect-ratio:9/16;border-radius:16px;background:#1c1c1e;margin-top:10px}
.help-video{margin:0 0 16px}
.help-video .help-video-title{font-size:18px;margin:0 0 6px}
.help-video .qa-video{margin-top:0}
.help-video-cap{font-size:13.5px;color:var(--muted);margin:8px 0 0}
/* v18.8.6: the badge + guide twins — styles.css carries the
   same component for the app surface; the .video-play badge
   base rules live here too because legal.css is standalone.
   The guide player is sized by HEIGHT (the masters are
   portrait 9:16): height:min(50vh,500px), width = height ×
   9/16, centred, no crop, no letterbox. help.js dismisses
   the badge on tap (or on play) and starts the video. */
.video-play{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-play-badge{width:78px;height:78px;border-radius:50%;background:var(--give);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(50,25,10,.35);transition:transform .15s ease,background .15s ease}
.video-play-tri{width:0;height:0;margin-left:6px;border-left:27px solid #fff;border-top:17px solid transparent;border-bottom:17px solid transparent}
.video-play:hover .video-play-badge,.video-play:focus-visible .video-play-badge{background:var(--deep);transform:scale(1.05)}
.help-video.guide{max-width:400px;margin:0 auto 16px;text-align:center}
.help-video.guide .help-video-title{margin:0 0 10px}
.guide-frame{position:relative;width:max-content;max-width:100%;margin:0 auto}
.guide-frame .qa-video{width:auto;height:min(50vh,500px);max-width:100%;margin:0;border-radius:20px;box-shadow:0 12px 30px rgba(70,35,10,.16)}
.guide-badge{width:64px;height:64px}
.guide-badge .video-play-tri{border-left-width:22px;border-top-width:14px;border-bottom-width:14px;margin-left:5px}
@media (max-width:679px){
  .guide-badge{width:56px;height:56px}
  .guide-badge .video-play-tri{border-left-width:19px;border-top-width:12px;border-bottom-width:12px;margin-left:4px}
}
.qa-empty{margin:18px 0}
.qa-contact{margin:22px 0 6px}
/* v18.9 Help two-cell (the ONE guide + its side cell) — mirrors
   the component rules in styles.css for the in-app surface. */
.guide-two-cell{display:block}
.help-side{max-width:400px;margin:0 auto;text-align:left}
.help-side-label{font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#6B5A4E;margin:0 0 6px}
.help-side-cap{font-size:15.5px;margin:0 0 12px}
.help-side-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 12px}
.help-side-links .linklike{padding:0;text-align:left;font-size:15px;background:none;border:none;color:#A83A0A;cursor:pointer;font-weight:600}
.help-side-all{font-weight:700;font-size:15px}
@media (min-width:768px){
  .guide-two-cell{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;max-width:1060px;margin:0 auto}
  .guide-two-cell .help-video.guide{margin:0}
  .guide-two-cell .help-side{max-width:none;margin:6px 0 0}
}