/* thepillarapp.com — one stylesheet for every page. The palette is the app's
   own (Theme.swift): cream canvas, olive hero, gold verse numbers, clay tint. */
:root{
  color-scheme: light dark;
  --canvas:#E5E4D3; --surface:#F2F1E6; --ink:#23241F; --ink-2:#6F7263;
  --olive:#4B4F40; --hero:#3C4133; --hero-ink:#ECEAD9; --gold:#C4B434; --clay:#BE5E3C;
  --rule:rgba(75,79,64,.18);
  --serif: ui-serif, "New York", Iowan Old Style, Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --canvas:#14160F; --surface:#1E211A; --ink:#E8E6DA; --ink-2:#9EA08D;
         --olive:#6E7360; --gold:#D8CE55; --clay:#D07C57; --rule:rgba(232,230,218,.14); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:44rem;margin:0 auto}
a{color:var(--clay)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.15}
h1{font-size:clamp(2.1rem,5.5vw,3.4rem);margin:0 0 1rem}
h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 .75rem}
h3{font-size:1.15rem;margin:0 0 .4rem}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--ink-2);max-width:36rem}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 1.25rem}
.muted{color:var(--ink-2)}

/* ── site nav ─────────────────────────────────────────── */
nav.site{background:var(--hero);color:var(--hero-ink);border-bottom:1px solid rgba(236,234,217,.12)}
nav.site .wrap{display:flex;align-items:center;gap:1.5rem;min-height:3.6rem}
nav.site .brand{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--hero-ink);text-decoration:none;white-space:nowrap}
nav.site .brand span{color:var(--gold)}
/* Wraps, never scrolls. A horizontally scrolling nav hides its tail with no
   affordance; these links wrap onto another line instead. */
nav.site ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-wrap:wrap;gap:0 1.35rem}
nav.site li a{color:rgba(236,234,217,.78);text-decoration:none;font-size:.92rem;white-space:nowrap;padding:.5rem 0;display:block;
              border-bottom:2px solid transparent}
nav.site li a:hover{color:var(--hero-ink)}
nav.site li a[aria-current="page"]{color:var(--hero-ink);border-bottom-color:var(--gold)}
nav.site .btn{padding:.6rem 1.1rem;font-size:.9rem;margin-left:.5rem;white-space:nowrap}
/* Below ~800px the brand, seven links and the button stop fitting on one line,
   so the links take a full-width row of their own beneath them and wrap onto as
   many lines as they need.
   Measured at 402px before this existed: the row wanted 505px and had 354, so
   Updates, Principles and FAQ sat past the right edge of every phone with
   nothing on screen to say they were there. 800px, not 640: at 700px the single
   row overflowed too, it just took a tablet to notice. */
@media (max-width:800px){
  nav.site .wrap{flex-wrap:wrap;gap:.35rem 1rem;min-height:0;padding-top:.55rem;padding-bottom:.75rem}
  nav.site ul{order:3;width:100%;margin-left:0;gap:.1rem 1.15rem}
  nav.site li a{font-size:.9rem;padding:.4rem 0}
  nav.site .btn{margin-left:auto;padding:.55rem 1.05rem;font-size:.88rem}
}

