/* =====================================================================
   Cardly — PAPER
   ---------------------------------------------------------------------
   The site's visual language: cream paper, black ink, one electric blue,
   one orange marker. Hard 2px rules, square corners, offset shadows,
   rubber stamps, ticker tape, and display type that switches between
   solid, outlined and blue in the same sentence.

   Everything here is hand-set: no gradients-as-decoration, no glass, no
   floating blurred blobs. Colour lives in tokens, so a page that uses
   the classes below inherits the whole look — and dark mode simply
   swaps paper for ink.
   ===================================================================== */

:root {
  --paper:      #f2eee2;
  --paper-hi:   #fbf8f0;
  --paper-lo:   #e6e1d1;
  --ink:        #15140f;
  --ink-2:      #403c31;
  --muted:      #6d6757;
  --blue:       #1633f0;
  --blue-ink:   #0b1ea8;
  --orange:     #ff7a18;
  --gold:       #8a6a0f;
  --field:      #fffdf7;

  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Archivo Black", "Inter", ui-sans-serif, system-ui, sans-serif;

  --shadow:    6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --rule:      2px solid var(--ink);
}

.dark {
  --paper:      #14130f;
  --paper-hi:   #1d1b15;
  --paper-lo:   #0d0c09;
  --ink:        #f2eee2;
  --ink-2:      #d7d1c1;
  --muted:      #a49d8b;
  --blue:       #5c78ff;
  --blue-ink:   #8fa2ff;
  --orange:     #ff8c38;
  --gold:       #d8b455;
  --field:      #1d1b15;
}

