/* ============================================================================
   PALARID FRONT — the first screen a stranger sees · v4.67.0
   ----------------------------------------------------------------------------
   WHAT THIS IS FOR
   A person arrives from a search result or a link, with no account and no
   idea what Palarid is. They decide in a few seconds. This file lays out that
   first screen, and nothing else — the returning-user dashboard keeps its own
   rules in palarid-home.css and palarid-deck.css.

   THE THREE DECISIONS, AND WHERE THEY CAME FROM
   1 · The product is IN the hero, working. Not a screenshot, not a mock: the
       actual task list and the actual assistant maths, live, on the first
       screen. Landing pages that show the product within the first seconds
       out-convert ones that describe it; showing it working is the honest
       version of that, and it doubles as the proof for "stays on this
       device" — the person can watch it happen.
   2 · A bento grid for the seven systems, with the privacy tile as the
       anchor. Seven capabilities in the vertical space of three, with the eye
       given one large entry point. The asymmetry is deliberate and the
       hierarchy is: what you keep private first, then what you can do.
   3 · One dominant action. "Start with today" is the only filled button on
       the screen. Everything else is a link or a quiet control.

   DESIGN GRAMMAR (inherited from the deck, not reinvented)
   Dark field, fine hairlines, one luminous accent, monospaced numerals for
   anything that counts, gold only as a hairline moment. Motion is transform
   and opacity, 160–220ms, and reduced-motion stills all of it.

   Loaded BEFORE palarid-premium.css, which must stay last (release gate).
   ========================================================================== */

/* ----------------------------------------------------------------- 1 · HERO
   Two columns from 900px: the argument on the left, the product on the right.
   Below that, one column, product under the argument — the person reads,
   then touches. */
/* Three classes on purpose. palarid-deck.css sets `.ph-hero.deck { display:
   flex }` at two-class strength, which would beat a one-class grid silently —
   the hero would stack in one column and nothing would report it. Specificity
   is asserted by the release gate, not hoped for. */
.ph-hero.deck.fr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: none;                     /* the deck capped the hero at 68ch; this one is two-up */
  padding-block: clamp(28px, 6vh, 72px) clamp(24px, 4vh, 48px);
}
@media (max-width: 899px) {
  .ph-hero.deck.fr-hero { grid-template-columns: 1fr; gap: 28px; }
}

