/* ===========================================================================
   Home page — brand hero, featured release, product lineup, quick links.
   =========================================================================== */

/* ---------- brand-first hero ---------- */
.hero { padding-block:150px 110px; text-align:center; }
.hero-eyebrow { font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
                color:var(--ink-dim); margin-bottom:34px; }
.wordmark { display:inline-flex; align-items:baseline; justify-content:center;
            font-family:var(--brand-sans); font-weight:200; line-height:1;
            font-size:clamp(34px,6.4vw,64px); letter-spacing:.38em;
            color:var(--ink); }
.wordmark svg { height:.656em; width:auto; margin-right:.38em; flex:none; }
.hero h1 { font-size:clamp(19px,2.6vw,25px); font-weight:400; line-height:1.55;
           color:var(--ink); max-width:640px; margin:44px auto 0; }
.hero h1 b { font-weight:700; }
.hero p { color:var(--ink-mid); margin:24px auto 0; max-width:560px; font-size:14.5px; }

.pillars { margin-top:56px; display:flex; gap:0; justify-content:center; flex-wrap:wrap; }
.pillars span { font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); padding:0 28px; }
.pillars span + span { border-left:1px solid var(--line); }
.pillars b { color:var(--teal); font-weight:700; }
.pillars span:nth-child(2) b { color:var(--cyan); }
.pillars span:nth-child(3) b { color:var(--coral); }
/* The label under "Creator Tools". */
.lineup .section-head .sub b { color:var(--cyan); }

/* ---------- featured release card ---------- */
.featured { margin-top:96px; text-align:left;
  background:linear-gradient(160deg,#17171c 0%,#101013 100%);
  border:1px solid var(--line-soft); border-radius:18px; padding:44px 48px;
  display:grid; grid-template-columns:132px 1fr auto; gap:40px; align-items:center;
  position:relative; overflow:hidden; }
.featured::before { content:""; position:absolute; inset:0;
  background:radial-gradient(560px 200px at 82% 0%, rgba(245,180,41,.09), transparent 70%);
  pointer-events:none; }
.featured .appicon { margin:0; }
.featured h2 { font-size:22px; font-weight:700; }
.featured .fdesc { color:var(--ink-mid); font-size:13.5px; margin-top:8px; max-width:460px; }
.featured .factions { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.featured .freassure { font-size:11px; letter-spacing:.06em; color:var(--ink-dim);
  text-align:center; margin:0; }
@media (max-width:760px) {
  .featured { grid-template-columns:1fr; text-align:center; }
  .featured .appicon { margin:0 auto; }
  /* The reassurance line can't sit in a row of buttons — drop it below them. */
  .featured .factions { flex-direction:row; justify-content:center; flex-wrap:wrap; }
  .featured .freassure { flex-basis:100%; }
}
.new-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; background:var(--amber); color:#151004;
  padding:3px 9px; border-radius:3px; margin-bottom:12px; }

/* ---------- lineup rows — compact (Kelly 08/20: the generous 48px/120px
   version read as dead space between apps) ---------- */
.prod-row { display:grid; grid-template-columns:104px 1fr auto; gap:28px; align-items:center;
            padding:24px 0; border-top:1px solid var(--line-soft); }
.prod-row:last-child { border-bottom:1px solid var(--line-soft); }
@media (max-width:680px) {
  .prod-row { grid-template-columns:90px 1fr; }
  .prod-row .row-links { grid-column:1/-1; }
}
.prod-row .appicon { margin:0; }
/* Icons with a product page open it, same as the row's "Learn more". */
.appicon-link { transition:transform .15s ease, filter .15s ease; }
.appicon-link:hover { transform:translateY(-2px); filter:brightness(1.08); }
@media (prefers-reduced-motion:reduce) { .appicon-link:hover { transform:none; } }
.prod-name { font-size:19px; font-weight:700; }
/* "coming", not "soon": .soon is the holding-page container (120px padding,
   centered text) and stacking it on .prod-name was what blew the lineup rows
   up to ~300px tall — the whitespace bug of 08/20. */
.prod-name.coming { color:var(--ink-mid); }
/* Product names take turns too: the first teal, the second cyan. */
.prod-name .prod-link { color:var(--teal); }
.prod-row.second .prod-name .prod-link { color:var(--cyan); }
.prod-name .prod-link:hover { color:var(--ink); text-decoration:none; }
.prod-name .desc { font-weight:400; color:var(--ink-mid); font-size:15px; }
.prod-blurb { color:var(--ink-dim); font-size:13px; margin-top:8px; max-width:540px; }
/* Two buttons side by side; the launch-price tag sits under them, the same
   width as the pair, so it lands in the same place on every row. */
.row-links { display:grid; grid-template-columns:auto auto; justify-content:end; align-items:center;
  gap:10px; font-size:13px; font-weight:700; white-space:nowrap; text-align:center; }
.row-links .launch-tag { grid-column:1 / -1; color:#150B33; font-weight:700; }
@media (max-width:680px) { .row-links { justify-content:start; } }
/* The two actions on a product row are buttons, sized down to sit in a list
   row (Kelly, 10/02/2026): ghost for Learn more, teal for the action. */
.btn-row { font-size:12.5px; padding:9px 16px; }
.row-links span { color:var(--ink-dim); font-weight:400; }
.soon-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:3px 11px; color:var(--ink-dim); }

/* ---------- quick links ---------- */
.quick { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:680px) { .quick { grid-template-columns:1fr; } }
.quick a.card { display:block; border:1px solid var(--line-soft); background:transparent;
  border-radius:14px; padding:30px; overflow:hidden; color:var(--ink-mid); font-size:13px; }
.quick a.card:hover { text-decoration:none; border-color:var(--amber-dim); background:var(--panel); }
.quick b { display:block; color:var(--ink); font-size:14.5px; margin-bottom:8px; }
.quick b::after { content:" →"; color:var(--accent,var(--amber)); }
/* Three cards: the third is the warm one, coral under the orange-to-coral bar. */
.quick a.card:nth-child(3) { --accent:var(--coral);
  --accent-bar:linear-gradient(90deg,var(--orange),var(--coral) 60%,transparent); }

/* ---------- company ---------- */
.company p { max-width:640px; color:var(--ink-mid); font-size:14px; }
/* Revealed only when the API route bounces back to /#signup-error. */
.signup-error { display:none; margin-top:20px; padding:12px 16px; border-radius:8px;
  border:1px solid #5c2626; background:#1c1214; color:#e8a0a0; font-size:12.5px;
  max-width:420px; }
.signup-error:target { display:block; }

.signup { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.signup input { font-family:var(--mono); font-size:13px; background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; color:var(--ink);
  padding:12px 16px; width:min(280px,70vw); outline:none; }
.signup input:focus { border-color:var(--amber-dim); }

/* ---------- holding page (COMING_SOON) ---------- */
/* Centred single column. No product imagery: the point is to say who we are and
   take an email, not to advertise something nobody can buy yet. */
.soon { padding-block:120px 90px; text-align:center; max-width:660px; }
.soon .wordmark { justify-content:center; }
.soon-tagline { margin-top:22px; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-dim); }

.soon h1 { font-size:clamp(19px,2.6vw,25px); font-weight:400; line-height:1.55;
  color:var(--ink); margin:56px auto 0; }
.soon-lede { color:var(--ink-mid); font-size:14.5px; margin:24px auto 0; max-width:540px; }

.soon-status { display:inline-flex; align-items:center; gap:9px; margin-top:40px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mid);
  border:1px solid var(--line); border-radius:99px; padding:7px 18px; }