/* ---------------------------------------------------------------------
   Page ground
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* A whisper of grain so the cream reads as paper, not as a hex code. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.dark body::after { opacity: .5; }

::selection { background: var(--blue); color: #fff; }

h1, h2, h3, h4 { letter-spacing: -.02em; }
a { color: inherit; }
svg { flex: none; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */
.p-display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: none;
}
.p-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px black) {
  .p-outline { color: var(--ink); opacity: .22; }
}
.p-blue { color: var(--blue); }
.p-mono {
  font-family: var(--mono);
  letter-spacing: .04em;
}
.p-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
}
.p-eyebrow::before {
  content: ""; width: .5rem; height: .5rem; background: var(--orange);
  display: inline-block; flex: none;
}
.p-hl {
  background-image: linear-gradient(180deg, transparent 58%, rgba(255,122,24,.42) 58%, rgba(255,122,24,.42) 92%, transparent 92%);
  padding: 0 .1em;
}
.p-rule { border: 0; border-top: var(--rule); height: 0; margin: 0; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.p-btn,
.p-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .95rem 1.3rem;
  background: var(--blue); color: #fff; text-decoration: none;
  border: 2px solid var(--ink); border-radius: 0;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.p-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.p-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.p-btn--ink { background: var(--ink); color: var(--paper); }
.p-btn--ghost { background: transparent; color: var(--ink); }
.p-btn--ghost:hover { background: var(--paper-hi); }
.p-btn--sm { padding: .6rem .85rem; font-size: .68rem; }
.p-btn--full { width: 100%; }
.p-btn svg { width: 1rem; height: 1rem; }
.p-btn[disabled] { opacity: .5; pointer-events: none; }

/* The download block from the reference: dark slab, blue plate peeking out. */
.p-slab {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.4rem 1rem 1rem;
  background: #17160f; color: #f5f1e6;
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--blue);
  text-decoration: none;
}
.p-slab:hover { background: #211f16; }
.p-slab-icon {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: grid; place-items: center;
  background: var(--blue); color: #fff;
}
.p-slab-t { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.p-slab-s {
  display: block;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: #b9b3a2; margin-top: .3rem;
}

.p-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem;
  border: 1.5px solid var(--ink); background: transparent;
  font-family: var(--mono); font-size: .61rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.p-chip--orange { background: var(--orange); border-color: var(--orange); color: #201000; }

/* ---------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------- */
.p-panel {
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.p-panel--flat { box-shadow: none; }
.p-panel--ink { background: var(--ink); color: var(--paper); }
.p-frame {
  border: 2px solid var(--ink);
  background: var(--paper-hi);
}

/* Rubber stamp */
.p-stamp {
  display: inline-block;
  padding: .5rem 1rem;
  border: 2px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  background: transparent;
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  transform: rotate(-5deg);
}

/* Ticker tape */
.p-ticker {
  background: var(--blue); color: #fff;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  direction: ltr;
}
.p-ticker-track {
  display: flex; width: max-content;
  animation: pTick 42s linear infinite;
}
.p-ticker:hover .p-ticker-track { animation-play-state: paused; }
.p-ticker-set {
  display: flex; align-items: center; flex: none;
  padding: .5rem 0;
}
.p-ticker span {
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.p-ticker i {
  font-style: normal; color: var(--orange);
  padding: 0 .9rem; font-size: .7rem;
}
@keyframes pTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .p-ticker-track { animation: none; } }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.p-label {
  display: block;
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: .4rem;
}
.p-field {
  width: 100%;
  background: var(--field); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  padding: .8rem .9rem;
  font-size: .95rem;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.p-field::placeholder { color: #a39c89; }
.p-field:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 3px 3px 0 var(--blue);
}
.p-field[aria-invalid="true"] { border-color: #c0392b; }

.p-link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.p-link:hover { color: var(--blue); }

.p-note {
  border-left: 3px solid var(--orange);
  padding: .15rem 0 .15rem .8rem;
  font-size: .8rem;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------
   The top bar
   --------------------------------------------------------------------- */
.tnav {
  position: sticky; top: 0; z-index: 70;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tnav-inner {
  max-width: 78rem; margin: 0 auto; padding: 0 1.1rem;
  height: 3.9rem; display: flex; align-items: center; gap: .4rem;
}
@media (min-width: 1024px) { .tnav-inner { height: 4.35rem; } }

.tnav-brand { display: flex; align-items: center; gap: .55rem; flex: none; text-decoration: none; }
.tnav-logo { width: 2.15rem; height: 2.15rem; }
.tnav-wordmark {
  font-family: var(--display);
  font-size: 1.18rem; letter-spacing: -.04em;
  /* The Cardly colour is the gradient the logo has always worn — the flat
     paper blue made the brand read as a random link. */
  background: linear-gradient(90deg, #a78bfa, #7dd3fc);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@media (max-width: 379px) { .tnav-wordmark { display: none; } }

.tnav-tabs { display: none; }
@media (min-width: 1024px) {
  .tnav-tabs { display: flex; align-items: stretch; gap: 0; margin-left: 1.4rem; height: 100%; min-width: 0; }
}
.tnav-tab {
  display: flex; align-items: center;
  padding: .3rem .8rem;
  font-family: var(--mono); font-size: .63rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.tnav-tab:hover { color: var(--ink); border-bottom-color: var(--paper-lo); }
.tnav-tab.is-on {
  color: var(--ink); border-bottom-color: var(--blue);
  background: none; box-shadow: none;
}

.tnav-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
.tnav-desktop { display: none; }
@media (min-width: 640px) { .tnav-desktop { display: inline-flex; } }
.tnav-cta {
  align-items: center;
  padding: .55rem .85rem;
  background: var(--blue); color: #fff; text-decoration: none;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tnav-cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); filter: none; }

/* "Get the app" at the top of the landing page: the footer keeps its link,
   this one is for the visitor who never scrolls that far. Icon-only on a
   narrow phone so the bar still fits. */
.tnav-app {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .55rem;
  border: 2px solid var(--ink);
  color: var(--ink); text-decoration: none;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--paper-hi);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tnav-app svg { width: .95rem; height: .95rem; }
.tnav-app:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); filter: none; }
.tnav-app-label { display: none; }
@media (min-width: 420px) { .tnav-app-label { display: inline; } }

.tnav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  cursor: pointer;
}
.tnav-burger:hover { background: var(--paper-hi); }
@media (min-width: 1024px) { .tnav-burger { display: none; } }

/* Language switch: three boxed letters, like a printed form field. */
.lang-seg {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--ink);
  background: transparent;
  overflow: hidden;
}
.lang-seg .lang-seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.35rem; min-height: 2.2rem; padding: 0 .45rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-2); text-decoration: none;
  border: 0; background: transparent;
  transition: background .12s ease, color .12s ease;
}
.lang-seg .lang-seg-btn + .lang-seg-btn { border-left: 1.5px solid var(--ink); }
.lang-seg .lang-seg-btn:hover { background: var(--paper-lo); color: var(--ink); }
.lang-seg .lang-seg-btn.is-on { background: var(--ink); color: var(--paper); }

/* Icons in the bar are stroke glyphs on paper, centred in their box — the
   moon used to sit half outside the button because the two svgs laid out
   inline with no flex parent. */
.tnav .theme-toggle-btn,
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.2rem; border-radius: 0;
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
}
.theme-toggle-btn:hover { color: var(--blue); border-color: var(--blue); }
.tnav .theme-toggle-btn { background: transparent; border-color: var(--ink); color: var(--ink); }
.tnav .theme-toggle-btn:hover { border-color: var(--blue); color: var(--blue); }
.tnav .theme-toggle-btn .sun { color: var(--orange); }

/* WHICH glyph sits in the box is decided here, not by JS: the old markup
   rendered both svgs until DOMContentLoaded, so the button was twice its
   width (and the moon spilled out of the frame) on every page load. The
   toggle script still runs — its class toggles are simply overridden. */
.theme-toggle-btn .moon { display: none; }
.theme-toggle-btn .sun { display: block; }
.dark .theme-toggle-btn .sun { display: none; }
.dark .theme-toggle-btn .moon { display: block; }

/* ---------------------------------------------------------------------
   The phone menu: an ink page, not a glass sheet
   --------------------------------------------------------------------- */
.navovl {
  position: fixed; inset: 0; z-index: 95; overflow-y: auto;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 5.5rem),
    var(--ink);
  color: var(--paper);
}
.navovl[hidden] { display: none; }
.navovl-bar {
  width: 100%; max-width: 40rem; margin: 0 auto;
  min-height: 4.5rem; padding: .9rem 1.35rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(242,238,226,.25);
}
.navovl .tnav-logo { width: 2.25rem; height: 2.25rem; }
.navovl .tnav-wordmark {
  display: inline; font-size: 1.3rem;
  background: none; color: var(--paper);
  -webkit-text-fill-color: var(--paper);
}
.navovl-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1.5px solid rgba(242,238,226,.5); border-radius: 0;
  background: transparent; color: var(--paper); cursor: pointer;
  transition: background .15s ease, transform .2s ease;
}
.navovl-x:hover { background: rgba(242,238,226,.12); transform: rotate(90deg); }
.navovl-body {
  width: 100%; max-width: 40rem; margin: 0 auto;
  padding: 1.5rem 1.35rem 2.25rem;
  flex: 1; display: flex; flex-direction: column;
}
.navovl-eyebrow {
  font-family: var(--mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: var(--orange);
}
.navovl-links { margin-top: 1.1rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; }
.navovl-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--display);
  font-size: clamp(1.75rem, 8.5vw, 2.4rem);
  letter-spacing: -.035em; line-height: 1.06;
  padding: .7rem 0;
  color: var(--paper); text-decoration: none;
  border-bottom: 1.5px solid rgba(242,238,226,.22);
  opacity: 0; transform: translateY(16px);
}
.navovl:not([hidden]) .navovl-link {
  animation: navovlIn .5s cubic-bezier(.22, .9, .3, 1) both;
  animation-delay: calc(var(--i) * 65ms + 80ms);
}
@keyframes navovlIn { to { opacity: 1; transform: none; } }
.navovl-link:hover, .navovl-link:focus-visible { color: var(--orange); }
.navovl-arrow {
  font-size: 1.1rem; color: var(--orange);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .18s ease, transform .18s ease;
}
[dir="rtl"] .navovl-arrow { transform: translateX(10px); }
.navovl-link:hover .navovl-arrow, .navovl-link:focus-visible .navovl-arrow { opacity: 1; transform: none; }
.navovl-foot {
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1.5px solid rgba(242,238,226,.3);
  display: flex; flex-direction: column; gap: .55rem;
}
.navovl-foot form { width: 100%; }
.navovl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%; padding: .8rem .9rem;
  border: 1.5px solid rgba(242,238,226,.45); border-radius: 0;
  background: transparent; color: var(--paper);
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-align: left;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.navovl-row:hover { background: rgba(242,238,226,.1); }
.navovl-foot .navovl-out { justify-content: center; color: #ffb3a1; border-color: rgba(255,120,90,.55); }
.navovl-foot .navovl-out:hover { background: rgba(255,120,90,.12); }
.navovl-cta {
  justify-content: center; border-color: var(--blue); background: var(--blue); color: #fff;
}
.navovl-cta:hover { background: var(--blue-ink); }
@media (prefers-reduced-motion: reduce) {
  .navovl-link { opacity: 1; transform: none; animation: none !important; }
  .navovl-x { transition: none; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-foot {
  border-top: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  margin-top: 4rem;
}
.site-foot-in {
  max-width: 78rem; margin: 0 auto; padding: 2.2rem 1.1rem 1.6rem;
}
.site-foot-top {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1.6rem; padding-bottom: 1.8rem;
  border-bottom: 1.5px solid var(--ink);
}
.site-foot-mark {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  letter-spacing: -.05em; line-height: .9;
}
.site-foot-tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-top: .7rem; max-width: 22rem;
}
.site-foot-links {
  display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; padding-top: .35rem;
}
.foot-link {
  font-family: var(--mono); font-size: .63rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding: .55rem 0; min-height: 2.4rem; display: inline-flex; align-items: center;
}
.foot-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.site-foot-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.1rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.foot-ig { color: var(--ink-2); display: inline-flex; padding: .4rem; }
.foot-ig:hover { color: var(--blue); }

/* ---------------------------------------------------------------------
   Cookie note
   --------------------------------------------------------------------- */
#cookie-note.p-panel { box-shadow: var(--shadow); }

/* ---------------------------------------------------------------------
   Landing
   --------------------------------------------------------------------- */
.lp { background: var(--paper); }

.lp-hero {
  max-width: 78rem; margin: 0 auto;
  padding: 2.2rem 1.1rem 3rem;
  display: grid; gap: 2.5rem;
  /* minmax(0, 1fr), not an auto column: an auto column grew to the
     headline's max-content and pushed the hero off a phone screen. */
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 2px solid var(--ink);
}
@media (min-width: 1024px) {
  .lp-hero { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding: 3.2rem 1.1rem 4rem; align-items: start; }
}
.lp-hero-rule { max-width: 78rem; margin: 0 auto; border-top: 1.5px solid var(--ink); }

/* ---- The page is printed, but the ink is still wet ----------------
   Three colour washes drift behind the hero the way the old page's blobs
   did — same slow breathing motion, but mixed from this palette and kept
   faint enough to read as light on paper rather than as a neon glow.
   They live in their own clipped layer, so they can never push the page
   sideways on a phone. */
.lp-hero { position: relative; isolation: isolate; }
.lp-washes {
  position: absolute; inset: -5rem 0 -3rem;
  z-index: -1; overflow: hidden; pointer-events: none;
}
.lp-wash {
  position: absolute; border-radius: 50%;
  filter: blur(72px); opacity: .45;
  will-change: transform;
}
.lp-wash--b1 {
  width: 30rem; height: 30rem; left: -9rem; top: -9rem;
  background: radial-gradient(circle at 45% 45%, rgba(22,51,240,.42), rgba(22,51,240,0) 68%);
  animation: lpDriftA 19s ease-in-out infinite alternate;
}
.lp-wash--o1 {
  width: 22rem; height: 22rem; right: -7rem; top: -4rem;
  background: radial-gradient(circle at 50% 50%, rgba(255,122,24,.36), rgba(255,122,24,0) 68%);
  animation: lpDriftB 24s ease-in-out infinite alternate;
}
.lp-wash--b2 {
  width: 26rem; height: 26rem; left: 30%; bottom: -14rem;
  background: radial-gradient(circle at 50% 50%, rgba(22,51,240,.22), rgba(22,51,240,0) 70%);
  animation: lpDriftC 29s ease-in-out infinite alternate;
}
@keyframes lpDriftA {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(5rem,3.5rem,0) scale(1.16); }
}
@keyframes lpDriftB {
  from { transform: translate3d(0,0,0) scale(1.05); }
  to   { transform: translate3d(-6rem,4rem,0) scale(.94); }
}
@keyframes lpDriftC {
  from { transform: translate3d(0,0,0) scale(.96); }
  to   { transform: translate3d(-4rem,-5rem,0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .lp-wash { animation: none; } }
.lp-h1 {
  font-size: clamp(2.9rem, 12.5vw, 5.6rem);
  margin: 1.2rem 0 0;
  display: flex; flex-direction: column;
  text-wrap: balance;
  /* Each line is max-content so the marker hugs its words. The cap is
     load-bearing on a phone: without it the longest line ("Tous les
     téléphones" in French) is wider than the screen and the whole hero
     slides sideways. */
  max-width: 100%;
}
@media (min-width: 1024px) { .lp-h1 { font-size: clamp(3.6rem, 6.4vw, 5.4rem); } }
.lp-h1 > span { display: block; width: max-content; max-width: 100%; }
@media (max-width: 720px) {
  /* Long words break to a second line instead of running off the edge. */
  .lp-h1 > span { width: auto; }
}
.lp-lede {
  margin-top: 1.6rem; max-width: 34rem;
  font-size: .98rem; line-height: 1.62; color: var(--ink-2);
}
.lp-lede b, .lp-lede strong { color: var(--ink); font-weight: 700; }

.lp-hand {
  margin-top: 1.5rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--ink-2);
}
.lp-hand::after { content: " →"; color: var(--orange); }

.lp-cta { margin-top: 1.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.lp-cta .p-slab { width: 100%; max-width: 29rem; }
.lp-chips { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; }

.lp-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-top: .5rem;
}

.lp-sec { max-width: 78rem; margin: 0 auto; padding: 3.4rem 1.1rem; }
.lp-sec + .lp-sec { border-top: 1.5px solid var(--ink); }
.lp-h2 {
  font-size: clamp(1.9rem, 5.2vw, 2.9rem);
  margin: 1rem 0 0;
  line-height: .98;
}
.lp-h2 .p-outline { -webkit-text-stroke-width: 1.6px; }
.lp-sec-lede { margin-top: 1rem; max-width: 38rem; color: var(--ink-2); line-height: 1.6; font-size: .95rem; }

.lp-grid {
  margin-top: 2.2rem;
  display: grid; gap: 0;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
@media (min-width: 700px) { .lp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-cell {
  position: relative;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 1.5rem 1.3rem 1.7rem;
  background: var(--paper);
  transition: background .15s ease;
}
.lp-cell:hover { background: var(--paper-hi); }
.lp-cell-n {
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; color: var(--blue);
}
.lp-cell h3 { margin-top: .55rem; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.lp-cell p { margin-top: .45rem; font-size: .84rem; line-height: 1.55; color: var(--ink-2); }

/* A gold sticker in the corner of the cells that hold a premium feature. */
.p-sticker {
  position: absolute; top: .9rem; right: .9rem;
  display: inline-block; padding: .55rem 1.15rem;
  border: 14px solid transparent;
  border-image: url("/static/img/sticker-frame.png") 28 / 14px stretch;
  color: var(--gold); background: none;
  font-family: var(--mono); font-size: .86rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap;
  filter: drop-shadow(3px 3px 0 var(--ink));
  transform: rotate(4deg);
}

/* The ink band: NFC story + products. It stays INK in both themes — in dark
   mode the old var(--ink) flipped it to cream, and every light-grey text
   hardcoded for the dark band (steps, prices, the note) went unreadable. */
.lp-ink {
  background: #15140f; color: #f2eee2;
  border-top: 2px solid #15140f; border-bottom: 2px solid #15140f;
}
.dark .lp-ink { background: #0a0906; border-color: #0a0906; }
.lp-ink-in { max-width: 78rem; margin: 0 auto; padding: 3.4rem 1.1rem 3.8rem; }
.lp-ink .p-eyebrow { color: #cfc8b6; }
.lp-ink .p-eyebrow::before { background: var(--orange); }
.lp-ink h2 { color: #f2eee2; }
.lp-ink .p-outline { -webkit-text-stroke-color: #f2eee2; }
.lp-ink-lede { margin-top: 1rem; max-width: 40rem; color: #c9c2b0; line-height: 1.65; font-size: .95rem; }

.lp-steps {
  margin-top: 2.4rem;
  display: grid; gap: 0;
  border-top: 1.5px solid rgba(242,238,226,.35);
}
@media (min-width: 760px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step {
  padding: 1.4rem 0 1.6rem;
  border-bottom: 1.5px solid rgba(242,238,226,.35);
}
@media (min-width: 760px) {
  .lp-step { border-bottom: 0; border-right: 1.5px solid rgba(242,238,226,.35); padding: 1.4rem 1.4rem 1.6rem 0; }
  .lp-step + .lp-step { padding-left: 1.4rem; }
  .lp-step:last-child { border-right: 0; }
}
.lp-step-n {
  font-family: var(--display); font-size: 1.8rem; color: var(--orange); line-height: 1;
}
.lp-step h3 { margin-top: .7rem; font-size: 1rem; font-weight: 800; }
.lp-step p { margin-top: .4rem; font-size: .84rem; line-height: 1.55; color: #bdb6a3; }

.lp-products {
  margin-top: 2.6rem;
  display: grid; gap: 1rem;
}
@media (min-width: 700px) { .lp-products { grid-template-columns: 1fr 1fr; } }
.lp-prod {
  border: 1.5px solid rgba(242,238,226,.4);
  padding: 1.3rem 1.2rem 1.4rem;
  background: rgba(242,238,226,.04);
}
.lp-prod h3 { font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
.lp-prod-sub { margin-top: .3rem; font-size: .78rem; color: #b4ad9a; }
.lp-price {
  margin-top: 1rem; display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--display); font-size: 2rem; letter-spacing: -.04em;
}
.lp-price s { font-family: var(--mono); font-size: .72rem; color: #8f8877; }
.lp-prod-how { margin-top: .8rem; font-size: .78rem; color: #a9a291; line-height: 1.5; }
.lp-ink-note { margin-top: 1.2rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #9d9684; }

/* Closing call */
.lp-close {
  max-width: 78rem; margin: 0 auto; padding: 3.2rem 1.1rem 3.6rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem;
}
.lp-close h2 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: .92; }
.lp-close p { margin-top: .7rem; color: var(--ink-2); font-size: .9rem; }

/* ---------------------------------------------------------------------
   Auth
   --------------------------------------------------------------------- */
.auth-wrap {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2.2rem 1rem 3.5rem;
}
.auth-card {
  width: 100%; max-width: 27rem;
  background: var(--paper-hi);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.35rem 1.7rem;
}
@media (min-width: 640px) { .auth-card { padding: 1.9rem 1.8rem 2rem; } }
.auth-card h1 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.65rem; letter-spacing: -.04em; line-height: 1;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); }
.auth-tab {
  padding: .65rem .5rem; text-align: center;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-2); background: transparent;
}
.auth-tab + .auth-tab { border-left: 2px solid var(--ink); }
.auth-tab.is-on { background: var(--ink); color: var(--paper); }
.auth-or {
  display: flex; align-items: center; gap: .7rem; margin: 1.15rem 0;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1.5px; background: var(--ink); opacity: .45; }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%; padding: .8rem;
  border: 2px solid var(--ink); background: transparent;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  text-decoration: none;
}
.auth-google:hover { background: var(--paper-lo); }
.auth-flash {
  border: 2px solid var(--ink); padding: .7rem .8rem; font-size: .82rem; font-weight: 600;
  border-left-width: 6px;
}
.auth-flash--error { border-left-color: #c0392b; background: #fbeae7; color: #6d1a12; }
.auth-flash--ok { border-left-color: #1e7a4b; background: #e8f4ec; color: #145232; }

/* ---------------------------------------------------------------------
   App screens (dashboard / editor / pricing keep their own structure)
   --------------------------------------------------------------------- */
.p-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.p-page-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 4.6vw, 2.6rem); letter-spacing: -.04em; line-height: .95; }
.p-page-sub { margin-top: .55rem; color: var(--ink-2); font-size: .9rem; }

/* ---------------------------------------------------------------------
   Dark theme: existing markup still carries dark: utilities; these keep
   the paper component colours readable inside them.
   --------------------------------------------------------------------- */
.dark .p-field { color-scheme: dark; }
.dark .auth-flash--error { background: #3a1712; color: #ffd9d1; }
.dark .auth-flash--ok { background: #12301f; color: #c7efd7; }

/* ---------------------------------------------------------------------
   Wide-screen reading wrapper used by all app pages
   --------------------------------------------------------------------- */
.p-wrap { max-width: 78rem; margin: 0 auto; padding: 0 1.1rem; }

/* Keep the printed look honest on phones. */
@media (max-width: 480px) {
  .lp-sec, .lp-ink-in { padding-left: .95rem; padding-right: .95rem; }
  .p-slab { padding: .8rem .9rem .8rem .8rem; gap: .8rem; }
  .p-slab-icon { width: 2.7rem; height: 2.7rem; }
  .p-slab-t { font-size: .92rem; }
}

/* =====================================================================
   The utility layer
   ---------------------------------------------------------------------
   The rest of the app is written in Tailwind utilities. Rather than
   restyle thirty pages one by one, the printed language is applied to
   the handful of shapes that carried the old look — rounded slabs,
   purple gradients, floating shadows — and the card faces themselves
   are restored below, because those belong to their owners, not to us.
   ===================================================================== */

body .rounded-3xl,
body .rounded-2xl,
body .rounded-xl,
body .rounded-lg { border-radius: 0; }

body .bg-white { background-color: var(--paper-hi); }
body .bg-slate-50, body .bg-slate-100 { background-color: var(--paper-lo); }
body .bg-brand-600, body .bg-brand-500 { background-color: var(--blue); }
body .bg-brand-700 { background-color: var(--blue-ink); }
body .bg-brand-50, body .bg-brand-100 { background-color: rgba(22, 51, 240, .08); }
body .text-brand-600, body .text-brand-700 { color: var(--blue); }
body .text-slate-500, body .text-slate-400 { color: var(--muted); }
body .text-slate-600, body .text-slate-700 { color: var(--ink-2); }
body .text-slate-800, body .text-slate-900 { color: var(--ink); }
body .border-slate-200, body .border-slate-100 { border-color: rgba(21, 20, 15, .3); }
body .border-brand-300, body .border-brand-500 { border-color: var(--blue); }
body .shadow-xl, body .shadow-2xl, body .shadow-lg {
  box-shadow: 4px 4px 0 rgba(21, 20, 15, .9);
}
/* Old gradient tiles become blue blocks — and their glyph has to come with
   them. The editor's social icons are `text-brand-600` / `text-emerald-600`
   on a gradient, which Paper flattened to blue-on-blue: the logos vanished
   and every network was an empty square. */
body [class*="bg-gradient-to"] {
  background-image: none;
  background-color: var(--blue);
  color: var(--paper-hi);
}
body .ring-brand-400\/60:focus { --tw-ring-color: var(--blue); }

/* The face is the owner's design: give it back its soft corners. */
.card-face .rounded-3xl { border-radius: 1.5rem; }
.card-face .rounded-2xl { border-radius: 1rem; }
.card-face .rounded-xl  { border-radius: .75rem; }
.card-face .rounded-lg  { border-radius: .5rem; }
.card-face.shadow-lg, .card-face.shadow-2xl { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }