/* The single stylesheet for upsticks.app. Every page is built from base.njk and
   links this file; no page carries its own CSS.

   The marketing and document page shapes share the container below; document
   pages cap running copy separately with --measure. */
:root{
  --bg:#FBF8F5; --surface:#fff; --surface-alt:#F7F2EE; --line:#E5DCD4;
  --text:#211B17; --text-2:#524A43; --text-3:#847A72;
  --accent:#CF5E3B; --accent-deep:#B14E30; --on-accent:#FFF7F3;
  --brand-50:#FBF1EB; --brand-100:#F4D9CB;
  /* Icon gradient from design/marketing (stops at 0 and .7), not the accent. */
  --mark:linear-gradient(180deg,#D96C47 0,#B14E30 70%);
  --shadow:0 1px 2px rgb(33 27 23/.05),0 8px 24px -12px rgb(33 27 23/.12);
  --phone-shadow:0 2px 4px rgb(33 27 23/.06),0 24px 48px -16px rgb(33 27 23/.25);
  --phone-line:#E5DCD4;
  --r:1.125rem; --pad:clamp(1.25rem,4vw,2.5rem); --maxw:64rem; --measure:44rem;
  --editorial-rail:minmax(9rem,12rem); --editorial-gap:clamp(2rem,5vw,3rem);
  --ease:.25s ease;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141210; --surface:#1E1B18; --surface-alt:#2A2521; --line:#3D362F;
  --text:#F2EDE9; --text-2:#BBB2AB; --text-3:#8D837B;
  --accent:#C2603C; --accent-deep:#ED9B78; --on-accent:#FFF1EA;
  --brand-50:#2A211C; --brand-100:#3A2A22;
  --mark:linear-gradient(180deg,#C2603C 0,#8A3A22 70%);
  --shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px -12px rgb(0 0 0/.5);
  --phone-shadow:0 0 0 1px rgb(255 255 255/.03),0 24px 48px -16px rgb(0 0 0/.6);
  --phone-line:#4A423A;
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#141210; --surface:#1E1B18; --surface-alt:#2A2521; --line:#3D362F;
  --text:#F2EDE9; --text-2:#BBB2AB; --text-3:#8D837B;
  --accent:#C2603C; --accent-deep:#ED9B78; --on-accent:#FFF1EA;
  --brand-50:#2A211C; --brand-100:#3A2A22;
  --mark:linear-gradient(180deg,#C2603C 0,#8A3A22 70%);
  --shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px -12px rgb(0 0 0/.5);
  --phone-shadow:0 0 0 1px rgb(255 255 255/.03),0 24px 48px -16px rgb(0 0 0/.6);
  --phone-line:#4A423A;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
body{font:1rem/1.65 var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent-deep)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(1.6rem,3.5vw,2.25rem);font-weight:780}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-bottom:clamp(2.75rem,7vw,4.75rem)}
.lede{color:var(--text-2);max-width:52ch;margin-top:.75rem}
.head{margin-bottom:clamp(1.75rem,4vw,2.75rem)}

/* ── Chrome ─────────────────────────────────────────────────────────────── */
header{padding-block:1.25rem}
header.wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:750;font-size:1.15rem;color:var(--text);text-decoration:none}
.mark{width:2.1rem;height:2.1rem;border-radius:.4725rem;background:var(--mark);display:grid;place-items:center;box-shadow:var(--shadow)}

/* Theme switch: System / Light / Dark */
.theme{display:flex;gap:.15rem;padding:.2rem;border:1px solid var(--line);background:var(--surface);border-radius:99px}
.theme button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  color:var(--text-3);padding:.4rem .65rem;border-radius:99px;display:grid;place-items:center;transition:color var(--ease),background var(--ease)}
.theme button:hover{color:var(--text)}
.theme button[aria-pressed=true]{background:var(--brand-50);color:var(--accent-deep)}
.theme button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.theme svg{display:block;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

footer{padding-block:2.5rem;color:var(--text-3);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:1.5rem}
footer a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--ease)}
footer a:hover{border-color:var(--accent)}
.doc footer{border-top:1px solid var(--line);margin-top:clamp(3rem,8vw,5rem)}

