/* Sales site. World: a candle-lit bistro after dark. Espresso is the room, cream is the printed menu,
   saffron is candlelight and prices, tomato is the one action. Dish names set like a printed menu
   with dot leaders to the price. The hero phone actually plays the menu: that is the memorable thing. */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
main { display: block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; margin: 0; font-optical-sizing: auto; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.1rem); line-height: 1.02; font-variation-settings: 'opsz' 144, 'SOFT' 50; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1; font-variation-settings: 'opsz' 100; }
h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 600; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 62ch; }
.fine { font-size: .9rem; color: var(--text-2); }
.dated { font-size: .92rem; color: var(--text-inv-2); margin-top: 1rem; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .8rem 1.4rem; border-radius: var(--r-pill); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--cta { background: var(--tomato); color: #fff; }
.btn--cta:hover { background: var(--tomato-2); }
.btn--light { background: transparent; color: var(--text-inv); border-color: rgba(251,246,238,.38); }
.btn--light:hover { border-color: var(--saffron); color: var(--saffron); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--paper-3); }
.btn--ghost:hover { border-color: var(--text); }
.btn--sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .95rem; }
.btn--block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 1rem; }

/* ---------- header ---------- */
.hdr { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--text-inv); }
.hdr-in { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.logo-mark svg { width: 30px; height: 30px; display: block; }
.logo-word { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
.nav { display: none; margin-left: auto; gap: 1.6rem; }
.nav a { text-decoration: none; font-size: .98rem; color: var(--text-inv-2); }
.nav a:hover { color: var(--text-inv); }
.hdr-cta { margin-left: auto; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border-radius: 10px; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-sheet { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r); padding: .6rem; display: grid; gap: .1rem; box-shadow: var(--shadow-lg); }
.nav-sheet a:not(.btn) { padding: .75rem .8rem; border-radius: 8px; text-decoration: none; color: var(--text-inv); }
.nav-sheet a:not(.btn):hover { background: var(--ink-3); }
.nav-sheet .btn { margin-top: .4rem; }
@media (max-width: 420px) { .hdr-cta { display: none; } .nav-more { margin-left: auto; } }
@media (min-width: 900px) { .nav { display: flex; } .hdr-cta { margin-left: .4rem; } .nav-more { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--text-inv); overflow: hidden; padding: 112px 0 72px; }
.hero-glow, .auth .hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 78% 42%, rgba(233,168,59,.20), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(212,72,43,.10), transparent 70%); }
.hero-in { position: relative; display: grid; gap: 3rem; align-items: center; }
.hero h1 { max-width: 12ch; }
.hero-sub { font-size: clamp(1.08rem, 1.7vw, 1.25rem); color: var(--text-inv-2); max-width: 46ch; margin-top: 1.4rem; }
.hero-fine { font-size: .92rem; color: var(--text-inv-2); }
.hero-qr { display: none; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem 1.2rem 1rem 1rem; background: rgba(251,246,238,.05); border: 1px solid var(--ink-3); border-radius: var(--r); max-width: 440px; }
.qr-box { flex: none; width: 92px; height: 92px; background: var(--paper); border-radius: 10px; padding: 9px; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.hero-qr p { margin: 0; font-size: .92rem; color: var(--text-inv-2); }
@media (min-width: 960px) {
  .hero { padding: 140px 0 96px; }
  .hero-in { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
  .hero-qr { display: flex; }
}

/* the phone that plays the menu */
.phone { justify-self: center; width: min(330px, 74vw); }
.phone-frame { position: relative; aspect-ratio: 9 / 19.2; border-radius: 46px; padding: 11px; background: linear-gradient(160deg, #3b3029, #120d0a 60%); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; transform: rotate(2deg); }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #0d0907 center / cover no-repeat; transition: background-image .5s var(--ease); }
.phone-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.phone-vid.is-on { opacity: 1; }
.phone-top { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 22px 18px 30px; background: linear-gradient(rgba(0,0,0,.55), transparent); font-size: .82rem; color: #fff; }
.phone-rest { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.phone-table { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); padding: .2rem .6rem; border-radius: 999px; }
.phone-card { position: absolute; inset: auto 0 0; padding: 60px 18px 30px; background: linear-gradient(transparent, rgba(10,7,5,.92) 48%); color: #fff; }
.phone-name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; line-height: 1.15; margin: 0 0 .3rem; }
.phone-desc { font-size: .8rem; color: rgba(255,255,255,.78); margin: 0 0 .8rem; line-height: 1.4; min-height: 2.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.phone-price { color: var(--saffron); font-weight: 700; font-size: 1.1rem; }
.phone-add { background: var(--tomato); color: #fff; border-radius: 999px; padding: .55rem 1rem; font-size: .85rem; font-weight: 600; }
.phone-dots { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.phone-dots i { width: 4px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.3); transition: background .3s, height .3s; }
.phone-dots i.on { background: #fff; height: 22px; }
.phone-name, .phone-desc, .phone-price { transition: opacity .35s var(--ease); }
.phone.is-swapping .phone-name, .phone.is-swapping .phone-desc, .phone.is-swapping .phone-price { opacity: 0; }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 9vw, 112px) 0; }
.sec--paper { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--ink { background: var(--ink); color: var(--text-inv); }
.sec--ink .lede { color: var(--text-inv-2); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head h2 { max-width: 20ch; }
.sec-head .lede { margin-top: 1rem; }
.mt { margin-top: 2.6rem; margin-bottom: .8rem; }
.more { margin-top: 1.6rem; }

/* steps: a real sequence, so numbers are earned */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; counter-reset: s; }
.step { position: relative; padding-top: 1.2rem; border-top: 2px solid var(--text); }
.step-n { display: block; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; font-weight: 400; color: var(--saffron); margin-bottom: .6rem; font-variation-settings: 'opsz' 144; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--text-2); margin: 0; max-width: 40ch; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* clips */
.clip { position: relative; overflow: hidden; background: var(--ink-2) center / cover no-repeat; border-radius: var(--r); aspect-ratio: 9 / 16; }
.clip video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.clip video.is-broken { visibility: hidden; }

/* before / after */
.ba { display: grid; gap: 2.4rem; }
.ba-pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
.ba-before { position: relative; transform: rotate(-2.5deg); background: #fff; padding: 8px 8px 30px; box-shadow: var(--shadow); border-radius: 4px; }
.ba-before img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper-3); }
.ba-after { position: relative; }
.ba-tag { position: absolute; left: 10px; bottom: 6px; font-size: .78rem; color: var(--text-2); }
.ba-tag--on { left: 10px; bottom: 10px; color: #fff; background: rgba(23,18,14,.7); padding: .2rem .6rem; border-radius: 999px; }
.ba-pair figcaption { grid-column: 1 / -1; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
@media (min-width: 900px) { .ba { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.promise { margin: 2.6rem 0 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--saffron); background: rgba(233,168,59,.10); font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.4; max-width: 60ch; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* dish wall: printed-menu typography */
.wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.dish .clip { border-radius: 12px; }
.dish-line { display: flex; align-items: baseline; gap: .4rem; margin-top: .8rem; }
.dish-name { font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.2; }
.dish-lead { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(200,186,168,.45); transform: translateY(-4px); }
.dish-price { color: var(--saffron); font-weight: 600; font-variant-numeric: tabular-nums; }
.dish-desc { font-size: .86rem; color: var(--text-inv-2); margin: .35rem 0 0; line-height: 1.45; }
.wall-cta { margin: 2.8rem 0 0; text-align: center; }
@media (min-width: 640px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem 1.4rem; } }
.sec-head--inv h2 { color: var(--text-inv); }

/* looks */
.looks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
.look h3 { font-size: 1.1rem; margin: .8rem 0 .25rem; }
.look p { font-size: .9rem; color: var(--text-2); margin: 0; }
@media (min-width: 760px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .looks { grid-template-columns: repeat(6, minmax(0, 1fr)); } .looks--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* kitchen ticket */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.split-copy .lede { margin: 1rem 0 1.4rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.7rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg); }
.ticks--plain li::before { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--text-2); transform: none; top: .6em; }
.ticket { justify-self: center; width: min(360px, 100%); background: #fffdf8; color: #1a1612; padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--shadow-lg); transform: rotate(-1.5deg); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .95rem;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 100% / 18px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 50% 100% / 18px 100% repeat-x; padding-bottom: 2.2rem; }
.ticket-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed #b8ab98; padding-bottom: .7rem; }
.ticket-head strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.ticket-new { display: inline-block; margin: .9rem 0 .4rem; background: var(--tomato); color: #fff; padding: .15rem .55rem; border-radius: 4px; font-family: var(--font-body); font-weight: 600; font-size: .82rem; }
.ticket-lines { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .5rem; }
.ticket-lines li { display: flex; gap: .8rem; }
.ticket-lines b { min-width: 1.4rem; }
.ticket-note { border-top: 2px dashed #b8ab98; padding-top: .7rem; margin: .8rem 0 1rem; font-style: italic; }
.ticket-btns { display: flex; gap: .6rem; font-family: var(--font-body); }
.tb { flex: 1; text-align: center; padding: .6rem; border-radius: 10px; border: 1.5px solid #cfc3b2; font-weight: 600; font-size: .9rem; }
.tb--go { background: var(--ink); color: var(--text-inv); border-color: var(--ink); }

/* evidence */
.evidence h2 { margin-bottom: 2rem; }
.ev-grid { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .ev-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.ev { margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--text); }
.ev p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.65rem); line-height: 1.3; margin-bottom: .8rem; }
.ev strong { font-weight: 700; color: var(--tomato-2); }
.ev cite { font-style: normal; font-size: .88rem; color: var(--text-2); }
.ev-note { margin-top: 2rem; color: var(--text-2); max-width: 62ch; }

/* pricing */
.plans { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { display: flex; flex-direction: column; background: #fffdf8; border: 1px solid var(--paper-3); border-radius: var(--r-lg); padding: 1.8rem 1.6rem; }
.plan--hot { background: var(--ink); color: var(--text-inv); border-color: var(--ink); box-shadow: var(--shadow-lg); }
.plan h3 { font-size: 1.6rem; font-weight: 500; }
.plan-blurb { color: var(--text-2); font-size: .95rem; margin: .4rem 0 1.2rem; min-height: 2.9em; }
.plan--hot .plan-blurb, .plan--hot .plan-setup, .plan--hot .plan-per { color: var(--text-inv-2); }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.plan-amt { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 500; font-variant-numeric: lining-nums; }
.plan--hot .plan-amt { color: var(--saffron); }
.plan-per { color: var(--text-2); }
.plan-setup { font-size: .92rem; color: var(--text-2); margin: .4rem 0 1.4rem; }
.plan-feats { list-style: none; padding: 1.2rem 0 0; margin: 0 0 1.6rem; border-top: 1px solid var(--paper-3); display: grid; gap: .6rem; flex: 1; font-size: .96rem; }
.plan--hot .plan-feats { border-color: var(--ink-3); }
.plan-feats li { padding-left: 1.5rem; position: relative; }
.plan-feats li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage); transform: rotate(-45deg); }
.plan--hot .plan-feats li::before { border-color: var(--saffron); }
.plans-note { margin-top: 1.4rem; color: var(--text-2); font-size: .95rem; }
.assure { margin-top: 2.4rem; display: grid; gap: .4rem; max-width: 70ch; }
.assure p { margin: 0 0 .5rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--paper-3); border-radius: var(--r); background: #fffdf8; }
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--paper-3); vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.cmp thead th:nth-child(2), .cmp td:nth-child(2) { background: rgba(233,168,59,.12); }
.cmp tbody th { font-weight: 600; color: var(--text-2); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* faq */
.faq { border-top: 1px solid var(--paper-3); margin-top: 1.6rem; }
.qa { border-bottom: 1px solid var(--paper-3); }
.qa summary { cursor: pointer; list-style: none; padding: 1.15rem 2.4rem 1.15rem 0; position: relative; font-weight: 600; font-size: 1.05rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa p { margin: 0 0 1.3rem; color: var(--text-2); max-width: 66ch; }

/* final cta */
.final { position: relative; overflow: hidden; text-align: left; }
.final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 85% 50%, rgba(233,168,59,.16), transparent 70%); pointer-events: none; }
.final-in { position: relative; }
.final h2 { max-width: 16ch; font-size: clamp(2rem, 4.6vw, 3.6rem); }
.final .lede { margin-top: 1rem; }

/* inner page heads */
.page-head { padding: 132px 0 64px; }
.page-head--ink { background: var(--ink); color: var(--text-inv); position: relative; overflow: hidden; }
.page-head--ink::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 70% at 90% 30%, rgba(233,168,59,.14), transparent 70%); pointer-events: none; }
.page-head > .wrap { position: relative; }
.page-head--ink .lede { color: var(--text-inv-2); margin-top: 1.2rem; }
.page-head h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-width: 18ch; }
.crumb { font-size: .9rem; color: var(--text-inv-2); margin-bottom: 1rem; }
.crumb a { color: inherit; }
.uc-head { display: grid; gap: 2.4rem; align-items: center; }
.uc-clips { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; max-width: 420px; }
.uc-clips .clip:nth-child(2) { transform: translateY(28px); }
@media (min-width: 960px) { .uc-head { grid-template-columns: 1.3fr .7fr; gap: 4rem; } }
.uc-body { display: grid; gap: 3rem; }
.uc-body h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 1.2rem; }
@media (min-width: 860px) { .uc-body { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tip { margin-top: 1.6rem; padding: 1rem 1.2rem; background: var(--paper-2); border-radius: var(--r-sm); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { text-decoration: none; padding: .45rem .9rem; border: 1px solid var(--paper-3); border-radius: 999px; font-size: .92rem; background: #fffdf8; }
.chips a:hover { border-color: var(--text); }

/* hub */
.hub { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
@media (min-width: 760px) { .hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub-card { display: grid; text-decoration: none; }
.hub-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--paper-3); transition: transform .35s var(--ease); }
.hub-card:hover img { transform: scale(1.02); }
.hub-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-top: .7rem; }
.hub-sub { font-size: .88rem; color: var(--text-2); }

/* compare */
.vs { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs-col { background: #fffdf8; border: 1px solid var(--paper-3); border-radius: var(--r-lg); padding: 1.8rem; }
.vs-col h2 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.vs-col--us { border-color: var(--saffron); box-shadow: inset 0 0 0 1px var(--saffron); }
.verdict { margin-top: 2.4rem; font-size: 1.08rem; }

/* timeline (how it works) */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.2rem; }
.timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; }
.tl-n { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--saffron); }
.timeline h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .4rem; }
.timeline p { color: var(--text-2); margin: 0; }

/* prose (legal) */
.prose h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; }
.prose p { color: var(--text-2); }

/* auth */
.auth { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 110px var(--gutter) 60px; background: var(--ink); color: var(--text-inv); overflow: hidden; }
.auth-card { position: relative; width: min(440px, 100%); background: var(--paper); color: var(--text); border-radius: var(--r-lg); padding: 2.2rem 1.8rem; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); margin-bottom: .8rem; }
.auth-card p { color: var(--text-2); }
.auth-form { display: grid; gap: .6rem; margin: 1.4rem 0 1rem; }
.auth-form label { font-weight: 600; font-size: .95rem; }
.auth-form input[type=email] { min-height: 50px; padding: .7rem 1rem; border: 1.5px solid var(--paper-3); border-radius: 12px; background: #fff; font-size: 1rem; }
.auth-form input[type=email]:focus { border-color: var(--saffron); outline: none; box-shadow: 0 0 0 3px rgba(233,168,59,.3); }
.auth-form .btn { margin-top: .6rem; }
.form-err { color: var(--danger) !important; background: rgba(179,38,30,.08); padding: .7rem .9rem; border-radius: 10px; }

/* footer */
.ftr { background: #100c09; color: var(--text-inv-2); padding: 64px 0 32px; font-size: .94rem; }
.ftr a { color: var(--text-inv-2); text-decoration: none; }
.ftr a:hover { color: var(--text-inv); text-decoration: underline; }
.ftr .logo-word { color: var(--text-inv); }
.ftr-top { display: grid; gap: 2.4rem; }
.ftr-brand p { margin: .8rem 0 0; max-width: 34ch; }
.ftr h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--text-inv); letter-spacing: 0; margin-bottom: .9rem; }
.ftr-col { display: grid; gap: .5rem; align-content: start; }
.ftr-links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.2rem; }
.ftr-base { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem; }
.ftr-base p { margin: 0; }
.ftr-base a { margin-right: 1.2rem; }
@media (min-width: 900px) { .ftr-top { grid-template-columns: 1.2fr .8fr 2fr .8fr; gap: 3rem; } }