/* UNDERSTORYTREE.COM

   THE LAYOUT SYSTEM IS THE ONE FROM THE LAUNCH ASSETS PAGE (Nick 2026-08-30: "take the extracts of
   that and try to make it permanent"). What he was responding to is not a typeface, it is the
   rhythm: everything readable sits in a bordered panel on a calm ground, sections are separated by
   a hairline rule rather than by guesswork, pictures live inside cards with their caption attached,
   and nothing floats loose. That system is here.

   THE TYPE IS THE ORIGINAL BRIEF. KisMiklos for headings, Open Sans for anything read at length,
   which is exactly what Nick asked for before the app dropped Open Sans (its file was never
   bundled). A website can load it from a CDN; the app, being local first with no server, could not.

   THE GROUND IS THE APP'S. Watercolour canopies, alternating, never a flat wash. */

@font-face{
  font-family:"KisMiklos";
  src:url("assets/fonts/kismiklos.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#1E1D16; --ink2:#4A4E3E; --hush:#82866E; --edge:#C7CDB4;
  --base:#EFF2E6; --panel:rgba(253,252,246,.90); --moss:#487830; --deep:#2F4A24;
  --shadow:rgba(34,48,26,.13);
  --wrap:1140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F1EFE3; --ink2:#BFC3AC; --hush:#8B8F76; --edge:#38402C;
    --base:#12150E; --panel:rgba(28,33,21,.86); --moss:#9DBB78; --deep:#B7D191;
    --shadow:rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"]{
  --ink:#F1EFE3; --ink2:#BFC3AC; --hush:#8B8F76; --edge:#38402C;
  --base:#12150E; --panel:rgba(28,33,21,.86); --moss:#9DBB78; --deep:#B7D191;
  --shadow:rgba(0,0,0,.34);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;color:var(--ink);background:var(--base);
  font:400 16.5px/1.62 "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--moss);text-underline-offset:3px;}
h1,h2,h3,.serif{font-family:"KisMiklos",Georgia,"Times New Roman",serif;font-weight:400;}

/* ONE GROUND, THE WHOLE PAGE. It used to be per-section bands, which is what made the page look
   like several pages stacked: each band painted its own canopy, faded to the base colour at both
   ends, and the seams between them read as blank strips. The painting is fixed behind everything
   now and the page scrolls over it. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url(assets/canopy2.webp) center/cover no-repeat;opacity:.42;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 62% at 50% 0%,rgba(255,255,255,.72),rgba(255,255,255,0) 62%),
             linear-gradient(to bottom,rgba(239,242,230,.34),rgba(239,242,230,.58));
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{opacity:.13;}
  :root:not([data-theme="light"]) body::after{
    background:radial-gradient(130% 62% at 50% 0%,rgba(157,187,120,.13),rgba(0,0,0,0) 62%),
               linear-gradient(to bottom,rgba(18,21,14,.42),rgba(18,21,14,.66));}
}
:root[data-theme="dark"] body::before{opacity:.13;}
:root[data-theme="dark"] body::after{
  background:radial-gradient(130% 62% at 50% 0%,rgba(157,187,120,.13),rgba(0,0,0,0) 62%),
             linear-gradient(to bottom,rgba(18,21,14,.42),rgba(18,21,14,.66));}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* ------------------------------------------------------------------- header */

.mark{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:26px 0 34px;}
.mark img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 4px 14px var(--shadow);}
.mark b{font-family:"KisMiklos",Georgia,serif;font-weight:400;font-size:25px;letter-spacing:-.2px;}
.mark nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}
@media (max-width:520px){ .mark nav{margin-left:0;width:100%;} }
.mark nav a{font-size:14px;letter-spacing:.02em;color:var(--ink2);text-decoration:none;
  border:1px solid var(--edge);border-radius:999px;padding:8px 17px;background:var(--panel);}
.mark nav a:hover{color:var(--moss);border-color:var(--moss);}

.soon{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep);background:var(--panel);
  border:1px solid var(--edge);border-radius:999px;padding:9px 18px;margin-bottom:20px;}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--moss);font-style:normal;}

h1{font-size:clamp(38px,5.6vw,66px);line-height:1.05;letter-spacing:-1.3px;margin:0 0 18px;
  max-width:20ch;text-wrap:balance;}