/* ── Home page ──────────────────────────────────────────────────────────── */
.hero{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;text-align:center;padding-block:clamp(2.5rem,7vw,4.5rem)}
.kicker{display:inline-block;font-size:.85rem;font-weight:600;color:var(--accent-deep);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:99px;padding:.35rem 1rem;margin-bottom:1.5rem}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;max-width:16ch;margin-inline:auto}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--text-2);font-size:clamp(1.05rem,2.5vw,1.3rem);max-width:44ch;margin:1.25rem auto 0}
@media(min-width:52rem){
  .hero{grid-template-columns:1.15fr .85fr;text-align:left}
  .hero h1,.hero p{margin-inline:0}
}

.phone{width:min(17rem,72vw);margin-inline:auto;border-radius:2.6rem;padding:.55rem;background:var(--surface);
  border:1px solid var(--phone-line);box-shadow:var(--phone-shadow);transition:transform var(--ease)}
.phone img{display:block;width:100%;height:auto;border-radius:2.1rem}
.phone:hover{transform:translateY(-4px)}
/* Screenshot swap must follow the manual override, so it can't use <picture>. */
.shot{display:block}
.shot.dark{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .shot.light{display:none}
  :root:not([data-theme=light]) .shot.dark{display:block}
}
:root[data-theme=dark] .shot.light{display:none}
:root[data-theme=dark] .shot.dark{display:block}
:root[data-theme=light] .shot.light{display:block}
:root[data-theme=light] .shot.dark{display:none}

.steps{display:grid;gap:clamp(1.5rem,4vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.steps .phone{width:min(14rem,64vw);margin-bottom:1.25rem}
.step{text-align:center}
.step .n{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:99px;background:var(--brand-50);border:1px solid var(--brand-100);
  color:var(--accent-deep);font-size:.85rem;font-weight:700;margin-bottom:.9rem}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{color:var(--text-2);font-size:.95rem;max-width:32ch;margin-inline:auto}

.features{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.75rem 1.5rem;box-shadow:var(--shadow);transition:transform var(--ease),border-color var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--brand-100)}
.card .glyph{width:2.75rem;height:2.75rem;border-radius:.8rem;background:var(--brand-50);display:grid;place-items:center;margin-bottom:1rem}
.card h3{font-size:1.1rem;margin-bottom:.4rem}
.card p{color:var(--text-2);font-size:.95rem}

.split{display:grid;gap:clamp(1.75rem,5vw,3.5rem);align-items:center}
@media(min-width:52rem){
  .split{grid-template-columns:1fr 1fr}
  .split.flip>*:first-child{order:2}
}
.split ul{list-style:none;padding:0;margin-top:1.5rem;display:grid;gap:.75rem}
.split li{display:flex;gap:.7rem;color:var(--text-2);font-size:.98rem}
.split li svg{flex:none;margin-top:.35rem;width:1.05rem;height:1.05rem;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:99px;background:var(--surface);
  border:1px solid var(--line);font-size:.9rem;color:var(--text-2);box-shadow:var(--shadow)}
.chip b{color:var(--text);font-weight:650}

.strip{background:var(--surface-alt);border-block:1px solid var(--line);padding-bottom:0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:center;padding-block:2rem;text-align:center}
.strip b{display:block;font-size:1.35rem;color:var(--accent-deep)}
.strip span{font-size:.85rem;color:var(--text-3)}

/* Apple badge: official artwork, unmodified. Height is well over the 40px
   minimum, with clear space of a quarter of the badge height on all sides,
   per Apple's identity guidelines. The top margin is reduced by that padding
   so the gap below the paragraph still reads as 2.25rem. */
.badge-appstore{display:inline-block;margin-top:1.45rem;padding:.8rem;border-radius:.6rem;transition:transform var(--ease)}
.badge-appstore img{display:block;width:auto;height:3.2rem}
.badge-appstore:hover{transform:translateY(-2px)}
.badge-appstore:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* ── Document pages (privacy, press, articles) ──────────────────────────── */
/* Every page on the site shares one container width, so the header, footer,
   rules and left edge line up wherever you are. Readable line length is a
   property of the text, not of the page: running copy is capped at --measure
   inside that container, while tables, figures and index rows use its full
   width. Nothing here is set per page. */
.doc{line-height:1.7}
.doc h1,.doc h2,.doc h3,.doc p,.doc ul,.doc ol,.doc blockquote,.prose figure{max-width:var(--measure)}
.prose figure.wide,.hero-shot,.doc .assets,.doc dl,.doc .posts,.doc .signoff{max-width:none}
.doc main{padding-block:1rem clamp(2rem,6vw,3rem)}
.doc h1{font-size:clamp(1.9rem,5vw,2.5rem)}
.doc h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:2.75rem 0 .75rem}
.doc h3{font-size:1rem;letter-spacing:-.01em;margin:1.5rem 0 .35rem}
.doc p+p{margin-top:.75rem}
.doc ul{margin:.5rem 0 0;padding-left:1.25rem}
.doc li+li{margin-top:.4rem}
.doc .lede{font-size:1.1rem}
.updated{color:var(--text-3);margin:.5rem 0 2rem}
.contact-top{margin:1.25rem 0 0;font-size:.95rem;color:var(--text-2)}
.note{color:var(--text-3);font-size:.9rem;margin-top:.75rem}

dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;margin:0;border:1px solid var(--line);border-radius:.75rem;padding:1.25rem;background:var(--surface)}
dt{font-weight:650;color:var(--text-3)}
dd{margin:0}
dd .note{margin-top:.25rem}
@media(max-width:32rem){dl{grid-template-columns:1fr;gap:.1rem}dt{margin-top:.6rem}}

.assets{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.btn{display:inline-block;text-decoration:none;font-weight:650;font-size:.95rem;padding:.6rem 1.1rem;border-radius:.6rem;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:border-color var(--ease)}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* Inside the fact sheet the badge is a table value, so it loses the hero's
   top margin but keeps Apple's clear space. */
dd .badge-appstore{margin-top:0;padding:.7rem}
dd .badge-appstore img{height:2.8rem}

/* Document sections use the shared container as an editorial grid: section
   labels occupy the left rail and measured content occupies the right. */
.document-sections{margin-top:clamp(2.5rem,6vw,4rem);border-bottom:1px solid var(--line)}
.document-band{display:grid;grid-template-columns:var(--editorial-rail) minmax(0,1fr);gap:var(--editorial-gap);
  padding-block:clamp(2rem,5vw,3rem);border-top:1px solid var(--line)}
.doc .document-band h2{margin:0;color:var(--accent-deep)}
.document-body>:first-child{margin-top:0}
@media(max-width:46rem){
  .document-band{grid-template-columns:1fr;gap:1rem}
}

/* ── Articles ───────────────────────────────────────────────────────────── */
/* The articles read in the same sans as the rest of the site, so the editorial
   voice has to come from scale, rules and labels instead of a second typeface. */
.eyebrow{color:var(--accent-deep);font-size:.75rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}

.page-head{padding-block:clamp(1rem,4vw,2rem)}
.article-head{padding-block:clamp(2rem,6vw,4rem) clamp(1.5rem,4vw,2.5rem)}
.article-head h1{font-size:clamp(2.3rem,6vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin-top:1.1rem;text-wrap:balance}
.deck{color:var(--text-2);font-size:clamp(1.1rem,2.3vw,1.28rem);line-height:1.5;margin-top:1.25rem;max-width:40rem}
.meta{color:var(--text-3);font-size:.85rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

.article-intro,.article-section{display:grid;grid-template-columns:var(--editorial-rail) minmax(0,var(--measure));gap:0 var(--editorial-gap)}
.article-intro>*{grid-column:2}
.article-intro>p:first-of-type{color:var(--text);font-size:clamp(1.18rem,2.4vw,1.38rem);font-weight:600;letter-spacing:-.012em;line-height:1.55}
.article-section{padding-block:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--line)}
.article-section-body{display:contents}
.article-section-body>*{grid-column:2}
.prose>*+*{margin-top:clamp(2.5rem,6vw,4rem)}
.article-intro>*+*,.article-section-body>*+*{margin-top:1.15rem}
.prose h2{grid-column:1;font-size:clamp(1.35rem,3vw,1.7rem);font-weight:760;margin:0;color:var(--accent-deep)}
.prose h3{font-size:1.15rem;font-weight:700;margin-top:1.75rem}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.5rem}
.prose figure{margin-top:2rem}
.prose blockquote:not(.pullquote){border-left:3px solid var(--brand-100);padding-left:1.1rem;color:var(--text-2);font-style:italic}
.prose code{font-size:.9em;background:var(--surface-alt);border-radius:.35rem;padding:.15em .4em}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.5rem}

