/* ==========================================================================
   PENPALS — brand design system  (mobile-first)
   Palette + type come from the PENPALS brand board.
   Layout uses Tailwind; this file owns the brand look & feel.
   ========================================================================== */

:root {
  /* brand palette */
  --turq: #00C2C7;   --turq-d: #00A5AA;
  --petrol: #1E6FB7; --petrol-d: #17588F;
  --sunny: #FFC629;
  --tangerine: #FFA349;
  --grape: #BB5CF6;  --grape-l: #E9C7FF;
  --white: #FFFFFF;

  /* neutrals */
  --ink: #123B5E;
  --ink-soft: #587187;
  --cloud: #F2F8FC;
  --line: #DBE8F3;
  --paper: #FFFDF6;

  /* Typography: ONE interface typeface (Quicksand) at a few weights.
     Caveat is kept only for the canvas handwriting tool, where a script
     face is the point. */
  --font-ui: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', cursive;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 10px 26px rgba(18, 59, 94, .09);
  --shadow-lg: 0 20px 44px rgba(18, 59, 94, .16);
  --tabbar-h: 68px;
}

* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-weight: 500;              /* Quicksand 400 is very light on screen */
  color: var(--ink);
  background: var(--cloud);
  overscroll-behavior-y: none;
  line-height: 1.55;
  letter-spacing: -.01em;
}

/* Quicksand is geometric and wide, so headings need less tracking, not more. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }

.font-display { font-family: var(--font-ui); font-weight: 700; }
.font-hand    { font-family: var(--font-script); }
.font-script  { font-family: var(--font-script); }

/* ---------- app frame: room for the mobile tab bar ---------------------- */
.pp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
/* Keeps the last element clear of the fixed bottom tab bar.
   Doubled selector for specificity: the Tailwind CDN injects its utilities
   (`py-4`, `py-5`) into a later stylesheet, so a single class here loses the
   cascade and the final button ends up underneath the tab bar. */
.has-tabbar,
.has-tabbar.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px); }