h1 em{font-style:normal;color:var(--moss);}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--ink2);max-width:52ch;margin:0;}

/* -------------------------------------------------------------- the sections */

section{padding:34px 0 0;}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.14;letter-spacing:-.7px;margin:56px 0 8px;
  padding-top:30px;border-top:1px solid var(--edge);text-wrap:balance;}
h2 em{font-style:normal;color:var(--moss);}
.note{font-size:16.5px;color:var(--ink2);max-width:64ch;margin:0 0 26px;}

/* THE PANEL. Every readable thing on the page sits in one of these. */
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:18px;
  box-shadow:0 10px 30px -18px var(--shadow);}

/* two columns that collapse in one place, so the page has one breakpoint and not five */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:start;}
.two.lean{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);}
.two.mid{align-items:center;}
@media (max-width:880px){ .two,.two.lean{grid-template-columns:1fr;} }

/* the device, and the film, in the same frame so the page has one idea of a screen */
.screen{overflow:hidden;border-radius:26px;border:1px solid var(--edge);background:#0C0F08;
  box-shadow:0 26px 60px -28px var(--shadow);}
.screen img,.screen video{width:100%;height:auto;display:block;}
.screen video{aspect-ratio:886/1920;object-fit:cover;}
.filmcol{max-width:340px;}

/* the thirty second breakdown, beside the film */
.beats{list-style:none;padding:22px 24px;margin:0;}
.beats li{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:11px 0;
  border-top:1px solid var(--edge);font-size:15px;color:var(--ink2);}
.beats li:first-child{border-top:none;padding-top:0;}
.beats b{font-family:"KisMiklos",Georgia,serif;font-size:14px;color:var(--hush);
  font-variant-numeric:tabular-nums;padding-top:2px;}
.beats span{color:var(--ink);}

/* cards: a picture with its caption attached, which is the whole system */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.card{overflow:hidden;display:flex;flex-direction:column;}
.card > img{width:100%;border-bottom:1px solid var(--edge);}
.card .body{padding:16px 18px 19px;}
.card h3{font-size:19px;margin:0 0 6px;color:var(--moss);}
.card p{margin:0;font-size:14.5px;color:var(--ink2);line-height:1.55;}

/* the growth row: six paintings, one line, same box each */
.growth{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:stretch;}
@media (max-width:880px){ .growth{grid-template-columns:repeat(3,1fr);} }
@media (max-width:460px){ .growth{grid-template-columns:repeat(2,1fr);} }
.gstep{overflow:hidden;display:flex;flex-direction:column;}
.gstep .pic{aspect-ratio:4/5;display:grid;place-items:stretch;padding:10px;
  background:rgba(255,255,255,.26);border-bottom:1px solid var(--edge);overflow:hidden;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .gstep .pic{background:rgba(255,255,255,.05);} }
:root[data-theme="dark"] .gstep .pic{background:rgba(255,255,255,.05);}
.gstep .pic img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;}
.gstep b{font-family:"KisMiklos",Georgia,serif;font-weight:400;font-size:14px;text-align:center;
  padding:11px 6px 13px;line-height:1.25;color:var(--ink);}

/* the emphasised block: privacy gets one, and only privacy */
.emph{padding:30px 32px;border-left:5px solid var(--moss);}
.emph h2{margin:0 0 10px;padding:0;border-top:none;}
.emph p{font-size:17px;color:var(--ink2);max-width:62ch;margin:0 0 12px;}
.emph p:last-child{margin:0;}
.emph strong{color:var(--ink);}
.facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:22px;}
.fact{border:1px solid var(--edge);border-radius:13px;padding:15px 16px;}
.fact b{display:block;font-family:"KisMiklos",Georgia,serif;font-weight:400;font-size:17px;
  margin-bottom:4px;}
.fact span{font-size:14px;color:var(--ink2);line-height:1.5;}

/* the foundations painting, as a card that crops rather than a page of bare earth */
.soilcard{overflow:hidden;}
.soilcard img{width:100%;height:clamp(260px,30vw,380px);object-fit:cover;object-position:center 26%;
  border-bottom:1px solid var(--edge);}
