/* Same Bone & Ink system as the app, light ground for a marketing page that
   gets read in daylight and linked from App Store Connect. */
:root{
  --paper:#FAF7F2; --ink:#1A1815; --ink2:#5C554B; --ink3:#948B7E;
  --rule:#DED5C8; --accent:#A9502F;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);overflow-x:hidden}
/* Nothing may ever be wider than the screen. Cheap insurance against a long
   word, a wide image or a grid that does not collapse. */
img,svg{max-width:100%;height:auto}
*{min-width:0}
body{font:17px/1.68 var(--serif);-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:56px 26px 90px}
a{color:var(--accent)}
.mast{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:16px;
  letter-spacing:.34em;text-transform:uppercase;margin-bottom:54px}
.mast .nm{margin-right:-.34em}
/* ⚠️ The masthead moon is the SAME crescent the app draws, not the Unicode ☾,
   which is hollow outline type and never matched. The path comes from the app's
   own crescentPath() at SINGLE_F = 0.86, so if that constant ever changes in
   www/index.html this mark has to be regenerated. It fills with currentColor,
   so this rule is what makes it accent rather than inheriting body ink. */
.mast .cm{width:10px;height:20px;flex:0 0 auto;color:var(--accent);display:block}
h1{font-size:46px;line-height:1.04;letter-spacing:-.025em;margin:0 0 18px;font-weight:500;text-wrap:balance}
h2{font-size:24px;font-weight:500;letter-spacing:-.01em;margin:44px 0 10px;text-wrap:balance}
.lede{font-size:21px;line-height:1.55;color:var(--ink);margin:0 0 34px}
p{margin:0 0 16px}
.lab{font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
ul{margin:0 0 16px;padding:0;list-style:none}
ul li{position:relative;padding:0 0 12px 22px}
ul li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--accent)}
.rule{height:1px;background:var(--rule);margin:44px 0}
.foot{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink3)}
.foot a{margin-right:18px;text-decoration:none}
.note{font-size:14px;font-style:italic;color:var(--ink3);line-height:1.7}

/* form */
.fl{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);margin:26px 0 8px}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:9px 0;font-family:var(--serif);font-size:18px;color:var(--ink);outline:none;-webkit-appearance:none}
.inp::placeholder{color:var(--ink3);font-style:italic}
.inp:focus{border-bottom-color:var(--accent)}
textarea.inp{min-height:120px;resize:vertical;line-height:1.65;font-size:17px}
.btn{display:block;width:100%;margin-top:30px;text-align:center;padding:17px;border:0;border-radius:2px;
  background:var(--accent);color:var(--paper);font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.btn:disabled{opacity:.55}
.msg{font-family:var(--sans);font-size:12px;letter-spacing:.04em;margin-top:14px;min-height:1em}
.msg.ok{color:var(--accent)}
.msg.bad{color:#B4443A}

/* App Store call to action.
   ⚠️ Deliberately NOT a lookalike of Apple's black badge. Apple's guidelines
   require their own supplied artwork for anything badge-shaped, so this stays
   a plain typographic button, which is permitted and matches the page. */
.get{display:inline-block;padding:16px 30px;border-radius:2px;background:var(--accent);
  color:var(--paper);text-decoration:none;font-family:var(--sans);font-size:11px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.get.soon{background:transparent;color:var(--ink2);border:1px solid var(--rule);cursor:default}
.cta{margin:34px 0 0}
.cta .fine{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink3);
  margin:12px 0 0}
@media (max-width:420px){ .get{display:block;text-align:center;padding:16px 12px} }

/* Screenshots carry the description, so the prose does not have to. */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:36px 0 8px}
.shots img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:6px}
@media (max-width:520px){ .shots{grid-template-columns:1fr 1fr;gap:10px} .shots img:last-child{display:none} }

/* ⚠️ Hero centring was TRIED and REVERTED. The off-centre look was never the
   page: it was the screenshots themselves, which had 80px of margin on the left
   and 12 on the right because of how they were captured. Fixing the images
   fixed it, and she prefers the headline left. Do not centre it again. */