/* stayuphill.com home page: one centred column over one living scene. Loads after site.css, which holds the named
   golden values (type, Fibonacci spacing, the band). The scene (sky, stars, sun, moon, the mountain, land) rises
   from the first screen to a band at the top of the screen and stays there, at the same height, to the end of the
   page (SITE_06). The closing line sits on the night ground before the footer (SITE_07). js/home.js turns the scroll
   position into the time of day; without it the scene stays at sunrise. With Reduce Motion the band stays at the
   top from the start and the hills never move. Heights use svh (with vh for older browsers), which do not change
   when a phone's address bar shows or hides. */

:root {
  /* The first screen: the scene fills it except a strip of ground at the bottom, where the phone peeks up. */
  --peek: clamp(89px, 15vh, 144px);
  --peek: clamp(89px, 15svh, 144px);
  --scene-h: calc(100vh - var(--peek));
  --scene-h: calc(100svh - var(--peek));          /* js/home.js raises it if the first screen's words need more */
  --header-h: calc(var(--size-touch) + 2 * var(--fib-8));
  --gap-para: var(--fib-13);
  --card-pad-y: var(--fib-55);
  --card-pad-x: var(--fib-21);
  --type-figure: min(var(--type-44), calc(100cqi / 8.4));
  /* Picture sizes: a phone on its own, and phones in a row of four (two by two on phones). */
  --phone-single: 250px;
  --phone-small: min(150px, calc((100vw - 2 * var(--gutter) - 2 * var(--card-pad-x) - var(--fib-13)) / 2));
  --watch-w: 170px;
  --report-w: 260px;
}
@media (min-width: 640px) {
  :root { --phone-small: min(210px, calc((100vw - 2 * var(--gutter) - 2 * var(--card-pad-x) - 3 * var(--fib-13)) / 4)); }
}
@media (min-width: 880px) { .hero { padding-bottom: calc(var(--mtn-h) + var(--fib-55)); } }
@media (min-width: 880px) {
  :root { --card-pad-y: var(--fib-89); --card-pad-x: var(--fib-55); --phone-single: 300px; --phone-small: 208px; --watch-w: 220px; --report-w: 380px;
    --type-figure: var(--type-72); }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --peek: 55px; }
}

.figure-big, .proof-figure { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.03em; }

/* The header stays at the top of the screen over the sky, light until sunset and dark after (js/home.js). */
.home-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
/* Without the scenery (JavaScript off, or Increase Contrast) nothing hides text before it reaches the header, so
   the header gets a solid bar in the page colour: nothing readable shows behind or between the pills. */
html:not(.js) .home-header { background: var(--bg); border-bottom: 1px solid var(--line); }
@media (prefers-contrast: more) { .home-header { background: var(--bg); border-bottom: 1px solid var(--line); } }

/* ------------------------------------------------------------------ the scene */
/* The scene's track runs the whole page, footer included, so the band holds at the top to the very end. */
body.home { position: relative; }
/* The track runs the whole page, so the band holds at the top to the very end. Never a scroll anchor. */
.scene-track { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; pointer-events: none; overflow-anchor: none; }
.home-header { overflow-anchor: none; }
.scene--a { position: -webkit-sticky; position: sticky; top: calc(var(--band-h) - var(--scene-h)); height: var(--scene-h); will-change: transform; }
.scene-paint { position: absolute; inset: 0; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Where the band meets the page: a soft shadow that follows the wavy edge (SITE_09; no hard line). */
.scene--a { filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22)); }
.sky[data-time="evening"] { background: linear-gradient(var(--sky-top) 0, var(--sky-top) var(--sky-start),
  var(--sky-mid) calc(var(--sky-start) + (var(--sky-end) - var(--sky-start)) * 0.72), var(--sky-bottom) var(--sky-end)); }
.box { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band-h); }
/* Stars over the whole sky. */
.stars-layer { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--land-h) * 0.5); }
.stars-layer .stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--text); }
.sun, .moon { position: absolute; left: 0; top: 0; width: var(--sun-size); height: var(--sun-size); will-change: transform, opacity; }
.sun svg, .moon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sun { transform: translate3d(calc(6vw - var(--sun-size) / 2), calc(var(--band-h) - var(--land-h) * 0.78 - var(--sun-size) / 2), 0); }
.moon { opacity: 0; }
.scene .land { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--land-h); display: block; max-width: none; }
[data-fade] { opacity: 0; }
html:not(.js) .scene [data-fade] { opacity: 0 !important; }   /* without the script the scene stays at sunrise */

/* ------------------------------------------------------------------ the first screen */
.hero { position: relative; z-index: 3; box-sizing: border-box; min-height: var(--scene-h); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center;
  text-align: center; color: var(--text); padding: calc(var(--header-h) + var(--fib-21)) var(--gutter-right) calc(var(--mtn-h) + var(--fib-34)) var(--gutter-left); }   /* the scenery starts below the last line, 34 clear (55 wide) */
.hero .words { width: 100%; max-width: 1089px; container-type: inline-size; }   /* room for the 116 headline: "One honest number." is about 9 ems */
.hero .lead { max-width: var(--col-read); margin: var(--gap-head) auto 0; }
.hero .store { justify-content: center; margin-top: var(--fib-21); }
.small-note { margin-top: var(--fib-13); color: var(--text); }
/* The lead did not fit on a 375 by 667 phone at web-lead, so on phones it is one step smaller (SITE_04 Step 4.4). */
@media (max-width: 639px) { .hero .lead { font-size: var(--type-17); line-height: 24px; } }

/* ------------------------------------------------------------------ the sections, on the ground */
.flow { position: relative; z-index: 1; margin-top: calc(-1 * var(--land-h)); padding-top: calc(var(--land-h) + var(--fib-13));
  padding-bottom: var(--gap-section); }
.ground { position: absolute; inset: 0; z-index: -1; }
.ground > div { position: absolute; inset: 0; background: var(--ridge-2); }
html:not(.js) .ground > [data-fade] { opacity: 0; }
html:not(.js) .statement { padding: var(--card-pad-y) var(--card-pad-x); background: var(--ridge-2); border-radius: var(--radius-card); }

.hero-phone { --w: var(--phone-single); margin: 0 auto; width: var(--w); }
.hero-phone + .sec { margin-top: var(--gap-section); }
.sec + .sec { margin-top: var(--gap-section); }
.sec { position: relative; box-sizing: border-box; width: calc(100% - var(--gutter-left) - var(--gutter-right)); margin-inline: auto;
  text-align: center; color: var(--text); container-type: inline-size; }
.sec-card { max-width: calc(var(--col-visual) + 2 * var(--card-pad-x)); padding: var(--card-pad-y) var(--card-pad-x); background: var(--card); border-radius: var(--radius-card); }
.statement { max-width: var(--col-visual); }
.sec-head { max-width: var(--col-visual); margin-inline: auto; }
.sec-text { max-width: var(--col-read); margin-inline: auto; }
.sec-visual { max-width: var(--col-visual); margin-inline: auto; }
.sec-head + .sec-text, .proof-figure + .sec-text { margin-top: var(--gap-head); }
.sec-text + .sec-text { margin-top: var(--gap-para); }
.sec-text + .pro-note { margin-top: var(--fib-8); }
.pro-note { color: var(--text-secondary); }
.sec > * + .sec-visual, .sec-visual + .sec-text, .sec-head + .chips + .sec-visual, .proof > * + .proof-bars, .proof-bars + .sec-text { margin-top: var(--gap-visual); }
.sec-head + .chips { margin-top: var(--gap-head); }
.chips + .sec-visual { margin-top: var(--gap-visual); }
.caption-line { margin-top: var(--fib-13); color: var(--text-secondary); }
.frame-fig > .caption-line, .awards-visual > .caption-line { margin-top: var(--fib-34); }
.source { margin-top: var(--fib-21) !important; }

/* ------------------------------------------------------------------ pictures */
.report img { display: block; width: var(--report-w); max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-bar); box-shadow: var(--soft-shadow); }
.watch { display: block; width: var(--watch-w); height: auto; margin: 0 auto var(--fib-21); }