.soilcard .body{padding:22px 26px 26px;}

/* price */
.price{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:640px){ .price{grid-template-columns:1fr;} }
.price div{padding:26px 28px;}
.price b{display:block;font-family:"KisMiklos",Georgia,serif;font-weight:400;font-size:32px;
  margin-bottom:6px;}
.price span{font-size:15.5px;color:var(--ink2);line-height:1.6;}
.money{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.01em;font-size:1.1em;}

/* the bubbles that replace "anything you need" */
.bubbles{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.bub{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--edge);border-radius:999px;padding:14px 24px;
  font-size:16px;box-shadow:0 8px 22px -16px var(--shadow);}
.bub:hover{border-color:var(--moss);color:var(--moss);}
.bub i{font-style:normal;color:var(--moss);}

footer{margin-top:64px;padding:34px 0 70px;border-top:1px solid var(--edge);}
footer p{font-size:14.5px;color:var(--ink2);margin:0 0 7px;}
footer a{color:var(--ink2);}

/* ------------------------------------------------------- privacy & support

   These two use `.card` WITHOUT `.panel`, which on the front page is deliberate: there the panel
   supplies the background and the card supplies the picture-and-caption shape. On these pages there
   is no panel beside it, so every question was sitting straight on the watercolour with no card at
   all. Scoped under `.plain`, which only the inner pages carry, so the front page cannot be touched
   by anything here. They are the pages App Review opens; they get the same panels as everything else. */
.plain{max-width:880px;}
.plain .updated{font-size:13.5px;color:var(--hush);letter-spacing:.02em;margin:0 0 26px;}
.plain .card{display:block;background:var(--card);border:1px solid var(--edge);border-radius:14px;
  padding:18px 20px 20px;margin:0 0 14px;box-shadow:0 10px 30px -20px var(--shadow);}
.plain .card .q{font-family:"KisMiklos",Georgia,serif;font-size:19px;color:var(--ink);
  margin-bottom:7px;line-height:1.25;}
.plain .card p{margin:0 0 11px;font-size:15.5px;color:var(--ink2);line-height:1.6;}
.plain .card p:last-child{margin:0;}
.plain .card ul{margin:0;padding-left:20px;font-size:15.5px;color:var(--ink2);}
.plain .card li{margin-bottom:7px;}
.plain h2{margin-top:48px;}
.plain > p{font-size:16.5px;color:var(--ink2);max-width:74ch;}
.plain strong{color:var(--ink);}


/* THE FILM, CENTRED AND ALONE (Nick 2026-08-31). No heading and no beat list: a table of contents
   for a thirty second film is a longer read than the film. One line underneath, and that is all. */
.filmonly{padding-top:12px;}
.filmcentre{max-width:360px;margin:0 auto;}
.filmcap{text-align:center;font-size:16px;color:var(--ink2);margin:18px auto 0;max-width:44ch;}

/* Four journey cards read better as a four-up than as an auto-fit three. */
.cards.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){ .cards.four{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cards.four{grid-template-columns:1fr;} }


/* THE TRUNK, CENTRED AND FIRST. The two ways to read it are below the thing itself, not instead
   of it: the rings ARE the idea, and the reading comes after. */
.trunkhero{margin:22px auto 4px;}
.trunkhero .screen{max-width:clamp(260px,82vw,352px);margin:0 auto;}
/* THE ORDER OF SIZES IN THIS SECTION IS THE ARGUMENT (Nick 2026-08-31). The trunk is what the
   section is about, so it is the biggest device here; the two ways of reading it are supporting
   detail, so they sit at the same scale as every other screenshot on the page. They were running at
   529px against the journey cards' 255px - double everything else, and larger than the thing they
   are ways of reading. Scoped to .trunkways so the other .two layouts are untouched. */
.two.trunkways{max-width:640px;margin-inline:auto;}
@media (max-width:880px){ .two.trunkways .card{max-width:264px;margin-inline:auto;} }
.trunkhero .filmcap{font-size:15px;max-width:50ch;}
h3.ways{font-family:"KisMiklos",Georgia,serif;font-weight:400;font-size:22px;text-align:center;
  color:var(--ink2);margin:34px 0 18px;letter-spacing:.01em;}