@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/atkinson-hyperlegible-latin-400.woff2") format("woff2")}
/* Layout: one calm column on a night-blue ground; the world band of time zones is the hero, then the travel day, the light dial, the steps, the promises. */
:root{
  --night:#0A1424;      /* app's start colour */
  --deep:#0E2A33;       /* blue-green depth */
  --surface:#12303A;    /* cards */
  --line:#1F4450;       /* hairlines */
  --text:#EAF2F2;       /* one text colour for headings and body */
  --muted:#A9C1C4;      /* quieter text, same hue family */
  --teal:#2CC9B5;       /* the app's accent, lifted for night */
  --dawn:#F3D29A;       /* light windows only */
  --sleep:#2B4F7A;      /* sleep bands */
  --face:"Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0:1rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.2rem,6vw,3.6rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night)}
/* THE CHINESE PAGES [message 73]: no font is bundled for them (Atkinson is the Latin face and stays first, so the Latin and the digits are unchanged).
   The system's own Chinese face follows, named for the phone or computer it is on, with the script's own fallback list, so Simplified and Traditional
   each get their regional forms; <html lang> is what makes the browser pick the right glyph variants even when none of these names exists. */
:root:lang(zh-Hans){--face:"Atkinson Hyperlegible","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif}
:root:lang(zh-Hant){--face:"Atkinson Hyperlegible","PingFang TC","Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif}
/* THE CHINESE HEADINGS HAVE THEIR OWN SCALE, AND THE CHINESE LINES BREAK WELL [Team Edster, 2026-10-08, fix 18, from the live site at 1450px]. A Chinese character fills its whole em-box, so
   at the English heading's size it reads much heavier and larger than the Latin text beside it (the hero was 57.6px). Every heading level is set at about 0.75 to 0.9 of its Latin size
   (measured on both Chinese home pages and their Support pages, in docs: the line count stays the Latin page's or one fewer, and no heading is larger than its English counterpart); body text
   is untouched and stays at its reading size. The hero's measure is in em (a Chinese line is counted in characters, and 15ch is about 8). Only these two languages: :lang(zh-*) never matches
   the English pages, whose rendering is unchanged. LINE BREAKS: headings already balance (above); paragraphs ask for `pretty` where the browser has it, Chinese uses the strict
   line-break rules, and the guarantees do not depend on either: the build puts a word joiner (U+2060) inside each glossary term and fixed pair and before a paragraph's last character
   (scripts/build-site.mjs), exactly as the app does. */
:root:lang(zh-Hans),:root:lang(zh-Hant){--step-3:1.7rem;--step-4:clamp(1.65rem,4.5vw,2.7rem);line-break:strict}
:is(:lang(zh-Hans),:lang(zh-Hant)) .hero h1{max-width:11em}
:is(:lang(zh-Hans),:lang(zh-Hant)) .closing h2{max-width:14em}
:is(:lang(zh-Hans),:lang(zh-Hant)) .point h3,:is(:lang(zh-Hans),:lang(zh-Hant)) .step h3,:is(:lang(zh-Hans),:lang(zh-Hant)) .prose h2{font-size:1.1rem}
:is(:lang(zh-Hans),:lang(zh-Hant)) .promise h3,:is(:lang(zh-Hans),:lang(zh-Hant)) .contact h3{font-size:1rem}
:is(:lang(zh-Hans),:lang(zh-Hant)) p{text-wrap:pretty}
.legal-note{color:var(--muted);margin:0 0 14px}
body{margin:0;color:var(--text);font-family:var(--face);font-weight:400;font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:400;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-0.01em}
p{margin:0}
a{color:var(--teal)}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* top bar */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-block:20px} /* wraps so the brand and the button never push the page sideways at 200% text [site26] */
.brand{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--text);text-decoration:none;white-space:nowrap}
/* A SOFT LIGHT DISC BEHIND THE LOGO [fix 08, Team Edster, 2026-10-06]: the art's dark-navy moon and plane blend into the night ground at 28px, so the logo sits on a pale,
   slightly warm tile (the site's text colour at 93%), fully rounded, with a thin --line edge so it does not glow. In CSS, not baked into the art. */
.logo-disc{display:grid;place-items:center;flex:none;box-sizing:border-box;width:36px;height:36px;border-radius:50%;background:rgba(234,242,242,.93);border:1px solid var(--line)}
.logo{display:block;width:28px;height:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--teal);color:#06231F;text-decoration:none;font-size:1rem;border:0;cursor:pointer;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}

/* hero */
.hero{padding-block:24px 8px;display:grid;gap:28px}
.hero h1{font-size:var(--step-4);max-width:15ch}
.hero .lede{font-size:var(--step-1);color:var(--muted);max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font-size:.9rem;color:var(--muted)}

/* world band */
.band{position:relative;isolation:isolate;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--deep);aspect-ratio:12/4.4;min-height:220px;max-width:100%}
.band .sky{position:absolute;inset:0;width:200%;z-index:0;
  background:linear-gradient(90deg,#0A1424 0.00%,#0A1424 0.78%,#0A1424 1.56%,#0A1424 2.34%,#0A1424 3.12%,#0A1424 3.91%,#0A1424 4.69%,#0A1424 5.47%,#0A1424 6.25%,#0A1424 7.03%,#0A1424 7.81%,#0A1424 8.59%,#0A1424 9.38%,#0A1424 10.16%,#0A1424 10.94%,#0B1829 11.72%,#0E243C 12.50%,#102B46 13.28%,#1B385A 14.06%,#2A4A74 14.84%,#3C537D 15.62%,#6D698C 16.41%,#827390 17.19%,#B48C8B 17.97%,#D49A86 18.75%,#DCA889 19.53%,#E7BD8D 20.31%,#EBC48E 21.09%,#EECC97 21.88%,#F2D6A1 22.66%,#F3DBA6 23.44%,#F4DDA8 24.22%,#F4DDA8 25.00%,#F4DDA8 25.78%,#F3DBA6 26.56%,#F2D6A1 27.34%,#EECC97 28.12%,#EBC48E 28.91%,#E7BD8D 29.69%,#DCA889 30.47%,#D49A86 31.25%,#B48C8B 32.03%,#827390 32.81%,#6D698C 33.59%,#3C537D 34.38%,#2A4A74 35.16%,#1B385A 35.94%,#102B46 36.72%,#0E243C 37.50%,#0B1829 38.28%,#0A1424 39.06%,#0A1424 39.84%,#0A1424 40.62%,#0A1424 41.41%,#0A1424 42.19%,#0A1424 42.97%,#0A1424 43.75%,#0A1424 44.53%,#0A1424 45.31%,#0A1424 46.09%,#0A1424 46.88%,#0A1424 47.66%,#0A1424 48.44%,#0A1424 49.22%,#0A1424 50.00%,#0A1424 50.00%,#0A1424 50.78%,#0A1424 51.56%,#0A1424 52.34%,#0A1424 53.12%,#0A1424 53.91%,#0A1424 54.69%,#0A1424 55.47%,#0A1424 56.25%,#0A1424 57.03%,#0A1424 57.81%,#0A1424 58.59%,#0A1424 59.38%,#0A1424 60.16%,#0A1424 60.94%,#0B1829 61.72%,#0E243C 62.50%,#102B46 63.28%,#1B385A 64.06%,#2A4A74 64.84%,#3C537D 65.62%,#6D698C 66.41%,#827390 67.19%,#B48C8B 67.97%,#D49A86 68.75%,#DCA889 69.53%,#E7BD8D 70.31%,#EBC48E 71.09%,#EECC97 71.88%,#F2D6A1 72.66%,#F3DBA6 73.44%,#F4DDA8 74.22%,#F4DDA8 75.00%,#F4DDA8 75.78%,#F3DBA6 76.56%,#F2D6A1 77.34%,#EECC97 78.12%,#EBC48E 78.91%,#E7BD8D 79.69%,#DCA889 80.47%,#D49A86 81.25%,#B48C8B 82.03%,#827390 82.81%,#6D698C 83.59%,#3C537D 84.38%,#2A4A74 85.16%,#1B385A 85.94%,#102B46 86.72%,#0E243C 87.50%,#0B1829 88.28%,#0A1424 89.06%,#0A1424 89.84%,#0A1424 90.62%,#0A1424 91.41%,#0A1424 92.19%,#0A1424 92.97%,#0A1424 93.75%,#0A1424 94.53%,#0A1424 95.31%,#0A1424 96.09%,#0A1424 96.88%,#0A1424 97.66%,#0A1424 98.44%,#0A1424 99.22%,#0A1424 100.00%);
  opacity:.72;animation:drift 90s linear infinite;will-change:transform}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* THE SKY'S SOFT SHADE AND FINE GRAIN [Team Edster, 2026-10-15, site 01]: two layers drawn above the drifting sky and below the picture and the caption (z-order 0 sky, 1 these, 2 svg and caption), so the brighter daylight never costs legibility. Both are in CSS: no template change, no inline style. */
.band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,22,40,.34) 0%,rgba(10,22,40,0) 50%,rgba(10,22,40,.10) 100%)}
.band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;opacity:.05;mix-blend-mode:overlay}
.band svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.band .zones line{stroke:#EAF2F2;stroke-opacity:.07}
.city text{fill:var(--text);font:14px var(--face)}
.city .t{fill:var(--muted);font-size:12px}
.city circle{fill:var(--text)}
.trail{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;opacity:.9}
.plane path{fill:var(--text)}
/* The caption sits on the same night chip as the city labels (the chip is drawn in home.js; on a phone the caption is under the picture and the chip is harmless). */
.band-caption{position:absolute;z-index:2;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);background:rgba(10,20,36,.74);padding:3px 10px;border-radius:9px}