.prose .pullquote{grid-column:1/-1;max-width:none;margin-block:clamp(2rem,5vw,3.5rem);padding-block:clamp(1.5rem,4vw,2.5rem);border-block:1px solid var(--line)}
.pullquote p{max-width:24ch;font-size:clamp(1.65rem,4vw,2.55rem);font-weight:780;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
.pullquote p::before{content:"“";color:var(--accent)}
.pullquote p::after{content:"”";color:var(--accent)}
.pullquote cite{display:block;color:var(--text-3);font-size:.8rem;font-style:normal;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:1rem}

.article-stat{grid-column:1/-1;display:grid;grid-template-columns:var(--editorial-rail) minmax(0,var(--measure));gap:var(--editorial-gap);align-items:baseline;
  max-width:none;margin-block:clamp(1.75rem,4vw,3rem);padding-block:1.25rem;border-block:1px solid var(--line)}
.article-stat strong{min-width:0;color:var(--accent-deep);font-size:clamp(2.2rem,4.5vw,3rem);font-weight:820;letter-spacing:-.05em;line-height:1.05;
  overflow-wrap:anywhere;text-wrap:balance}
.article-stat div{display:grid;gap:.25rem}
.article-stat b{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.3}
.article-stat span{color:var(--text-3);font-size:.88rem}

/* Photography has three deliberate widths: measured by default, container-wide,
   or viewport bleed. Captions always return to the shared container edges. */
figure{margin:0}
figure img{display:block;width:100%;height:auto;object-fit:cover;border-radius:.3rem;background:var(--surface-alt)}
figcaption{color:var(--text-3);font-size:.78rem;line-height:1.5;margin-top:.65rem;display:flex;justify-content:space-between;gap:.35rem 2rem}
figcaption a{color:var(--text-2)}
figcaption .credit{white-space:nowrap;text-align:right}
@media(max-width:38rem){
  figcaption{display:block}
  figcaption .credit{display:block;text-align:left;margin-top:.25rem;white-space:normal}
}

/* A wide figure fills the shared container rather than breaking out of it, so
   its edges land on the same lines as the header, footer and index rows. */
.article-intro>figure.wide,.article-intro>figure.bleed,.article-section-body>figure.wide,.article-section-body>figure.bleed{grid-column:1/-1;max-width:none}
.prose figure.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.prose figure.bleed figcaption{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hero-shot{margin-bottom:clamp(2rem,5vw,3rem)}
.hero-shot img{aspect-ratio:16/9}

@media(max-width:46rem){
  .article-intro,.article-section,.article-stat{grid-template-columns:1fr;gap:1rem}
  .article-intro>*,.article-section h2,.article-section-body>*,.article-stat>*{grid-column:1}
  .article-section{padding-block:2.25rem}
  .prose .pullquote,.article-stat{grid-column:1}
}

/* The index opens like a publication cover: masthead, image-led feature, then
   ruled archive rows. One article still forms a complete cover on its own. */
.articles-masthead,.featured-copy,.articles-archive{display:grid;grid-template-columns:var(--editorial-rail) minmax(0,var(--measure));gap:var(--editorial-gap)}
.articles-masthead{align-items:end;padding-block:clamp(2.5rem,7vw,4.5rem);border-block:1px solid var(--line)}
.articles-masthead h1{font-size:clamp(2.8rem,7vw,4.6rem);font-weight:820;letter-spacing:-.05em;line-height:.95}
.articles-masthead .lede{font-size:clamp(1.1rem,2.3vw,1.28rem);line-height:1.5;max-width:40rem;margin-top:1.25rem}
.featured-post{padding-block:clamp(2.5rem,6vw,4rem);border-bottom:1px solid var(--line)}
.featured-shot img{aspect-ratio:16/9}
.featured-shot>a,.post-figure>a{display:block;color:inherit}
.featured-shot>a:focus-visible,.post-figure>a:focus-visible{outline:3px solid var(--accent-deep);outline-offset:4px}
.featured-copy{align-items:start;margin-top:clamp(2rem,5vw,3rem)}
.featured-copy time{color:var(--accent-deep);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.featured-copy h2{font-size:clamp(2rem,5vw,3.25rem);font-weight:810;letter-spacing:-.045em;line-height:1.02;margin:.75rem 0 0;max-width:16ch;text-wrap:balance}
.featured-copy h2 a,.post-copy{color:inherit;text-decoration:none}
.featured-copy h2 a{transition:color var(--ease)}
.featured-copy div>p:not(.eyebrow){color:var(--text-2);font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.55;margin-top:1rem;max-width:38rem}
.featured-copy .more,.post .more{display:inline-block;margin-top:1.2rem;color:var(--accent-deep);font-size:.9rem;font-weight:700}
.featured-post:hover .featured-copy h2 a{color:var(--accent-deep)}

/* Archive entries remain ruled rows, not cards. */
.articles-archive{padding-top:clamp(3rem,7vw,5rem)}
.articles-archive>h2{grid-column:1;margin:0;color:var(--accent-deep);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.doc .posts{grid-column:1/-1;list-style:none;padding:0;margin-top:0}
.post{border-top:1px solid var(--line)}
.post:last-child{border-bottom:1px solid var(--line)}
.post{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(10rem,.75fr);gap:clamp(1.25rem,4vw,3rem);align-items:start;
  padding-block:clamp(1.75rem,4vw,2.75rem)}
.post-text-only{grid-template-columns:minmax(0,var(--measure))}
.post time{display:block;color:var(--accent-deep);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.post h3{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:780;letter-spacing:-.03em;line-height:1.08;margin-top:.7rem;
  transition:color var(--ease)}
.post p{color:var(--text-2);margin-top:.75rem}
.post-figure img{aspect-ratio:4/3}
.post-figure figcaption{display:block}
.post-figure figcaption .credit{display:block;text-align:left;margin-top:.25rem;white-space:normal}
.post-copy:hover h3{color:var(--accent-deep)}
@media(max-width:46rem){
  .articles-masthead,.featured-copy,.articles-archive{grid-template-columns:1fr;gap:1rem}
  .articles-masthead{align-items:start}
  .featured-copy{gap:1.25rem}
  .articles-archive>h2{grid-column:1}
  .post{grid-template-columns:1fr}
  .post-figure{grid-row:1}
  .post-figure img{aspect-ratio:16/9}
}
.empty{color:var(--text-2);margin-top:2rem}

/* The article's sign-off. A rule and an accent bar rather than a tinted panel,
   so it reads as the end of the piece and not as an ad slot dropped into it. */
.signoff{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:end;
  margin-top:clamp(3.5rem,8vw,6rem);padding:1.75rem 0 0 1.25rem;border-top:1px solid var(--line);border-left:3px solid var(--accent)}
.signoff h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:780;letter-spacing:-.025em;line-height:1.1;margin-top:.7rem;max-width:20ch}
.signoff p:not(.eyebrow){color:var(--text-2);margin-top:.6rem;max-width:43ch}
.signoff .badge-appstore{margin-top:0}
@media(max-width:38rem){.signoff{grid-template-columns:1fr;align-items:start}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}