/* ============================================================
   MARK · markjournal.app · 2.0 additions (2026-09-26)
   Mark: "our website should be this informative… keep it super
   premium and easy to understand and see the details."
   Same language as site.css: hairlines not boxes, the serif for
   headlines only, mono for facts, one accent.
   ============================================================ */

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── the door into the web journal ── */
.door{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; color:var(--ink); padding:9px 16px; border-radius:999px;
  border:1px solid var(--hairline); transition:border-color .2s, background .2s;
  white-space:nowrap;
}
.door:hover{ border-color:var(--ink-faint); background:rgba(255,255,255,.03); }
.door svg{ opacity:.8; }
.hero__sub{ max-width:30ch; }

/* ── at a glance ── */
.glance__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hairline); margin-top:clamp(36px,5vw,64px);
}
.glance__i{ padding:34px 34px 38px 0; border-bottom:1px solid var(--hairline); }
.glance__i:not(:nth-child(3n+1)){ padding-left:34px; border-left:1px solid var(--hairline-2); }
.glance__i h3{
  font-family:var(--sans); font-weight:650; letter-spacing:-.025em;
  font-size:clamp(22px,2vw,26px); margin:0 0 10px; line-height:1.1;
}
.glance__i p{ margin:0; color:var(--ink-dim); font-size:16.5px; line-height:1.6; max-width:34ch; }
.glance__i b{ color:var(--ink); font-weight:600; }
.feats{ padding-top:0; }
.feat__eg a{ color:var(--accent-lo); }
.feat__media--wide{ justify-content:center; }
.frame--wide{ width:min(100%,640px); border-radius:18px; }
/* The web journal is a desktop app: its picture gets the whole row, words under it. */
.feat--full{ grid-template-columns:1fr; gap:clamp(28px,4vw,48px); }
.feat--full .frame--wide{ width:100%; border-radius:14px; }
.feat--full .feat__copy{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,80px); align-items:start; }
.feat--full .feat__h{ margin-top:10px; }
@media (max-width:860px){ .feat--full .feat__copy{ grid-template-columns:1fr; } }

/* ── Day One ── */
.dayone .kinds{ margin-top:clamp(28px,4vw,48px); }
.dayone .how__head p, .plans .how__head p{ max-width:52ch; }

/* ── plans ── */
.tiers{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
  margin-top:clamp(36px,5vw,60px);
}
.tier{
  border:1px solid var(--hairline); border-radius:22px; padding:30px 30px 32px;
  display:flex; flex-direction:column; gap:10px; background:transparent;
}
.tier--premium{ border-color:rgba(197,98,72,.45); background:linear-gradient(180deg,rgba(197,98,72,.07),transparent 70%); }
.tier__name{ margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); }
.tier--premium .tier__name{ color:var(--accent-lo); }
.tier__price{ margin:6px 0 0; display:flex; align-items:baseline; gap:10px; }
.tier__num{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(46px,5vw,64px); line-height:1; }
.tier__per{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint); }
.tier__line{ margin:0 0 14px; color:var(--ink-dim); font-size:16px; line-height:1.55; }
.tier__line b{ color:var(--ink); font-weight:600; }
.tier__note{ display:block; margin-top:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--accent-lo); }
.tier .btn{ align-self:flex-start; margin-top:auto; }

/* No overflow wrapper: it would make the table its own scroll box and the
   sticky Free / Premium heads would stop following the page. */
.compare{ margin-top:clamp(40px,5vw,64px); }
.compare table{ width:100%; border-collapse:collapse; }
.compare thead th{
  position:sticky; top:74px; background:var(--bg); z-index:1;
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; text-align:center; padding:14px 10px;
  border-bottom:1px solid var(--hairline);
}
.compare thead th:last-child{ color:var(--accent-lo); }
.compare th[scope="row"]{
  text-align:left; font-weight:450; font-size:16px; color:var(--ink);
  padding:17px 18px 17px 0; line-height:1.4;
}
.compare .note{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint); margin-top:4px; font-weight:400; }
.compare td{
  text-align:center; font-size:15px; color:var(--ink-dim); padding:17px 10px; width:24%;
  font-variant-numeric:tabular-nums;
}
.compare tbody tr:not(.grp){ border-bottom:1px solid var(--hairline-2); }
.compare td.y{ color:var(--accent-lo); font-size:17px; }
.compare td.n{ color:var(--ink-ghost); }
.compare tr.grp th{
  text-align:left; padding:40px 0 12px; font-family:var(--mono); font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;
  border-bottom:1px solid var(--hairline);
}
.compare tbody tr.grp:first-child th{ padding-top:22px; }
.plans__fine{ margin:32px 0 0; max-width:70ch; font-size:14.5px; line-height:1.65; color:var(--ink-faint); }