.soon-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none; }

.soon-ask { color:var(--ink-mid); font-size:13.5px; margin:44px auto 0; max-width:460px; }
.soon-form { justify-content:center; margin-top:20px; }
.soon .signup-error { margin-left:auto; margin-right:auto; text-align:left; }
.soon-fine { margin-top:40px; padding-top:26px; border-top:1px solid var(--line-soft);
  color:var(--ink-dim); font-size:12px; }

@media (max-width:560px) { .soon { padding-block:76px 60px; } }

/* Turnstile widget. order:99 drops it AFTER the button so the email field and
   "Notify me" keep sharing the first row exactly as before; the widget (usually
   invisible, interaction-only) sits on its own line below. Without the order it
   split the row and pushed the button down even while empty. */
.signup .cf-turnstile { order:99; flex-basis:100%; display:flex; justify-content:inherit; margin:0; }
.signup .cf-turnstile:not(:empty) { margin:8px 0 0; }


/* ===========================================================================
   Amberline-first home composition — 08/19/2026.
   From the Arvia concept's vision layer, split back into the per-page files
   so /arvia does not ship the home rules and vice versa. Scoped under
   .home-vision, set by the page's `bodyClass` front matter.
   =========================================================================== */

.home-vision .hero { padding-bottom:26px; }
.home-vision .hero h1 { font-family:var(--brand-sans); font-size:clamp(24px,3vw,34px); font-weight:300; letter-spacing:-.025em; }
.home-vision .hero p { max-width:610px; }
.home-vision .featured { margin-top:72px; grid-template-columns:132px 1fr auto; }
.home-vision .featured h2,
.home-vision .section-head h2 { font-family:var(--brand-sans); }
.home-vision .featured h2 { font-size:32px; font-weight:400; letter-spacing:-.025em; }
.home-vision .featured .fdesc { max-width:520px; }
.home-vision .lineup { padding-top:36px; }
.home-vision .section-head h2 { font-size:34px; font-weight:300; letter-spacing:-.03em; }
.home-vision .company-band { margin-top:92px; padding-block:56px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.home-vision .company-band h2 { font-family:var(--brand-sans); font-size:clamp(34px,4vw,54px); font-weight:300; letter-spacing:-.04em; max-width:720px; }
.home-vision .company-band p { color:var(--ink-mid); max-width:650px; margin-top:18px; font-family:var(--brand-sans); font-size:18px; line-height:1.7; }