/* ── hero ─────────────────────────────────────────────── */
header.hero{background:var(--hero);color:var(--hero-ink);padding:3.5rem 0 0;overflow:hidden}
header.hero.short{padding-bottom:3.5rem}
header.hero .eyebrow{color:var(--gold)}
header.hero .lede{color:rgba(236,234,217,.78)}
header.hero a:not(.btn){color:var(--gold)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:end}
.hero-shot{max-width:100%;display:block;margin-bottom:-2px;border-radius:2.25rem 2.25rem 0 0;
            box-shadow:0 0 0 .55rem #14160F, 0 0 0 .62rem rgba(236,234,217,.22), 0 28px 60px rgba(0,0,0,.45)}
@media (max-width:800px){ .hero-grid{grid-template-columns:1fr;gap:2rem} .hero-shot{max-width:20rem;margin:0 auto -2px} }

/* ── buttons ──────────────────────────────────────────── */
.cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.75rem 0 1rem}
.btn{display:inline-block;background:var(--gold);color:#23241F;font:600 1rem/1 var(--sans);
     padding:.95rem 1.6rem;border-radius:999px;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.stores{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.fineprint{font-size:.85rem;color:rgba(236,234,217,.6);margin:0 0 3rem}
header.hero.short .fineprint{margin-bottom:0}
section .fineprint{color:var(--ink-2)}

/* ── sections ─────────────────────────────────────────── */
section{padding:5rem 0}
section.tight{padding:3.5rem 0}
section.alt{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 3.5rem;margin-top:3rem}
@media (max-width:760px){ .steps{grid-template-columns:1fr;gap:3rem} }
.step img{width:100%;max-width:14rem;border-radius:1.6rem;display:block;margin-bottom:1.5rem;
          box-shadow:0 0 0 .45rem #14160F, 0 0 0 .5rem rgba(75,79,64,.25), 0 16px 36px rgba(0,0,0,.18)}
.step .num{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.5rem}
.step p{color:var(--ink-2);margin:0}

/* ── feature blocks ───────────────────────────────────── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-top:3rem}
.feature.flip .feature-shot{order:-1}
.feature h3{font-size:1.3rem;margin-top:1.75rem}
.feature h3:first-child{margin-top:0}
.feature p{color:var(--ink-2)}
.feature p:last-child{margin-bottom:0}
.page-shot{width:100%;display:block;border-radius:.9rem;
           box-shadow:0 0 0 1px var(--rule), 0 18px 44px rgba(0,0,0,.16)}
.phone-shot{width:100%;max-width:15rem;display:block;margin:0 auto;border-radius:1.6rem;
            box-shadow:0 0 0 .45rem #14160F, 0 0 0 .5rem rgba(75,79,64,.25), 0 16px 36px rgba(0,0,0,.18)}
@media (max-width:800px){ .feature{grid-template-columns:1fr;gap:2.25rem} .feature.flip .feature-shot{order:0} }

/* ── cards (the "explore" grid on the home page) ──────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
@media (max-width:700px){ .cards{grid-template-columns:1fr} }
.card{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:1.25rem;padding:1.75rem;
      color:inherit;text-decoration:none;transition:transform .15s ease}
.card:hover{transform:translateY(-2px)}
.card .eyebrow{margin-bottom:.6rem}
.card h3{font-size:1.3rem}
.card p{color:var(--ink-2);margin:0}
.card .more{display:inline-block;margin-top:1rem;color:var(--clay);font-weight:600}

/* ── privacy / closing band ───────────────────────────── */
.band{background:var(--hero);color:var(--hero-ink);text-align:center}
.band h2{margin-bottom:1rem}
.band p{color:rgba(236,234,217,.75);margin:0 auto;max-width:34rem}

/* ── pricing ──────────────────────────────────────────── */
.price{background:var(--surface);border:1px solid var(--rule);border-radius:1.5rem;
       padding:2.5rem;max-width:26rem;margin:2.5rem auto 0;text-align:center}
.price .amount{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:.5rem 0 .25rem}
.price ul{list-style:none;padding:0;margin:1.75rem 0;text-align:left}
.price li{padding:.45rem 0 .45rem 1.6rem;position:relative;color:var(--ink-2)}
.price li::before{content:"";position:absolute;left:0;top:1.05em;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold)}

/* ── faq ──────────────────────────────────────────────── */
details{border-bottom:1px solid var(--rule);padding:1.15rem 0}
summary{cursor:pointer;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--gold);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:.85rem 0 0;color:var(--ink-2)}
details p+p{margin-top:.6rem}
.faq-group{margin-top:2.5rem}
.faq-group h2{font-size:1.35rem;margin-bottom:.25rem}

/* ── long-form prose (about, principles) ──────────────── */
.prose p{color:var(--ink-2);max-width:40rem}
.prose p+p{margin-top:1.1rem}
.prose h2{margin-top:3rem}
.prose h3{margin-top:2rem;font-size:1.3rem}
.prose .close{font-family:var(--serif);font-size:1.25rem;color:var(--ink);margin-top:1.75rem}
.founder{border-left:3px solid var(--gold);padding-left:1.75rem;font-family:var(--serif);font-size:1.08rem;line-height:1.62}
.founder p{color:var(--ink)}
.founder p+p{margin-top:1.15rem}
.founder p:last-child{margin-bottom:0}
.principle{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;margin-top:2.5rem}
.principle .n{font-family:var(--serif);font-size:1.6rem;color:var(--gold);line-height:1}
.principle h3{margin-top:0}
.principle p{color:var(--ink-2);margin:0}
.principle p+p{margin-top:.6rem}

/* ── updates (release history) ────────────────────────── */
.release{border-top:1px solid var(--rule);padding:2.5rem 0}
.release:first-of-type{border-top:0;padding-top:0}
.release-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:1rem}
.release-head h2{margin:0;font-size:1.6rem}
.release-head .when{color:var(--ink-2);font-size:.95rem}
.tag{display:inline-block;font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
     color:#23241F;background:var(--gold);padding:.35rem .6rem;border-radius:999px}
.release h3{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--sans);color:var(--ink-2);margin:1.5rem 0 .5rem}
.release ul{padding-left:1.2rem;color:var(--ink-2);margin:0}
.release li{margin:.4rem 0}
.release li strong{color:var(--ink);font-weight:600}