/* The five bands as one bar, with a marker at 38.4 in Fair. */
.scale-bands { margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: min(100%, 720px); padding-top: calc(1.7em + var(--fib-34)); }   /* room for the 38.4 above the bar, growing with the text size */
.scale-bands > div { position: relative; min-width: 0; }
.scale-bands .bar { display: block; height: 16px; border-radius: var(--radius-bar); }
.b-poor .bar { background: var(--band-poor); } .b-fair .bar { background: var(--band-fair); } .b-good .bar { background: var(--band-good); }
.b-excellent .bar { background: var(--band-excellent); } .b-superior .bar { background: var(--band-superior); }
.scale-label { display: flex; justify-content: center; white-space: nowrap; margin-top: var(--fib-8); font-family: var(--font-sans); font-size: 15px; line-height: 20px; color: var(--text); }
.scale-label.is-current { font-weight: 600; }
@media (max-width: 479px) { .scale-label { font-size: 13px; line-height: 16px; } }   /* the caption size */
/* The marker: a short upright line through the bar, with the value above it. */
.scale-marker { position: absolute; z-index: 1; left: 57%; top: calc(-1 * var(--fib-8)); width: 4px; height: 28px;   /* ends just under the bar, clear of the label */ margin-left: -2px; border-radius: 2px; background: var(--text); }
.scale-value { position: absolute; left: 50%; bottom: calc(100% + var(--fib-13)); transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--type-27); line-height: 1; letter-spacing: -0.02em; }
@media (min-width: 880px) { .scale-bands { padding-top: calc(2.75em + var(--fib-34)); } .scale-value { font-size: var(--type-44); } }

.figures { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fib-13); max-width: var(--col-visual); container-type: inline-size; }
.figures li { container-type: inline-size; }
.figure-big { display: block; font-size: min(var(--type-figure), calc(100cqi / 2.9)); line-height: 1.05; white-space: nowrap; }
.figures .body { display: block; margin-top: var(--fib-8); color: var(--text-secondary); }
/* Phones (SITE_09): each number is the large text, its words smaller underneath, one under the other. */
@media (max-width: 699px) {
  .figures { grid-template-columns: minmax(0, 1fr); gap: var(--fib-21); }
  .figure-big { font-size: var(--type-72); line-height: 1; }
  .figures .body { font-size: 15px; line-height: 20px; margin-top: 4px; }
}