/* ── get Mark ── */
.get__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  margin-top:clamp(36px,5vw,60px);
}
.get__i{
  display:flex; flex-direction:column; gap:6px; padding:28px; border-radius:22px;
  border:1px solid var(--hairline); color:var(--ink); transition:border-color .2s, transform .2s;
}
.get__i:hover{ border-color:var(--ink-faint); transform:translateY(-2px); }
.get__i svg{ color:var(--accent-lo); margin-bottom:12px; }
.get__k{ font-family:var(--sans); font-weight:650; letter-spacing:-.025em; font-size:26px; line-height:1.1; }
.get__v{ color:var(--ink-dim); font-size:15px; }
.get__go{ margin-top:18px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--accent-lo); }

/* ── FAQ ── */
.faq__list{ margin-top:clamp(32px,4vw,52px); border-top:1px solid var(--hairline); max-width:880px; }
.faq__list details{ border-bottom:1px solid var(--hairline); }
.faq__list summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0; font-size:clamp(18px,1.7vw,21px); font-weight:500; color:var(--ink);
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
  content:""; flex:none; width:11px; height:11px; margin-right:4px;
  border-right:1.6px solid var(--ink-faint); border-bottom:1.6px solid var(--ink-faint);
  transform:rotate(45deg) translateY(-3px); transition:transform .2s;
}
.faq__list details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.faq__list summary:hover{ color:var(--ink); }
.faq__list summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.faq__list details p{ margin:0 0 28px; max-width:66ch; color:var(--ink-dim); font-size:16.5px; line-height:1.68; }
.faq__list details a, .faq__more a{ color:var(--accent-lo); }
.faq__more{ margin:28px 0 0; color:var(--ink-faint); font-size:15px; }