/* ── contact ──────────────────────────────────────────── */
.form{display:grid;gap:1rem;max-width:34rem;margin-top:2rem}
.form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.form select,.form input,.form textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:.75rem;padding:.8rem .9rem}
.form textarea{min-height:9rem;resize:vertical}
.form .note{font-size:.85rem;color:var(--ink-2);margin:0}
address{font-style:normal;color:var(--ink-2)}

/* ── footer ───────────────────────────────────────────── */
footer{background:var(--hero);color:rgba(236,234,217,.65);padding:3.5rem 0;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media (max-width:640px){ footer .cols{grid-template-columns:1fr 1fr} }
footer h4{color:var(--hero-ink);font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.35rem 0}
footer a{color:var(--hero-ink);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .legal{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid rgba(236,234,217,.12)}
.verse{font-family:var(--serif);font-style:italic;color:var(--ink-2);text-align:center;margin-top:3rem}

/* Word pages (Scripts/build_word_pages.py). The tagged word in a quoted verse
   is marked in the reader's gold, not the browser's yellow. */
.prose mark { background: rgba(216, 206, 85, .45); color: inherit; padding: 0 .1em; border-radius: 2px; }
.verses { list-style: none; padding: 0; }
.verses li { margin: 0 0 1.1rem; }
.verses li p { margin: 0 0 .2rem; }
.verses cite, .verse cite { font-style: normal; font-size: .9rem; opacity: .7; }
.wordlist { columns: 2; column-gap: 2rem; list-style: none; padding: 0; }
.wordlist li { break-inside: avoid; margin: 0 0 .5rem; }
@media (max-width: 600px) { .wordlist { columns: 1; } }

/* ── /ironworks (QR-only offer page) ─────────────────────── */
/* Read on a phone held up to a slide, so it is packed tighter than the
   feature pages: the whole offer should sit within about a screen. */
header.hero.offer{padding:2rem 0 2.25rem}
header.hero.offer h1{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:.5rem}
header.hero.offer .cta{margin:1.25rem 0 0}
section.offer{padding:2rem 0 2.5rem}
.redeem{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:1.5rem}
.redeem p{color:var(--ink-2)}
.redeem ol{margin:0;padding-left:1.25rem;color:var(--ink-2)}
.redeem li{margin:.25rem 0}
.plain{font-size:.92rem;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:1.25rem}
.closing{font-family:var(--serif);font-size:1.15rem;margin:0}
@media (max-width:640px){ .redeem{grid-template-columns:1fr;gap:1.5rem} }