.fr-copy { max-width: 60ch; }
.ph-hero.deck .fr-copy .ph-h1 {
  font-size: clamp(36px, 5.6vw, 58px);
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 10px 0 0;
}
.ph-hero.deck .fr-copy .ph-sub {
  font-size: clamp(17px, 1.9vw, 19.5px);
  line-height: 1.55;
  margin: 18px 0 26px;
  color: var(--text-soft, #C7C7CE);
  max-width: 52ch;
}

/* The proof list stays: three claims, each linking to its evidence. The
   ticks are drawn, not typed, so they cannot render as tofu. */
.fr-proof { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 9px; font-size: 14px; color: var(--text-soft, #C7C7CE); }
.fr-proof li { display: flex; align-items: flex-start; gap: 10px; }
.fr-proof li::before {
  content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%;
  background: var(--accent-soft, rgba(139,124,246,.14));
  box-shadow: inset 0 0 0 1px rgba(139,124,246,.45);
  -webkit-mask: none;
}
.fr-proof a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.fr-proof a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* -------------------------------------------------------------- 2 · STAGE
   The product, working. One panel, two instruments: Today (a real task list)
   and Ask (real local maths). It is styled as an instrument rather than as a
   marketing card — hairline, dark, tabular numerals — because it IS one. */
.fr-stage {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  padding: 18px;
  display: grid;
  gap: 14px;
}
/* one gold hairline at the top edge: the only gold on the screen */
.fr-stage::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #D8B45E), transparent);
  opacity: .55;
}
.fr-stage-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute, #9B9BA6);
}
.fr-stage-head b { color: var(--text, #F5F5F7); font-weight: 600; letter-spacing: .12em; }
.fr-stage-live { display: inline-flex; align-items: center; gap: 6px; }
.fr-stage-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good, #34D399); box-shadow: 0 0 0 3px rgba(52,211,153,.18); }

.fr-inst { border-radius: 12px; border: 1px solid var(--line-soft, rgba(255,255,255,.06)); background: rgba(0,0,0,.22); padding: 12px 12px 10px; }
.fr-inst-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute, #9B9BA6); margin: 0 0 8px; display: flex; justify-content: space-between; }
.fr-inst-label span { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }

.fr-form { display: flex; gap: 8px; }
.fr-input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.09));
  color: var(--text, #F5F5F7); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px;
  outline: none;
}
.fr-input::placeholder { color: var(--mute, #9B9BA6); }
.fr-input:focus { border-color: var(--accent, #8B7CF6); box-shadow: 0 0 0 3px var(--accent-soft, rgba(139,124,246,.14)); }
.fr-go {
  background: var(--accent, #8B7CF6); color: var(--accent-fg, #08071A); border: 0; border-radius: 9px;
  padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}

.fr-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 14px; }
.fr-row.is-done .fr-row-t { text-decoration: line-through; color: var(--mute, #9B9BA6); }
.fr-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-tick {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line, rgba(255,255,255,.09)); color: var(--mute, #9B9BA6);
  border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font: inherit; display: grid; place-items: center;
}
.fr-tick:hover { border-color: var(--good, #34D399); color: var(--good, #34D399); }
.fr-empty { font-size: 13px; color: var(--mute, #9B9BA6); padding: 8px 2px 2px; }

.fr-answer {
  margin-top: 10px; min-height: 22px; font-size: 15px;
  font-variant-numeric: tabular-nums; line-height: 1.45;
}
.fr-answer b { font-weight: 600; }
.fr-answer .muted { color: var(--mute, #9B9BA6); font-size: 13px; }
.fr-answer .fr-link { color: var(--accent, #8B7CF6); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.fr-stage-foot { font-size: 12px; color: var(--mute, #9B9BA6); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fr-stage-foot b { color: var(--text-soft, #C7C7CE); font-weight: 600; }

/* -------------------------------------------------------------- 3 · BENTO
   Four columns. The privacy tile is the anchor: one column, two rows, on the
   left, because it is the thing this product is FOR. Six systems fill the
   3×2 beside it; the seventh, Explore, runs the full width below as a
   strip — it is the only system that reaches out to the world, and the
   shape says so. */
.fr-bento-h {
  font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.015em; font-weight: 700;
  margin: clamp(28px, 5vh, 56px) 0 6px;
}
.fr-bento-sub { color: var(--mute, #9B9BA6); font-size: 15px; margin: 0 0 20px; max-width: 60ch; }

.fr-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 12px;
}
.fr-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition: transform .18s var(--ease-premium, cubic-bezier(.22,.61,.36,1)), border-color .18s, box-shadow .18s;
  overflow: hidden;
}
.fr-tile:hover { transform: translateY(-2px); border-color: rgba(139,124,246,.45); box-shadow: 0 18px 44px -24px rgba(139,124,246,.35); }
.fr-tile:focus-visible { outline: 2px solid var(--accent, #8B7CF6); outline-offset: 2px; }
.fr-tile-ico { width: 28px; height: 28px; color: var(--accent, #8B7CF6); }
.fr-tile b { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.fr-tile p { margin: 0; font-size: 13.5px; color: var(--text-soft, #C7C7CE); line-height: 1.45; }
.fr-tile ul { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--mute, #9B9BA6); }
.fr-tile ul li::before { content: "·"; margin-right: 6px; color: var(--accent, #8B7CF6); }
.fr-tile-go { position: absolute; right: 14px; top: 14px; color: var(--mute, #9B9BA6); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.fr-tile:hover .fr-tile-go, .fr-tile:focus-visible .fr-tile-go { opacity: 1; transform: none; }

/* the anchor */
.fr-tile-privacy {
  grid-column: 1; grid-row: 1 / span 2;
  background:
    radial-gradient(420px 260px at 20% 0%, rgba(139,124,246,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}
.fr-tile-privacy b { font-size: 20px; }
.fr-tile-privacy p { font-size: 14.5px; }
.fr-tile-privacy .fr-kv { margin-top: auto; display: grid; gap: 8px; font-size: 13px; }
.fr-tile-privacy .fr-kv div { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.06)); }
.fr-tile-privacy .fr-kv span:last-child { color: var(--good, #34D399); font-variant-numeric: tabular-nums; font-weight: 600; }

/* the strip */
.fr-tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 22px; min-height: 0; }
.fr-tile-wide ul { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.fr-tile-wide > div { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }

@media (max-width: 899px) {
  .fr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(130px, auto); }
  .fr-tile-privacy { grid-column: 1 / -1; grid-row: auto; }
  .fr-tile-wide { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fr-tile-wide ul { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
  .fr-bento { grid-template-columns: 1fr; }
  .fr-stage { padding: 14px; }
}

/* ---------------------------------------------------------- 4 · ARRIVAL
   The two hero columns arrive together, the bento a beat later. Reduced
   motion shows everything at once. */
.fr-hero, .fr-bento, .fr-bento-h, .fr-bento-sub { animation: fr-in .5s var(--ease-premium, cubic-bezier(.22,.61,.36,1)) both; }
.fr-bento, .fr-bento-h, .fr-bento-sub { animation-delay: .12s; }
@keyframes fr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fr-hero, .fr-bento, .fr-bento-h, .fr-bento-sub { animation: none; }
  .fr-tile, .fr-tile-go { transition: none; }
}

/* ----------------------------------------------------------- 5 · LIGHT
   The audited light theme keeps its contrast: surfaces lift, hairlines
   darken, nothing else changes. */
[data-theme="light"] .fr-stage { background: linear-gradient(180deg, rgba(0,0,0,.025), rgba(0,0,0,.01)); box-shadow: 0 24px 60px -30px rgba(0,0,0,.25); }
[data-theme="light"] .fr-inst { background: rgba(255,255,255,.6); }
[data-theme="light"] .fr-input { background: #fff; }
[data-theme="light"] .fr-row { background: rgba(0,0,0,.035); }
[data-theme="light"] .fr-tile { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.005)); }