.close .signup{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ── narrow ── */
@media (max-width:1000px){
  .glance__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .glance__i, .glance__i:not(:nth-child(3n+1)){ padding:28px 24px 30px 0; border-left:0; }
  .glance__i:nth-child(2n){ padding-left:24px; border-left:1px solid var(--hairline-2); }
  .get__grid{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
}
@media (max-width:720px){
  .glance__grid{ grid-template-columns:1fr; }
  .glance__i, .glance__i:nth-child(2n){ padding:24px 0; border-left:0; }
  .tiers{ grid-template-columns:1fr; }
  .compare th[scope="row"]{ font-size:15px; padding-right:10px; }
  .compare td{ font-size:13.5px; width:27%; padding-inline:4px; }
  .compare thead th{ top:64px; letter-spacing:.14em; }
  .door{ padding:8px 12px; font-size:13.5px; }
  .door svg{ display:none; }
  .nav__cta{ display:none; }
}
@media (max-width:420px){
  .lang-toggle{ display:none; }
}

/* ============================================================
   behind the scenes (2026-09-26, v2) · Mark: "I love every box that's
   there… use the same type of infographic art… a fire for rituals and a
   diary for moments… chapters should have at least 2." A dark band in
   either theme, two ember-outlined columns, three dark cards each, every
   picture drawn: glossy ember for moments, cream for rituals.
   ============================================================ */
.how2{
  --card:#16151b; --card-2:#1d1c22; --hairline:rgba(245,244,242,.10); --hairline-2:rgba(245,244,242,.06);
  --ink:#f6f4f1; --ink-dim:rgba(246,244,241,.66); --ink-faint:rgba(246,244,241,.44); --ink-ghost:rgba(246,244,241,.24);
  --indigo:#f06a45; --indigo-lo:#f58a63; --indigo-soft:rgba(240,106,69,.16); --cream:#f58a63;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(240,106,69,.10), transparent 70%),
    #0b0a0e;
  color:var(--ink);
}
.how2 .eyebrow{ color:var(--ink-faint); }
.how2 .how__head p{ color:var(--ink-dim); }
.how-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.how2__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; align-items:stretch; }
.how2__col{
  display:flex; flex-direction:column; gap:16px; padding:18px 16px 16px;
  border:1.5px solid rgba(240,106,69,.75); border-radius:30px;
  box-shadow:0 0 0 1px rgba(240,106,69,.08), 0 30px 80px -40px rgba(240,106,69,.35);
}
.how2__colh{
  text-align:center; padding:8px 0 4px; font-family:var(--sans); font-weight:750;
  font-size:clamp(20px,2vw,26px); letter-spacing:.02em; text-transform:uppercase; color:#f58a63;
}
.how-box{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  background:linear-gradient(180deg,#1b1a20,#141318); border:1px solid rgba(255,255,255,.07);
  border-radius:24px; padding:28px 26px 26px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 50px -30px rgba(0,0,0,.8);
}
.how-box__h{ margin:0; font-family:var(--sans); font-weight:750; font-size:clamp(17px,1.5vw,20px); letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.how-box__p{ margin:0; color:var(--ink-dim); font-size:15.5px; line-height:1.55; max-width:44ch; }
.how-box__p b{ color:var(--ink); font-weight:600; }
.how-box__v{ margin-top:14px; width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.how-art{ width:100%; height:auto; overflow:visible; }

.how-spark{ fill:#ffb08a; }
.how-artlab{ font-family:var(--sans); font-size:17px; font-weight:650; fill:rgba(246,244,241,.6); }
.how-flow{ fill:none; stroke:#f58a63; stroke-width:1.8; stroke-dasharray:5 6; stroke-linecap:round; }
.how-cap{ font-family:var(--sans); font-size:13px; font-weight:650; fill:var(--ink); }
.how-cap2{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; fill:var(--ink-faint); }
.how-gridbox{ fill:rgba(255,255,255,.015); stroke:rgba(255,255,255,.16); stroke-width:1.2; }
.how-gridln{ stroke:rgba(255,255,255,.09); stroke-width:1; }
.how-wd{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; fill:var(--ink-faint); text-transform:uppercase; }
.how-dn{ font-family:var(--mono); font-size:9.5px; fill:rgba(246,244,241,.42); }
.how-dn.is-future{ fill:rgba(246,244,241,.22); }
.how-today{ fill:none; stroke:#f06a45; stroke-width:1.6; }
.how-calnum{ font-family:var(--mono); font-size:11px; font-weight:600; fill:#f6f4f1; }
.how-axisln{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.4; }
.how-chlab{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; fill:#fff; }
.how-chlab--dark{ fill:#2b2218; }
.how-chip{ font-family:var(--sans); font-size:10.5px; font-weight:700; fill:#f58a63; }

.how-legend{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase; }
.how-legend .k{ display:inline-block; width:14px; height:10px; border-radius:3px; }
.how-legend .k + .k, .how-legend .k--r{ margin-left:10px; }
.how-legend .k--m{ background:linear-gradient(135deg,#ffab83,#d4482b); }
.how-legend .k--r{ background:linear-gradient(180deg,#fff,#d8d3cd); }
.how-legend .k--shared{ width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#f06a45 38%,transparent 42%); box-shadow:0 0 0 1.5px rgba(240,106,69,.6); }

.how-line{ fill:none; stroke-width:3; stroke-linecap:round; }
.how-dot{ stroke:#16151b; stroke-width:3; }
.how-lab{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; }
.how-line.t1{ stroke:#f06a45; }             .how-dot.t1, .how-lab.t1{ fill:#f58a63; }
.how-line.t2{ stroke:#ece7e1; }             .how-dot.t2, .how-lab.t2{ fill:#ece7e1; }
.how-line.t3{ stroke:#f06a45; opacity:.75; } .how-dot.t3, .how-lab.t3{ fill:#f58a63; }
.how-line.t4{ stroke:#ece7e1; opacity:.6; }  .how-dot.t4{ fill:#c9c3bc; } .how-lab.t4{ fill:rgba(236,231,225,.7); }
.how-shared-ring{ fill:none; stroke:#f06a45; stroke-width:1.4; opacity:.7; }
.how-axis{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; fill:var(--ink-faint); }

.how-rings{ width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; text-align:center; }
.how-ring svg{ width:96px; height:96px; display:block; margin:0 auto 12px; filter:drop-shadow(0 6px 14px rgba(240,106,69,.3)); }
.how-ring__bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:7; }
.how-ring__fg{ fill:none; stroke-width:7; stroke-linecap:round; transform:rotate(-90deg); transform-origin:36px 36px; }
.how-ring__num{ display:block; font-family:var(--sans); font-weight:750; font-size:44px; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.how-ring__lab{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

@media (max-width:900px){ .how2__cols{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .how2__col{ padding:14px 10px 10px; border-radius:26px; }
  .how-box{ padding:22px 16px 20px; }
  .how-ring svg{ width:74px; height:74px; }
  .how-ring__num{ font-size:34px; }
  .how-lab{ font-size:12.5px; } .how-axis{ font-size:12px; } .how-dn{ font-size:11px; }
}