/* clocks */
.clocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.clock{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent);min-width:0}
.clock svg{flex:0 0 52px;width:52px;height:52px}
.clock .face{fill:none;stroke:var(--line);stroke-width:2}
.clock .h{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.clock .m{stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.clock.body .h{stroke:var(--teal)}
.clock .name{font-size:.85rem;color:var(--muted)}
.clock .time{font-size:1.35rem}
@media (max-width:640px){.clocks{grid-template-columns:1fr}}

/* sections */
section{padding-block:clamp(56px,9vw,96px)}
.sec-head{display:grid;gap:12px;max-width:60ch;margin-bottom:32px}
.sec-head h2{font-size:var(--step-3)}
.sec-head p{color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* phone */
.phone{width:min(340px,100%);margin-inline:auto;border-radius:40px;padding:14px;background:#081019;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.screen{border-radius:28px;background:var(--night);padding:18px 14px 22px;display:grid;gap:8px;position:relative;overflow:hidden}
.screen .hdr{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px}
.screen .hdr b{font-weight:400;color:var(--teal);font-size:.95rem}
.screen .hdr span{font-size:.75rem;color:var(--muted)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid transparent;transition:border-color .6s ease,background-color .6s ease,opacity .6s ease}
.row .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.row .ic i{display:block;width:10px;height:10px;border-radius:50%}
.row .tt{font-size:.92rem}
.row .st{font-size:.76rem;color:var(--muted)}
.row.now{border-color:var(--teal);background:#163A45}
.row.past{opacity:.55}
.band-row{padding:8px 12px;border-radius:10px;font-size:.78rem;background:#17325A;color:var(--text)}
.band-row.plane{background:#1A3A63}
.band-row.clk{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.band-row small{font-size:.7rem;color:var(--muted);white-space:nowrap}
.divider{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--teal);padding:2px 2px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--teal);opacity:.55}
.light i{background:var(--dawn);box-shadow:0 0 12px var(--dawn)}
.wake i{background:var(--text)}
.meal i{background:var(--muted)}
.air i{background:var(--teal)}
.bed i{background:var(--sleep);border:1px solid var(--muted)}
.points{display:grid;gap:18px}
.point{display:grid;gap:4px}
.point h3{font-size:var(--step-1)}
.point p{color:var(--muted)}

/* dial */
.dial-wrap{display:grid;place-items:center;gap:16px}
.dial{width:min(360px,100%);height:auto;max-width:100%}
.dial .ring{fill:none;stroke:var(--line);stroke-width:18}
.dial .tick{stroke:var(--muted);stroke-opacity:.5}
.dial .lbl{fill:var(--muted);font:12px var(--face)}
.dial .center{fill:var(--text);font:20px var(--face)}
.dial .sub{fill:var(--muted);font:13px var(--face)}
#arcs{transition:transform 1.4s cubic-bezier(.4,0,.2,1);transform-origin:180px 180px}
.legend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:.85rem;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.legend .l::before{background:var(--dawn)} .legend .s::before{background:var(--sleep);border:1px solid var(--muted)}
.days{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.days button{font:inherit;font-size:.8rem;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.days button[aria-pressed="true"]{color:var(--night);background:var(--teal);border-color:var(--teal)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:8px;min-width:0}
.step .n{font-size:.85rem;color:var(--teal)}
.step h3{font-size:var(--step-1)}
.step p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* promises */
.promises{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.promise{padding:20px;border-radius:18px;background:var(--surface);display:grid;gap:6px;min-width:0}
.promise h3{font-size:1.1rem}
.promise p{color:var(--muted);font-size:.92rem}
@media (max-width:900px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.promises{grid-template-columns:1fr}}

/* closing */
.closing{text-align:left;display:grid;gap:18px;justify-items:start;border-radius:28px;padding:clamp(28px,5vw,56px);background:linear-gradient(135deg,var(--deep),#123844);border:1px solid var(--line);position:relative;overflow:hidden}
.closing h2{font-size:var(--step-3);max-width:20ch}
.closing p{color:var(--muted);max-width:56ch}
.closing .sun{position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--dawn) 0%,rgba(243,210,154,.25) 35%,transparent 70%);opacity:.35;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.5}}

footer{padding-block:40px 56px;border-top:1px solid var(--line);margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;color:var(--muted);font-size:.9rem}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .band .sky,.closing .sun{animation:none}
  #arcs{transition:none}
  .row{transition:none}
}
/* page chrome added for the site [message 67] */
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#06231F;padding:10px 16px;border-radius:0 0 10px 10px;z-index:10}
.skip:focus{left:16px}
.draft{background:var(--surface);border-bottom:1px solid var(--line);color:var(--text);padding:10px clamp(16px,4vw,32px);font-size:.9rem;text-align:center}
.prose{max-width:70ch;padding-block:24px 8px}
.prose h1{font-size:var(--step-3);margin-bottom:8px}
.prose h2{font-size:var(--step-1);margin:28px 0 8px}
.prose p{margin:0 0 14px;color:var(--text)}
.prose .meta{color:var(--muted);font-size:.9rem}
.prose .lede{font-size:var(--step-1);color:var(--muted);margin-bottom:6px}
.prose .plain{margin:0 0 14px;padding-left:1.2em}
.prose .plain li{margin:0 0 8px}
.prose .guide-cta{margin:28px 0 14px}

/* THE GUIDE PAGES [site 01]: the Tips page's eight tips are a numbered list with the number showing (the list's own markers); each tip's label is a small bordered pill whose WORDS carry the
   meaning (the one that moves the clock may use the --dawn text colour, but never colour alone). Regular weight throughout. */
.tips{margin:20px 0 8px;padding-left:2em}
.tips li{margin:0 0 22px;padding-left:6px}
.tips li::marker{color:var(--muted)}
.tips .tip-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 6px}
.tips .tip-title{font-size:1.1rem}
.tips li p:last-child{margin:0;color:var(--muted)}
.tip-label{display:inline-block;padding:1px 10px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;line-height:1.5;color:var(--muted);white-space:nowrap}
.tip-label.moves{color:var(--dawn)}

/* THE HOME PAGE'S "HONEST VERSION" [site 01]: two cards (the guide, the app), side by side on a wide screen and stacked on a phone, in the same card style as the promises. */
.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-card{padding:24px;border-radius:18px;background:var(--surface);display:grid;gap:12px;align-content:start;justify-items:start;min-width:0}
.guide-card h3{font-size:var(--step-1)}
.guide-card p{color:var(--muted)}
.guide-card .guide-links{display:grid;gap:8px}
.guide-card .guide-links a{color:var(--teal)}
@media (max-width:760px){.guide-cards{grid-template-columns:1fr}}
.contact{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.contact .card{padding:20px;border-radius:18px;background:var(--surface);display:grid;gap:6px;min-width:0}
.contact h3{font-size:1.1rem}
.contact p{color:var(--muted);font-size:.92rem}
.contact a,.contact .address{overflow-wrap:anywhere}
.contact .mail{justify-self:start;margin-top:6px}
.mail[hidden]{display:none}
.nojs{color:var(--muted)}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

.legend .note::before{display:none}
.legend .note{opacity:.85}

/* PHONES: the band keeps its picture's own proportions (no squashed text), the caption sits under it, and the two cities that crowd
   the others (Los Angeles, London) step aside so the labels can be read [message 67] */
@media (max-width:640px){
  .band{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column}
  .band svg{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1200/440;flex:none}
  .band-caption{position:relative;left:auto;right:auto;bottom:auto;padding:6px 14px 12px}
  .city.opt{display:none}
  .city text{font-size:38px;transform:translateY(16px)}
  .city .t{font-size:32px;transform:translateY(34px)}
  .city circle{r:7px}
}
footer .disclaimer{flex-basis:100%;margin:0;font-size:.85rem}

/* THE DIAL'S EXPLAINER AND THE QUESTIONS [Team Edster, 2026-10-25, site26] */
.dial-explain{max-width:36ch;text-align:center;color:var(--muted);font-size:.95rem}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.faq-item{padding:20px;border-radius:18px;background:var(--surface);display:grid;gap:8px;min-width:0;align-content:start}
.faq-item h3{font-size:1.1rem}
.faq-item p{color:var(--muted);font-size:.95rem}
:is(:lang(zh-Hans),:lang(zh-Hant)) .faq-item h3{font-size:1rem}
@media (max-width:760px){.faq{grid-template-columns:1fr}}
/* THE PHONE'S "OPEN THE APP" BAR [site26]: hidden except at phone widths; the page gets matching room at the bottom so it covers nothing, and a focused link is scrolled clear of it. No motion. */
.open-bar{display:none}
@media (max-width:640px){
  .open-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid var(--line)}
  .open-bar .btn{width:100%;justify-content:center}
  body.has-open-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:88px}
}

/* LARGE TEXT ON A SMALL SCREEN [Team Edster, 2026-10-28, Batch 39 Part 3, site39; website-report.md findings 1 and 2]. At 200% and 250% text on a 320, 360 or 390 px phone, a word that cannot fit the column
   (the printed privacy address; "Questions" and "Acknowledgment" in a heading) or a label that refused to wrap (the Tips pills, the Support buttons) pushed the page sideways. A word now breaks only when it would
   leave its box, and the pills and buttons wrap their words when the line is too narrow; where the text already fits nothing moves. */
h1,h2,h3,p,li{overflow-wrap:anywhere}
.btn,.tip-label{white-space:normal;max-width:100%}
.btn{text-align:center}
/* THE FADED "PAST" ROWS OF THE DEMO [site39; finding 10]: at 55% the sub-line (the quieter text colour) was 3.26:1 on the row it sits on. The row stays as faded as it was (the same 55%, the same title colour,
   4.83:1); its sub-line takes the title's colour, which reads 4.83:1 too. The words are unchanged. */
.row.past .st{color:var(--text)}