/* ---------- header ------------------------------------------------------ */
.pp-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.pp-header-in { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.pp-logo { display: flex; align-items: center; gap: 8px; }
/* The mark is a WIDE drawing (510x288), not a square. Fix the height and let
   the width follow, otherwise a square box either squashes it or shrinks the
   globe to fit the unused space above and below. */
.pp-logo img { height: 34px; width: auto; }
/* HeyPal! lockup: squarish art (globe + name), so it needs more height than
   the old wide mark to stay legible — still fits the 58px header bar. */
.pp-logo .pp-logo-img { height: 50px; }

/* Standalone uses of the mark (empty states, the login card, the splash).
   Same rule: size by height, never by a square. Doubled selector so it wins
   against the Tailwind CDN's w-*/h-* utilities, which load after this file. */
.pp-mark, .pp-mark.pp-mark { width: auto; max-width: 100%; }
.pp-mark-sm, .pp-mark-sm.pp-mark-sm { height: 34px; }
.pp-mark-md, .pp-mark-md.pp-mark-md { height: 52px; }
.pp-mark-lg, .pp-mark-lg.pp-mark-lg { height: 66px; }
.pp-wordmark {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 1.35rem; letter-spacing: .5px; line-height: 1;
  background: linear-gradient(92deg, var(--turq) 0%, var(--petrol) 28%, var(--sunny) 52%, var(--tangerine) 70%, var(--grape) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-tagline {
  font-size: .54rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 4px;
}

/* ---------- bottom tab bar (mobile) ------------------------------------- */
.pp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; align-items: stretch;
  box-shadow: 0 -6px 22px rgba(18, 59, 94, .07);
}
.pp-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: .66rem; font-weight: 700; color: var(--ink-soft);
  text-decoration: none; position: relative; transition: color .15s;
}
.pp-tab i { font-size: 1.2rem; }
.pp-tab.active { color: var(--petrol); }
.pp-tab.active::before {
  content: ''; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--turq), var(--petrol));
}
.pp-tab.active i { transform: translateY(-1px); }
.pp-tab .pp-tab-badge {
  position: absolute; top: 6px; right: 50%; margin-right: -20px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #EF4A5E; color: #fff; font-size: .6rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---------- cards ------------------------------------------------------- */
.pp-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.pp-card-flat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.pp-hover { transition: transform .16s ease, box-shadow .16s ease; }
.pp-hover:active { transform: scale(.985); }
@media (hover: hover) {
  .pp-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
}

/* ---------- buttons ----------------------------------------------------- */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-ui); font-weight: 700; font-size: .98rem;
  border-radius: 999px; padding: .78rem 1.35rem; min-height: 48px;
  border: 0; cursor: pointer; transition: transform .12s, filter .15s, box-shadow .15s;
  text-decoration: none; line-height: 1.1;
}
.pp-btn:active { transform: scale(.97); }
.pp-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.pp-btn-primary { background: var(--turq); color: #fff; box-shadow: 0 8px 20px rgba(0, 194, 199, .34); }
.pp-btn-sunny   { background: var(--sunny); color: var(--ink); box-shadow: 0 8px 20px rgba(255, 198, 41, .38); }
.pp-btn-grape   { background: var(--grape); color: #fff; box-shadow: 0 8px 20px rgba(187, 92, 246, .34); }
.pp-btn-petrol  { background: var(--petrol); color: #fff; box-shadow: 0 8px 20px rgba(30, 111, 183, .30); }
.pp-btn-turq    { background: var(--turq-d); color: #fff; box-shadow: 0 8px 20px rgba(0, 165, 170, .32); }
.pp-btn-ghost   { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.pp-btn-danger  { background: #FDECEE; color: #D63A4E; }

@media (hover: hover) {
  .pp-btn-primary:hover { filter: brightness(1.06); }
  .pp-btn-turq:hover    { filter: brightness(1.06); }
  .pp-btn-sunny:hover   { filter: brightness(1.05); }
  .pp-btn-grape:hover   { filter: brightness(1.06); }
  .pp-btn-ghost:hover   { background: var(--cloud); }
}
.pp-btn-block { width: 100%; }
.pp-btn-sm { min-height: 40px; padding: .5rem .95rem; font-size: .86rem; }

/* ---------- pills (filters) -------------------------------------------- */
.pp-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.pp-pills::-webkit-scrollbar { display: none; }
.pp-pill {
  flex: 0 0 auto; border-radius: 999px; padding: .5rem 1rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .88rem;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line); cursor: pointer;
  transition: all .14s;
}
.pp-pill.active { background: var(--turq); border-color: var(--turq); color: #fff; box-shadow: 0 6px 16px rgba(0, 194, 199, .32); }

/* ---------- chips (hobbies) -------------------------------------------- */
.pp-chip {
  border-radius: 999px; padding: .45rem .85rem; font-size: .84rem; font-weight: 600;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer;
  transition: all .13s; user-select: none;
}
.pp-chip.selected { background: var(--grape); border-color: var(--grape); color: #fff; }

/* ---------- form fields ------------------------------------------------- */
.pp-input {
  width: 100%; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  background: #fff; padding: .72rem .9rem; font-size: 1rem; font-family: inherit;
  color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s;
}
.pp-input:focus { border-color: var(--turq); box-shadow: 0 0 0 4px rgba(0, 194, 199, .16); }
.pp-label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); display: block; margin-bottom: .3rem; }

.pp-input.input-error, .input-error {
  border-color: #EF4A5E !important;
  box-shadow: 0 0 0 4px rgba(239, 74, 94, .16) !important;
  animation: pp-shake .3s ease;
}
@keyframes pp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- avatars ----------------------------------------------------- */
.pp-avatar {
  border-radius: 999px; display: grid; place-items: center; color: #fff;
  font-family: var(--font-ui); font-weight: 700; flex: 0 0 auto; overflow: hidden;
}
/* Illustrated character picker (profile / register wizard) */
.pp-avatar-pick {
  position: relative; border-radius: 18px; padding: 4px; border: 3px solid transparent;
  background: var(--cloud, #F2F8FC); cursor: pointer; transition: transform .15s ease, border-color .15s ease;
  aspect-ratio: 1 / 1;
}
.pp-avatar-pick img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; display: block; }
.pp-avatar-pick:hover { transform: translateY(-2px); }
.pp-avatar-pick.selected { border-color: var(--turq); box-shadow: 0 4px 14px rgba(0,194,199,.35); }
.pp-avatar-pick.selected::after {
  content: '\2713'; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--turq); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(18,59,94,.25);
}
.pp-flag-badge {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; display: grid; place-items: center; font-size: .72rem;
  box-shadow: 0 2px 6px rgba(18, 59, 94, .18);
}

/* ---------- stepper (registration) ------------------------------------- */
.pp-step { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; font-family: var(--font-ui); }
.pp-step-active { background: var(--turq); color: #fff; box-shadow: 0 4px 12px rgba(0, 194, 199, .4); }
.pp-step-done   { background: var(--sunny); color: var(--ink); }
.pp-step-idle   { background: #E7EFF6; color: var(--ink-soft); }

/* ---------- decorative ------------------------------------------------ */
.pp-blob { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .42; pointer-events: none; }
.pp-orbit {
  background: linear-gradient(135deg, var(--turq) 0%, var(--petrol) 55%, var(--grape) 100%);
}
.pp-gradient-text {
  background: linear-gradient(95deg, var(--turq), var(--petrol) 40%, var(--grape));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-slogan { font-family: var(--font-ui); font-weight: 700; color: var(--petrol); }

/* ---------- paper / letters ------------------------------------------- */
.pp-paper {
  background: var(--paper);
  background-image: linear-gradient(rgba(30, 111, 183, .10) 1px, transparent 1px);
  background-size: 100% 32px;
  border-radius: var(--radius-sm);
}

/* ---------- status banners ------------------------------------------- */
.pp-note { border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .88rem; display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; }
.pp-note-info { background: #E9F7FA; color: #0A6C74; }
.pp-note-warn { background: #FFF6E0; color: #97670B; }
.pp-note-ok   { background: #E6F8EE; color: #15764A; }
.pp-note-err  { background: #FDECEE; color: #B7253A; }

/* ---------- tabs ------------------------------------------------------ */
.pp-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tab-btn {
  flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px; font-weight: 700; font-size: .86rem;
  color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); cursor: pointer;
  font-family: var(--font-ui); transition: all .14s;
}
.pp-tab-btn.active { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.pp-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #EF4A5E; color: #fff; font-size: .64rem; font-weight: 700; }

/* ---------- modal / bottom sheet ------------------------------------- */
.pp-modal { position: fixed; inset: 0; z-index: 60; background: rgba(12, 40, 66, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.pp-modal-in {
  background: #fff; width: 100%; max-height: 92vh; overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0; padding: 1.15rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
  animation: pp-sheet-up .24s ease;
}
.pp-sheet-grip { width: 42px; height: 5px; border-radius: 999px; background: #DDE8F2; margin: 0 auto 1rem; }
@keyframes pp-sheet-up { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }

@media (min-width: 768px) {
  .pp-modal { align-items: center; padding: 24px; }
  .pp-modal-in { max-width: 620px; border-radius: var(--radius); padding: 1.6rem; animation: pp-pop .18s ease; }
  .pp-sheet-grip { display: none; }
}
@keyframes pp-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- toast ----------------------------------------------------- */
.pp-toast-root { position: fixed; left: 50%; transform: translateX(-50%); z-index: 90;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  width: calc(100% - 32px); max-width: 420px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
@media (min-width: 768px) { .pp-toast-root { left: auto; right: 22px; transform: none; bottom: 22px; width: 360px; } }
.pp-toast {
  padding: .8rem 1rem; border-radius: 16px; color: #fff; font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-lg); animation: pp-toast-in .22s ease; display: flex; align-items: center; gap: .55rem;
}
.pp-toast-ok   { background: linear-gradient(135deg, #22BE86, #12A96E); }
.pp-toast-err  { background: linear-gradient(135deg, #F2586B, #DC3149); }
.pp-toast-info { background: linear-gradient(135deg, var(--turq), var(--petrol)); }
@keyframes pp-toast-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- letter studio -------------------------------------------- */
.studio-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  padding: .55rem .3rem; border-radius: 14px; cursor: pointer; font-size: .66rem; font-weight: 700;
  color: var(--ink-soft); border: 1.5px solid transparent; background: var(--cloud);
  transition: all .13s; min-height: 54px;
}
.studio-tool i { font-size: 1rem; }
.studio-tool.active { background: var(--turq); color: #fff; border-color: var(--turq); box-shadow: 0 6px 14px rgba(0, 194, 199, .32); }
@media (hover: hover) { .studio-tool:hover { border-color: var(--turq); color: var(--petrol); } }

.swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.swatch.active { box-shadow: 0 0 0 3px var(--turq); transform: scale(1.1); }

.sticker-btn { font-size: 1.5rem; line-height: 1; padding: .3rem; border-radius: 12px; cursor: pointer; transition: transform .1s, background .1s; background: transparent; }
@media (hover: hover) { .sticker-btn:hover { transform: scale(1.18); background: var(--cloud); } }
.sticker-btn:active { transform: scale(1.2); background: var(--cloud); }
/* The picked decoration keeps a ring so the child can see, before tapping
   the paper, exactly which sticker is loaded. */
.sticker-btn.picked { background: #E4F7F8; box-shadow: inset 0 0 0 2px var(--turq); }

/* ---- Sticker picker: our own artwork vs. emoji ---- */
.pp-sticker-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; background: var(--cloud); padding: .22rem; border-radius: 12px; }
.pp-sticker-tab {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .42rem .3rem; border-radius: 9px; font-size: .7rem; font-weight: 700;
  color: var(--ink-soft); background: transparent; cursor: pointer; border: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-sticker-tab i { font-size: .72rem; }
.pp-sticker-tab.active { background: #fff; color: var(--petrol); box-shadow: 0 1px 3px rgba(18, 59, 94, .12); }

.pp-art-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem;
  max-height: 11.5rem; overflow-y: auto; padding-right: .15rem;
}
.pp-art-btn {
  position: relative; aspect-ratio: 1; padding: .18rem; border-radius: 12px;
  background: transparent; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .1s, background .1s, border-color .1s;
}
.pp-art-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (hover: hover) { .pp-art-btn:not(.locked):hover { transform: scale(1.12); background: var(--cloud); } }
.pp-art-btn.picked { background: #E4F7F8; border-color: var(--turq); }
/* Locked art is dimmed, not hidden — seeing the reward is the motivation. */
.pp-art-btn.locked { cursor: help; }
.pp-art-btn.locked img { opacity: .3; filter: grayscale(1); }
.pp-art-lock {
  position: absolute; inset: auto .1rem .1rem auto;
  display: inline-flex; align-items: center; gap: .12rem;
  background: var(--ink-soft); color: #fff; border-radius: 999px;
  font-size: .55rem; font-weight: 700; padding: .06rem .28rem; line-height: 1.5;
}
.pp-art-lock i { font-size: .48rem; }

.pp-art-progress { margin-top: .5rem; font-size: .66rem; color: var(--ink-soft); line-height: 1.45; }
.pp-art-progress b { color: var(--petrol); }
.pp-art-bar { height: 5px; border-radius: 999px; background: var(--cloud); overflow: hidden; margin-bottom: .3rem; }
.pp-art-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--turq), #FFC629); }

.opt-btn {
  width: 100%; display: flex; align-items: center; gap: .55rem; text-align: left;
  padding: .55rem .7rem; border-radius: 12px; font-size: .84rem; font-weight: 600;
  color: var(--ink-soft); background: transparent; cursor: pointer; border: 1.5px solid transparent;
}
.opt-btn.active { background: #E4F7F8; color: #0A6C74; border-color: var(--turq); }

/* The drawing canvas stays TRANSPARENT so the decoration layer shows through. */
#bg-canvas { background: var(--paper); border-radius: 10px; pointer-events: none; }
#letter-canvas { border-radius: 10px; touch-action: none; cursor: crosshair; max-width: 100%; display: block; }
/* Pen / finger drawing must never select text or open the iOS callout. */
#canvas-wrap, #letter-canvas, #bg-canvas, #overlay-layer, .studio-tools {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-user-drag: none;
}
#canvas-wrap ::selection, #canvas-wrap::selection { background: transparent; }
#letter-canvas { -webkit-tap-highlight-color: transparent; outline: none; }
.studio-tools input, .studio-tools textarea, #text-entry, #text-entry input { -webkit-user-select: text; user-select: text; }
body.studio-drawing { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.studio-tools-handle { display: none; }
#overlay-layer { pointer-events: none; }
.sticker-layer-item {
  position: absolute; pointer-events: auto; cursor: move; user-select: none;
  -webkit-user-select: none; touch-action: none; line-height: 1;
}
.sticker-layer-item.selected { outline: 2px dashed var(--turq); outline-offset: 3px; border-radius: 6px; }

#sel-panel {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .2rem;
  background: rgba(255, 255, 255, .98); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .3rem .4rem; box-shadow: var(--shadow-lg); z-index: 5;
}
#sel-panel button { width: 2.15rem; height: 2.15rem; border-radius: 999px; color: var(--ink-soft); font-size: .82rem; display: grid; place-items: center; }
#sel-panel button:hover { background: var(--cloud); color: var(--petrol); }
#sel-panel button.danger:hover { background: #FDECEE; color: #D63A4E; }
#sel-panel.hidden { display: none; }

/* On phones the studio columns stack and the canvas comes first. */
@media (max-width: 1023px) {
  /* A grid item defaults to min-width:auto, so it refuses to shrink below its
     content. That made the tool / sticker rails size to their full scroll
     width (~2100px) instead of scrolling, dragging the whole page sideways.
     min-width:0 lets the column take the viewport width and hands the
     overflow back to the rails' own `overflow-x: auto`. */
  .studio-tools, .studio-canvas, main > .grid > * { min-width: 0; }
  /* Canvas first, then the letter note, then the sticky tool panel. Without
     an explicit order the note would sit after the tool rail, which is
     `position: sticky` and would cover it. */
  .studio-canvas { order: -2; }
  .studio-note   { order: -1; }
  /* The tool panel is sticky to the bottom and is tall, so it covers roughly
     the lower half of the screen. Scroll the note to just under the header
     instead of into the centre, where the panel would hide it. */
  .studio-note { scroll-margin-top: 150px; }
  .studio-tools {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 20;
    transition: transform .25s ease, opacity .2s ease;
    max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
    padding-top: .25rem;
  }
  /* Drag-handle: tap to collapse / expand the panel by hand. */
  .studio-tools-handle {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 100%; padding: .2rem 0 .4rem; color: var(--ink-soft); background: transparent;
    position: sticky; top: -.25rem; z-index: 2;
  }
  .studio-tools-handle span { width: 38px; height: 4px; border-radius: 999px; background: var(--line); }
  .studio-tools-handle i { font-size: .65rem; transition: transform .2s; }
  .studio-tools.collapsed { max-height: 2.6rem; overflow: hidden; }
  .studio-tools.collapsed .studio-tools-handle i { transform: rotate(180deg); }
  /* While the pen is down (and while typing the note) the panel slides down
     out of view so the paper is fully visible. */
  body.studio-drawing .studio-tools,
  .studio-tools.is-writing {
    transform: translateY(calc(100% + var(--tabbar-h) + 24px));
    opacity: 0; pointer-events: none;
  }
  #tool-grid { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  #tool-grid::-webkit-scrollbar { display: none; }
  #tool-grid .studio-tool { flex: 0 0 auto; width: 62px; min-height: 58px; }
  #color-grid { display: flex; flex-wrap: wrap; gap: 7px; }
  #sticker-grid { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-height: none; }
  #sticker-grid::-webkit-scrollbar { display: none; }
}

@media (min-width: 1024px) {
  /* Explicit placement: the canvas and the note share the middle column
     (note on the second row), while the two side panels stay pinned to the
     first row — otherwise the note pushes the sticker panel down a row. */
  .studio-tools  { grid-column: 1; grid-row: 1; }
  .studio-canvas { grid-column: 2; grid-row: 1; }
  .studio-note   { grid-column: 2; grid-row: 2; }
  .studio-side   { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- misc ------------------------------------------------------ */
.pp-scroll { scrollbar-width: thin; }
.pp-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.pp-scroll::-webkit-scrollbar-thumb { background: #C6D8E6; border-radius: 999px; }
/* generic hard hide (beats .pp-modal's display:flex) */
.pp-hidden { display: none !important; }

.pp-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.pp-heart { color: #EF4A5E; }

/* skeleton shimmer for loading states */
.pp-skel { background: linear-gradient(90deg, #EAF2F8 25%, #F6FAFD 37%, #EAF2F8 63%); background-size: 400% 100%; animation: pp-shimmer 1.3s ease infinite; border-radius: 12px; }
@keyframes pp-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   LANDING PAGE — hero, marquee, bento grid, timeline, footer
   ========================================================================= */

/* ---------- hero shell -------------------------------------------------- */
.pp-hero {
  position: relative;
  background:
    radial-gradient(720px 420px at 14% -8%, rgba(0, 194, 199, .16), transparent 60%),
    radial-gradient(680px 460px at 100% 8%, rgba(187, 92, 246, .14), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(255, 198, 41, .10), transparent 60%),
    var(--cloud);
  overflow: hidden;
}
.pp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(18,59,94,.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  pointer-events: none;
}

.pp-spin-slow { animation: pp-spin 14s linear infinite; }
@keyframes pp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The hero art is a cut-out with no frame of its own. A soft drop-shadow
   filter follows the actual silhouette (a box-shadow would draw a rectangle
   around the transparent bounds and put the card right back). */
.pp-hero-art {
  display: block;
  filter: drop-shadow(0 16px 26px rgba(18, 59, 94, .13));
}

/* One line of plain language between the promise and the button. The headline
   says what you get; this says what it is made of, so the button is not the
   first thing that explains the product. */
.pp-hero-sub {
  margin-top: .85rem;
  max-width: 30ch;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 767px) {
  .pp-hero-sub { margin-left: auto; margin-right: auto; font-size: .95rem; }
}

/* The three facts, below the fold and deliberately quiet. They were big
   white cards in the hero, which made the first screen read as a spec
   sheet; as one small line they inform without competing with the promise. */
.pp-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem .9rem; margin-top: 1.1rem;
  font-size: .74rem; font-weight: 600; color: var(--ink-soft);
}
.pp-facts span { display: inline-flex; align-items: baseline; gap: .28rem; white-space: nowrap; }
.pp-facts b { font-weight: 700; color: var(--petrol); }
/* Keep all three on one line on a narrow phone rather than orphaning the
   last one; they are a single quiet aside, not a list. */
@media (max-width: 420px) { .pp-facts { gap: .3rem .6rem; font-size: .68rem; } }

/* ---------- scrolling country / trust marquee --------------------------- */
.pp-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pp-marquee-track { display: flex; gap: 2.1rem; width: max-content; animation: pp-marquee 26s linear infinite; }
.pp-marquee:hover .pp-marquee-track { animation-play-state: paused; }
@keyframes pp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pp-marquee-item { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ink-soft); font-size: .92rem; white-space: nowrap; }
.pp-marquee-item .flag { font-size: 1.3rem; }
/* Hand-drawn SVG flags: a hairline border keeps white flags (JP, IN, FR...)
   from dissolving into the light background. */
.pp-flag-img {
  width: 27px; height: 18px; border-radius: 3px; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(18, 59, 94, .14); background: #fff;
}

/* ---------- bento "why" grid --------------------------------------------- */
.pp-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.pp-bento-card {
  border-radius: 16px; padding: .7rem .8rem; position: relative; overflow: hidden;
  color: #fff; box-shadow: 0 6px 16px -8px rgba(18, 59, 94, .35);
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .5rem; row-gap: .15rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pp-bento-card i.pp-bento-icon { font-size: 1rem; opacity: .95; grid-column: 1; grid-row: 1; }
.pp-bento-card .pp-bento-title { font-family: var(--font-ui); font-weight: 700; font-size: .85rem; margin: 0; line-height: 1.2; grid-column: 2; grid-row: 1; }
.pp-bento-card .pp-bento-sub { font-size: .68rem; opacity: .92; margin: 0; line-height: 1.3; font-weight: 600; grid-column: 1 / -1; grid-row: 2; }
.pp-bento-card::after {
  content: ''; position: absolute; width: 54px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,.16); right: -18px; bottom: -22px; pointer-events: none;
}
@media (hover: hover) { .pp-bento-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } }
.pp-bento-card.span-2 { grid-column: span 2; }

/* ---------- "how it works" timeline -------------------------------------- */
.pp-timeline { position: relative; }
.pp-timeline-item { position: relative; padding-left: 3.1rem; padding-bottom: 1.6rem; }
.pp-timeline-item:last-child { padding-bottom: 0; }
.pp-timeline-item::before {
  content: ''; position: absolute; left: 1.15rem; top: 2.5rem; bottom: -.2rem; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 11px);
}
.pp-timeline-item:last-child::before { display: none; }
.pp-timeline-num {
  position: absolute; left: 0; top: 0; width: 2.35rem; height: 2.35rem; border-radius: 999px;
  color: #fff; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700;
  box-shadow: var(--shadow); font-size: .95rem;
}

/* ---------- postcard-style testimonial quote ----------------------------- */
.pp-postcard {
  border-radius: var(--radius); background: var(--paper); border: 1.5px dashed var(--tangerine);
  padding: 1.25rem 1.35rem; position: relative;
}
.pp-postcard::before {
  content: '\2709'; position: absolute; top: -14px; left: 18px; font-size: 1.4rem;
  background: var(--sunny); width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  box-shadow: var(--shadow); color: var(--ink);
}

/* ---------- final CTA banner --------------------------------------------- */
.pp-cta-banner {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(120deg, var(--turq) 0%, var(--petrol) 55%, var(--grape) 120%);
  color: #fff; padding: 2rem 1.4rem; text-align: center; box-shadow: var(--shadow-lg);
}
.pp-cta-banner::before, .pp-cta-banner::after {
  content: ''; position: absolute; border-radius: 999px; background: rgba(255,255,255,.14);
}
.pp-cta-banner::before { width: 160px; height: 160px; top: -60px; left: -50px; }
.pp-cta-banner::after { width: 130px; height: 130px; bottom: -60px; right: -30px; }

/* ---------- footer -------------------------------------------------------- */
.pp-footer { background: #0F2E4A; color: #C9DCEC; }
.pp-footer a { color: #C9DCEC; text-decoration: none; }
.pp-footer a:hover { color: #fff; }
.pp-footer-heading { font-family: var(--font-ui); font-weight: 700; color: #fff; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .6rem; }

/* ---------- section eyebrow label ---------------------------------------- */
.pp-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-ui);
  font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--petrol);
}

@media (min-width: 768px) {
  .pp-bento { grid-template-columns: repeat(4, 1fr); }
  .pp-bento-card.span-2 { grid-column: span 2; }
  .pp-bento-card.md-span-2 { grid-column: span 2; }
  .pp-bento { max-width: 46rem; margin-inline: auto; }
  .pp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2.5rem; }
  .pp-timeline.pp-timeline-desktop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  .pp-timeline.pp-timeline-desktop .pp-timeline-item { padding-left: 0; padding-top: 3rem; padding-bottom: 0; }
  .pp-timeline.pp-timeline-desktop .pp-timeline-item::before {
    left: 0; top: 1.15rem; right: -1.1rem; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 11px);
  }
  .pp-timeline.pp-timeline-desktop .pp-timeline-item:last-child::before { display: none; }
  .pp-timeline.pp-timeline-desktop .pp-timeline-num { left: 0; top: 0; }
}

/* ==========================================================================
   WRITING HELPER — topic library, dictionary and phrase bank
   Additive only: nothing above this line is modified.
   ========================================================================== */

/* ---------- the sheet ----------------------------------------------------- */
.pp-write-sheet { display: flex; flex-direction: column; max-height: 88vh; }
.pp-write-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 2px; margin-right: -2px; flex: 1; min-height: 240px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .25rem);
}

.pp-write-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  background: var(--cloud); border-radius: 999px; padding: .28rem; margin-bottom: .9rem;
}
.pp-write-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
  border: 0; background: transparent; cursor: pointer; border-radius: 999px;
  padding: .55rem .4rem; font-family: var(--font-ui); font-weight: 700;
  font-size: .85rem; color: var(--ink-soft); transition: background .15s, color .15s, box-shadow .15s;
  min-height: 42px;
}
.pp-write-tab i { font-size: .82rem; }
.pp-write-tab.active { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(18, 59, 94, .10); }

.pp-write-h {
  display: flex; align-items: center; gap: .45rem; font-family: var(--font-ui);
  font-weight: 700; font-size: .84rem; color: var(--ink); margin-bottom: .5rem;
}

/* ---------- search field -------------------------------------------------- */
.pp-write-search { position: relative; }
.pp-write-search > i {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: .88rem; pointer-events: none;
}
.pp-write-search .pp-input { padding-left: 2.4rem; }

/* ---------- category rail ------------------------------------------------- */
.pp-cat-rail {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: .2rem;
}
/* Inside the sheet the rail bleeds to the padded edges so the first and last
   pill can scroll flush. On a normal page it must stay inside the wrap,
   otherwise the negative margin pushes the document 2px wide. */
.pp-write-body .pp-cat-rail { margin: 0 -1.15rem; padding-inline: 1.15rem; }
.pp-cat-rail::-webkit-scrollbar { display: none; }
.pp-cat-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .38rem;
  border-radius: 999px; padding: .45rem .8rem; font-size: .8rem; font-weight: 700;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: all .13s; white-space: nowrap; min-height: 38px;
}
.pp-cat-pill i { font-size: .78rem; color: var(--tc, var(--turq)); }
.pp-cat-pill.active {
  background: var(--tc, var(--turq)); border-color: var(--tc, var(--turq)); color: #fff;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--tc, #00C2C7) 34%, transparent);
}
.pp-cat-pill.active i { color: #fff; }

/* ---------- topic card ---------------------------------------------------- */
.pp-topic {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: .75rem .8rem; transition: border-color .14s, box-shadow .14s, transform .14s;
  border-left: 4px solid var(--tc, var(--turq));
}
@media (hover: hover) {
  .pp-topic:hover { border-color: color-mix(in srgb, var(--tc, #00C2C7) 55%, var(--line)); box-shadow: 0 8px 18px rgba(18, 59, 94, .08); transform: translateY(-1px); }
}
.pp-topic-emoji {
  font-size: 1.6rem; line-height: 1; flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, var(--tc, #00C2C7) 12%, #fff);
}
.pp-topic-level {
  font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: .1rem .38rem;
  border-radius: 999px; background: var(--cloud); color: var(--ink-soft); flex: 0 0 auto;
}
.pp-topic-go {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; align-self: center;
  background: color-mix(in srgb, var(--tc, #00C2C7) 14%, #fff); color: var(--tc, var(--turq));
  font-size: .8rem; transition: background .14s, color .14s;
}
@media (hover: hover) { .pp-topic-go:hover { background: var(--tc, var(--turq)); color: #fff; } }

.pp-topic-hero {
  display: flex; gap: .85rem; align-items: flex-start; padding: .95rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc, #00C2C7) 13%, #fff), #fff);
  border: 1.5px solid color-mix(in srgb, var(--tc, #00C2C7) 30%, var(--line));
}

/* ---------- "Topic of the Day" block -------------------------------------- */
.pp-today {
  background: linear-gradient(135deg, #FFF8E4, #FFFDF6);
  border: 1.5px dashed #FFD873; border-radius: var(--radius-sm); padding: .8rem;
}
.pp-today-kicker {
  display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-ui);
  font-weight: 700; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: #97670B;
}

/* ---------- question list ------------------------------------------------- */
.pp-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pp-qlist li {
  position: relative; padding: .5rem .7rem .5rem 2rem; border-radius: 12px;
  background: var(--cloud); font-size: .86rem; line-height: 1.4; color: var(--ink);
  counter-increment: ppq;
}
.pp-qlist { counter-reset: ppq; }
.pp-qlist li::before {
  content: counter(ppq); position: absolute; left: .55rem; top: .5rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--grape); color: #fff;
  font-size: .64rem; font-weight: 700; display: grid; place-items: center;
}

/* ---------- tappable sentence starter / phrase ---------------------------- */
.pp-starter {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; text-align: left; cursor: pointer; min-height: 44px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .6rem .75rem; font-size: .88rem; line-height: 1.35; color: var(--ink);
  font-family: inherit; transition: all .13s;
}
.pp-starter i { color: var(--tc, var(--turq)); font-size: .78rem; flex: 0 0 auto; }
.pp-starter span { min-width: 0; }
@media (hover: hover) {
  .pp-starter:hover { border-color: var(--tc, var(--turq)); background: color-mix(in srgb, var(--tc, #00C2C7) 7%, #fff); }
}
.pp-starter:active { transform: scale(.985); }

/* ---------- dictionary word card ------------------------------------------ */
.pp-word-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 560px) { .pp-word-grid { grid-template-columns: 1fr 1fr; } }
.pp-word-grid .col-span-full { grid-column: 1 / -1; }

.pp-word {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: .6rem .7rem;
  transition: all .13s;
}
@media (hover: hover) { .pp-word:hover { border-color: var(--petrol); box-shadow: 0 6px 14px rgba(30, 111, 183, .10); } }
.pp-word-w { font-family: var(--font-ui); font-weight: 700; font-size: .95rem; color: var(--petrol); }
.pp-word-p { font-size: .64rem; font-style: italic; color: var(--ink-soft); margin-left: .35rem; }
.pp-word-d { display: block; font-size: .8rem; color: var(--ink); line-height: 1.35; margin-top: .15rem; }
.pp-word-e {
  display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.35; margin-top: .3rem;
  border-top: 1px dashed var(--line); padding-top: .3rem; font-style: italic;
}
@media (hover: hover) { .pp-word-e:hover { color: var(--turq-d); } }

/* ---------- small chip (words / linkers) ---------------------------------- */
.pp-chip-sm {
  display: inline-block; border-radius: 999px; padding: .3rem .65rem; font-size: .78rem;
  font-weight: 600; background: var(--cloud); color: var(--ink); border: 1px solid var(--line);
}
.pp-chip-tap { cursor: pointer; font-family: inherit; min-height: 34px; transition: all .13s; }
@media (hover: hover) { .pp-chip-tap:hover { background: var(--turq); border-color: var(--turq); color: #fff; } }

/* ---------- sticky action bar in the sheet -------------------------------- */
.pp-write-actions {
  position: sticky; bottom: 0; margin: 1rem -.15rem 0; padding: .7rem .15rem .2rem;
  background: linear-gradient(to top, #fff 68%, rgba(255, 255, 255, 0));
}

/* ---------- Studio: the "Ideas" launcher + active-topic banner ------------ */
/* Bright turquoise running into petrol blue — the two brand blues, so the
   Writing Helper reads as a primary action instead of a warning-coloured
   note, and sits in the same family as the rest of the Studio panel. */
.pp-idea-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; min-height: 44px; cursor: pointer; font-family: var(--font-ui);
  font-weight: 700; font-size: .88rem; border-radius: 12px; padding: .55rem .8rem;
  color: #fff; background: linear-gradient(135deg, var(--turq) 0%, #0A9FC4 55%, var(--petrol) 100%);
  border: none; box-shadow: 0 6px 16px rgba(0, 165, 170, .3);
  transition: filter .14s, transform .14s;
}
.pp-idea-btn i { color: var(--sunny); } /* the lightbulb keeps its glow */
@media (hover: hover) { .pp-idea-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } }

.pp-topic-banner {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--tc, #00C2C7) 10%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--tc, #00C2C7) 34%, var(--line));
  font-size: .82rem; line-height: 1.3;
}
.pp-topic-banner .x {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 0;
  cursor: pointer; background: transparent; color: var(--ink-soft); display: grid; place-items: center;
}
@media (hover: hover) { .pp-topic-banner .x:hover { background: #fff; color: var(--ink); } }

/* ---------- Studio: the visible letter-note pad --------------------------- */
/* The note the Writing Helper writes into. It sits under the canvas in plain
   sight so a student can always see where the tapped text landed. */
.pp-note-pad {
  margin-top: .9rem; padding: .8rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1.5px solid var(--line);
}
.pp-note-pad-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-ui); font-weight: 700; font-size: .84rem; color: var(--ink);
}
.pp-note-pad-area {
  font-family: var(--font-ui); font-size: 1rem; line-height: 1.6;
  resize: vertical; min-height: 96px; background: #fff;
}

/* Flash the note when text is added from the helper, so the change is
   impossible to miss. Respects reduced-motion. */
@keyframes pp-flash {
  0%   { border-color: var(--sunny); box-shadow: 0 0 0 5px rgba(255, 198, 41, .34); }
  100% { border-color: var(--line);  box-shadow: 0 0 0 0   rgba(255, 198, 41, 0); }
}
.pp-flash { animation: pp-flash .85s ease-out; }
@media (prefers-reduced-motion: reduce) { .pp-flash { animation: none; } }

/* ---------- Writing Helper: live note preview inside the sheet ------------ */
/* The sheet covers the page, so the note being written is mirrored here —
   otherwise a tapped phrase seems to vanish. */
.pp-write-peek {
  flex: 0 0 auto; margin: .7rem -.15rem 0; padding: .65rem .75rem;
  border-radius: 12px; background: var(--paper); border: 1.5px solid var(--line);
}
.pp-write-peek-label {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem;
  font-family: var(--font-ui); font-weight: 700; font-size: .74rem;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em;
}
.pp-write-peek-label i { color: var(--turq); }
.pp-write-peek-text {
  font-family: var(--font-ui); font-size: .92rem; line-height: 1.5;
  color: var(--ink); max-height: 4.4rem; overflow-y: auto; white-space: pre-wrap;
  margin-bottom: .55rem; word-break: break-word;
}

/* ---------- compact 3-up quick buttons (/ideas) --------------------------- */
.pp-quick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: .8rem .4rem; min-height: 74px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: .78rem; color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
.pp-quick i { font-size: 1.15rem; }
@media (hover: hover) { .pp-quick:hover { border-color: var(--turq); box-shadow: var(--shadow); } }

/* =========================================================================
   HERO — animated brand gradient (turquoise → petrol blue → lime green)
   The whole first screen now sits on a slowly drifting colour field. The
   gradient is oversized (240%) and its position is animated, so the three
   colours flow into each other instead of sitting in fixed bands.
   ========================================================================= */
.pp-hero {
  background: linear-gradient(118deg,
    #00C2C7 0%, #0E93C4 22%, #1E6FB7 46%, #23A98F 70%, #A8E063 100%);
  background-size: 240% 240%;
  animation: pp-hero-flow 16s ease-in-out infinite alternate;
  border-radius: 0 0 2.2rem 2.2rem;
}
@keyframes pp-hero-flow {
  from { background-position: 0% 30%; }
  to   { background-position: 100% 70%; }
}
/* dot texture: was ink on cloud, now white on colour */
.pp-hero::before {
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.4px);
}
/* the corner colour blobs made sense on a pale page; on a colour field
   they just muddy the gradient */
.pp-hero .pp-blob { display: none; }

/* --- copy: dark ink → white ------------------------------------------- */
.pp-hero .text-ink,
.pp-hero h1 { color: #fff; }
/* headline: thin Quicksand (300) — airy and modern instead of extra-bold */
.pp-hero-title {
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: 0.005em;
}
/* gradient line: give the y/g descenders room so nothing clips or overlaps them */
.pp-hero-title .pp-gradient-text {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.pp-hero .pp-hero-sub { color: rgba(255,255,255,.92); }
.pp-hero .text-ink-soft { color: rgba(255,255,255,.85); }
/* second headline line: sunny→lime pops on the blue midsection */
.pp-hero .pp-gradient-text {
  background: linear-gradient(92deg, #FFC629, #A8E063);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- buttons: turquoise-on-turquoise would vanish ---------------------- */
.pp-hero .pp-btn-primary {
  background: var(--sunny); color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.pp-hero .pp-btn-ghost {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.45); backdrop-filter: blur(4px);
}
@media (hover: hover) {
  .pp-hero .pp-btn-ghost:hover { background: rgba(255,255,255,.24); }
}

/* --- marquee + facts on colour ----------------------------------------- */
.pp-hero .pp-marquee-item { color: rgba(255,255,255,.92); }
.pp-hero .pp-flag-img { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.pp-hero .pp-facts { color: rgba(255,255,255,.8); }
.pp-hero .pp-facts b { color: #fff; }

/* --- artwork: soft white halo so the turquoise globe never melts into
       the turquoise end of the gradient (same trap as the old blob) ----- */
.pp-hero-halo {
  position: absolute; inset: -8% -6%;
  background: radial-gradient(closest-side, rgba(255,255,255,.6), rgba(255,255,255,.22) 55%, transparent 74%);
  pointer-events: none;
}
/* no filter on the art: see .pp-hero-float::before for the shadow */
.pp-hero-art { filter: none; }

/* ==========================================================================
   HERO GLOBE — living-art effects
   1) gentle float  2) breathing halo  3) twinkling sparkles  4) shine sweep
   Sparkle positions are % of the 1100x869 artwork so they stay pinned to the
   stars painted in the PNG at every screen size.
   ========================================================================== */

/* 1 · float — the globe hangs in the air and bobs slowly */
.pp-hero-float { animation: pp-float 6.5s ease-in-out infinite; }
/* Ground shadow as a plain gradient ellipse that stays INSIDE the box.
   The old img drop-shadow filter spilled past the box; once the box became
   an animated (composited) layer Safari clipped it into a hard straight line
   under the globe. */
.pp-hero-float::before {
  content: ''; position: absolute; pointer-events: none;
  left: 14%; right: 14%; bottom: 0; height: 8%;
  background: radial-gradient(closest-side, rgba(9, 38, 62, .30), rgba(9, 38, 62, 0));
}
@keyframes pp-float {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50%      { transform: translateY(-11px) rotate(.4deg); }
}

/* 2 · halo breathes (opacity + scale, no layout cost) */
.pp-hero-halo { animation: pp-breathe 5.5s ease-in-out infinite; }
@keyframes pp-breathe {
  0%, 100% { transform: scale(.94); opacity: .75; }
  50%      { transform: scale(1.07); opacity: 1; }
}

/* 3 · sparkles — four-pointed stars, each on its own rhythm */
.pp-spark {
  position: absolute; pointer-events: none; z-index: 2;
  width: var(--s, 22px); height: var(--s, 22px);
  left: var(--x); top: var(--y); margin: calc(var(--s, 22px) / -2) 0 0 calc(var(--s, 22px) / -2);
  background: var(--c, #fff);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95));
  opacity: 0; transform: scale(0) rotate(0deg);
  animation: pp-twinkle var(--d, 3.2s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes pp-twinkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  45%      { opacity: 1; transform: scale(1) rotate(45deg); }
  60%      { opacity: .9; transform: scale(.85) rotate(70deg); }
  85%      { opacity: 0; transform: scale(.2) rotate(110deg); }
}
.pp-spark-1 { --x: 86.5%; --y: 9.2%;  --s: 34px; --c: #FFE27A; --d: 3.4s; --delay: .2s; }  /* big star, top right */
.pp-spark-2 { --x: 18.8%; --y: 90.7%; --s: 30px; --c: #FFE27A; --d: 3.8s; --delay: 1.4s; } /* big star, bottom left */
.pp-spark-3 { --x: 91.8%; --y: 36.1%; --s: 16px; --d: 2.8s; --delay: .9s; }
.pp-spark-4 { --x: 10.5%; --y: 84%;   --s: 14px; --d: 3.1s; --delay: 2.2s; }
.pp-spark-5 { --x: 8%;    --y: 22%;   --s: 20px; --c: #FFF3B8; --d: 4.2s; --delay: 1.9s; }
.pp-spark-6 { --x: 96%;   --y: 66%;   --s: 18px; --c: #FFF3B8; --d: 3.6s; --delay: .6s; }

/* 4 · shine sweep — a soft light band that crosses the artwork every few
   seconds. It is masked with the PNG itself, so it only lights the globe,
   plane and envelopes, never the transparent area around them. */
.pp-hero-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0;
  -webkit-mask: url(/static/brand/hero.png) center / 100% 100% no-repeat;
          mask: url(/static/brand/hero.png) center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  animation: pp-shine 6s ease-in-out 1.2s infinite;
}
@keyframes pp-shine {
  0%        { background-position: 130% 0; }
  40%, 100% { background-position: -30% 0; }
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .pp-hero-float, .pp-hero-halo, .pp-hero-shine { animation: none; }
  .pp-spark { animation: none; opacity: .9; transform: scale(1) rotate(45deg); }
}