.tiles3 { list-style: none; padding: 0; display: grid; gap: var(--fib-13); grid-template-columns: minmax(0, 1fr); max-width: var(--col-visual); }
@media (min-width: 720px) { .tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiles3 li, .bento .tile { background: var(--raised); border-radius: var(--radius-card); padding: var(--fib-21); text-align: center; }
.tiles3 li > * + *, .bento .tile > * + * { margin-top: var(--fib-8); }
.icon { display: block; width: 48px; height: 48px; margin-inline: auto; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.drawings { display: flex; justify-content: center; gap: clamp(var(--fib-13), 6vw, var(--fib-55)); }
.drawings figure { flex: 0 1 200px; min-width: 0; margin: 0; }   /* always side by side, about 200 wide each */
.drawing { display: block; width: 100%; height: auto; fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.drawing .accent { stroke: var(--accent); }
.drawings figcaption { display: flex; justify-content: center; white-space: nowrap; margin-top: var(--fib-13); }   /* a label never breaks inside the word */

.proof-figure { font-size: var(--type-44); line-height: 1; color: var(--accent); }
@media (min-width: 880px) { .proof-figure { font-size: var(--type-72); } }
.proof-bars { display: flex; justify-content: center; align-items: flex-end; gap: var(--fib-55); height: 233px; }
.proof-bars figure { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; margin: 0; }
.proof-bars .bar { width: 89px; border-radius: var(--radius-inner) var(--radius-inner) var(--radius-bar) var(--radius-bar); }
.proof-bars .bar--start { height: 150px; background: var(--text-secondary); }
.proof-bars .bar--after { height: 177px; background: var(--accent); }   /* 18% taller */
.proof-bars figcaption { margin-top: var(--fib-8); color: var(--text-secondary); max-width: 8em; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fib-8); }
.chip { display: inline-flex; align-items: center; min-height: var(--size-touch); padding: 0 var(--fib-13); border: 1px solid var(--stroke); border-radius: var(--radius-pill); background: var(--raised); color: var(--text); font: inherit; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--accent); }
/* The live screens: four in a row (two by two on phones) without the script or with Reduce Motion; with the script,
   one phone that changes every 3.5 s. */
.live { list-style: none; padding: 0; display: grid; justify-content: center; gap: var(--fib-21) var(--fib-13); grid-template-columns: repeat(2, var(--phone-small)); }
@media (min-width: 640px) { .live { grid-template-columns: repeat(4, var(--phone-small)); } }
.live .frame-fig { --w: var(--phone-small); }
.is-carousel .live { grid-template-columns: var(--phone-single); }
.is-carousel .live .frame-fig { --w: var(--phone-single); }
.is-carousel .live li { grid-area: 1 / 1; opacity: 0; transition: opacity 0.9s ease; }
.is-carousel .live li.is-shown { opacity: 1; }
.is-carousel .live figcaption { display: none; }

.row4 { display: grid; justify-content: center; gap: var(--fib-13); grid-template-columns: repeat(2, var(--phone-small)); }
@media (min-width: 640px) { .row4 { grid-template-columns: repeat(4, var(--phone-small)); } }
.row4 .frame-fig { --w: var(--phone-small); }
/* Seven in one row when they fit; otherwise four and three, centred. */
.badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fib-13) 4px; --bw: 70px; max-width: calc(4 * var(--bw) + 3 * 4px); }
.badges li { min-width: var(--bw); }   /* wider only when the name needs it (very large text) */
@media (min-width: 640px) { .badges { --bw: 100px; } }
@media (min-width: 880px) { .badges { max-width: calc(7 * var(--bw) + 6 * 4px); } }
.badges svg { display: block; width: 48px; height: 48px; margin: 0 auto var(--fib-8); }
.badges path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.badges .caption { color: var(--text); }

/* Everything in Uphill: one large tile and five small ones. */
.bento { list-style: none; padding: 0; display: grid; gap: var(--fib-13); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento .tile--large { grid-column: 1 / span 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; }
  .bento .tile { display: flex; flex-direction: column; justify-content: center; }
}
.bento .tile--large { padding: var(--fib-34) var(--fib-21); }

/* No ads, ever: one big statement on the night ground. */
.icon--statement { width: 55px; height: 55px; margin-bottom: var(--gap-head); }

/* Free and Pro: two cards with ticks, of equal height, side by side on wide screens and stacked on phones. */
.plans { display: grid; gap: var(--fib-13); grid-template-columns: minmax(0, 1fr); max-width: var(--col-visual); }
@media (min-width: 640px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-note { grid-column: 2; }
}
.plan { background: var(--raised); border-radius: var(--radius-card); padding: var(--fib-34) var(--fib-21); }
.plan-line { margin-top: 4px; }
.plans .ticks { text-align: left; }   /* the ticks are sentences now (SITE_07): read from the left */
.plans .ticks li { justify-content: flex-start; text-wrap: wrap; }
.plans .ticks span { text-wrap: wrap; }
.ticks { list-style: none; padding: 0; margin-top: var(--fib-13); }
.ticks li { display: flex; justify-content: center; align-items: flex-start; gap: var(--fib-8); }
.ticks li + li { margin-top: var(--fib-13); }
.tick { flex: none; width: 21px; height: 21px; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-note { margin-top: 0; }

/* Why I built Uphill: the note is a left-aligned block, centred in the column. */
.weather { display: flex; justify-content: center; gap: var(--fib-13); }
.weather .icon { width: 34px; height: 34px; margin: 0; }
.note { text-align: center; max-width: var(--col-read); }
.note .signature { margin-top: var(--fib-13); }

/* ------------------------------------------------------------------ the ending (SITE_07)
   The closing words and the App Store button sit directly on the plain night ground, centred, with the footer below
   on the same ground. They do not fade up (SITE_06 found their fade-up could move against an upward flick). */
.closing { position: relative; z-index: 1; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  text-align: center; color: var(--text); background: var(--ridge-2); padding: var(--gap-section) var(--gutter-right) var(--gap-section) var(--gutter-left); }
.closing-words { position: relative; width: 100%; max-width: var(--col-visual); container-type: inline-size; }
.closing-words .web-lead { margin-top: var(--gap-head); }
.closing .store { justify-content: center; margin-top: var(--fib-21); }

/* Footer: on its own ground, compact on wide screens so it fits on the last screen under the hills. */
@media (min-width: 880px) {
  .home .site-footer { padding-top: var(--fib-21); padding-bottom: max(var(--fib-21), env(safe-area-inset-bottom)); }
  .home .site-footer .small-print { max-width: var(--col-visual); }
}

/* Each section fades up gently the first time it comes into view (js/home.js; never with
   Reduce Motion). Opacity and transform only, so nothing on the page moves. */
.will-rise { opacity: 0; transform: translateY(16px); }
.rise { transition: opacity 0.6s ease-out, transform 0.6s ease-out; }

/* Reduce Motion: the band sits at the top of the screen from the start and the hills never move; the sky still
   changes colour with the scroll. The first screen's words sit on the ground below it. */
@media (prefers-reduced-motion: reduce) {
  .js .scene-track { position: fixed; height: var(--band-h); }
  .js .scene--a { position: relative; top: 0; height: var(--band-h); }
  .js .hero { z-index: 1; min-height: 0; padding-top: calc(var(--band-h) + var(--fib-34)); padding-bottom: var(--fib-55); background: var(--ridge-2); }
  .js .flow { margin-top: 0; padding-top: var(--fib-34); padding-bottom: var(--gap-section); }
}

/* The still band (SITE_06 Step 4.8, STILL_BAND in tools/build_pages.py): fixed at the top of the screen from the
   first screen to the last, so nothing about it can move, not even with Safari's rubber band at either end of the
   page. One evening sky, the evening land and mountain, a still evening sun, no moon; the first screen's words sit
   on the ground below it, as with Reduce Motion. */
[data-band="still"] .scene-track { position: fixed; top: 0; bottom: auto; height: var(--band-h); }
[data-band="still"] .scene--a { position: relative; top: 0; height: var(--band-h); will-change: auto; }
[data-band="still"] .scene--a .sky[data-time="evening"], [data-band="still"] .scene--a .land [data-time="evening"],
[data-band="still"] .scene--a .mtn-evening, [data-band="still"] .scene--a .sun-evening { opacity: 1 !important; }
[data-band="still"] .scene--a .sun-morning, [data-band="still"] .scene--a .sun-day, [data-band="still"] .scene--a .moon,
[data-band="still"] .scene--a .stars-layer { display: none; }
[data-band="still"] .scene--a .sun { left: calc(78% - var(--sun-size) / 2); top: calc(var(--band-h) - var(--land-h) - var(--sun-size) * 0.9); transform: none; }
[data-band="still"] .hero { z-index: 1; min-height: 0; padding-top: calc(var(--band-h) + var(--fib-34)); padding-bottom: var(--fib-55); background: var(--ridge-2); }
[data-band="still"] .flow { margin-top: 0; padding-top: var(--fib-34); }

/* Increase Contrast: no scenery. Plain bg, each section in its own theme. */
@media (prefers-contrast: more) {
  .scene-track, .ground { display: none !important; }
  .hero { min-height: 0; padding-bottom: var(--fib-55); background: none !important; }
  .flow { margin-top: 0; padding-top: var(--fib-13); padding-bottom: var(--gap-section) !important; }
  .statement { padding: var(--card-pad-y) var(--card-pad-x); background: var(--bg); border-radius: var(--radius-card); }
  .closing { background: var(--bg); }
  .frame, .report img { box-shadow: none; }
}