/* Ported from the "Industry" design system (Claude Design project "Wall of
   1K Apps redesign"). Used by every page except the base public/styles.css
   reset (kept only for whatever hasn't been migrated yet). */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

:root{
  --color-bg:rgba(232, 232, 237, 1);
  --color-surface:#e9e9ea;
  --color-text:#1d1f20;
  --color-accent:#5980a6;
  --color-divider:color-mix(in srgb, #1d1f20 16%, transparent);

  --color-accent-100:#eef6ff;
  --color-accent-200:#d6ebff;
  --color-accent-300:#b5d9fd;
  --color-accent-500:#749dc4;
  --color-accent-600:#597ea3;
  --color-accent-700:#416180;
  --color-accent-800:#2c455d;
  --color-accent-900:#1d2d3d;

  /* The only "pop" color in the palette — everything else is the dusty-blue
     ramp above. Reserved for a small number of promotional call-outs (e.g.
     the gift banner) that need to stand out from the rest of the page. */
  --color-pop:#ffc94d;
  --color-pop-edge:#e0a21f;

  /* Reserved for error/danger states (the moderator's refund-failed callout, reject
     button) — the only other departure from the dusty-blue ramp besides pop. */
  --color-danger:#c1432e;
  --color-danger-bg:#fbe9e6;

  --font-heading:"Caveat", cursive;
  --font-body:"Barlow", system-ui, sans-serif;

  --shadow-sm:0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md:0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--color-bg); }
body.landing{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:15px; line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.landing a{ color:var(--color-accent-700); text-decoration:none; }
.landing a:hover{ color:var(--color-accent-800); text-decoration:underline; }
.landing ::selection{ background:var(--color-accent-300); }
.landing .hidden{ display:none !important; }

.l-wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }

/* — header — */
.l-header{ display:flex; align-items:center; gap:20px; padding:22px 0; }
.l-header .brand{ font-family:var(--font-heading); font-weight:600; font-size:22px; letter-spacing:0.02em; color:var(--color-text); }
.l-header .spacer{ flex:1; }
.l-header .wall-link{ font-family:var(--font-heading); font-size:15px; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-accent-700); }
.l-header .wall-link:hover{ text-decoration:none; color:var(--color-accent-800); }

/* — hero — */
.l-hero{ padding:56px 0 0; }
.l-hero-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:56px; align-items:start; }
.l-kicker{ font-family:var(--font-heading); font-size:20px; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-accent-700); margin-bottom:26px; }
.l-hero h1{ font-family:var(--font-heading); font-weight:600; font-size:clamp(40px,7.2vw,104px); line-height:0.96; letter-spacing:-0.025em; margin:0 0 26px; text-wrap:balance; }
.l-hero .lead{ font-size:19px; line-height:1.6; max-width:46ch; margin:0 0 34px; color:var(--color-text); }
.l-bullets{ list-style:none; margin:0 0 38px; padding:0; display:flex; flex-direction:column; gap:14px; max-width:48ch; }
.l-bullets li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.55; }
.l-bullets li i{ flex:none; margin-top:5px; width:9px; height:9px; border:1px solid var(--color-accent-700); }
.l-cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.l-cta-sub{ font-size:14px; color:var(--color-accent-700); }

.l-hero-art{ position:relative; }
.l-hero-art svg{ display:block; filter:drop-shadow(0 18px 28px rgba(29,45,61,0.14)); }
.l-hero-caption{ margin-top:18px; font-family:var(--font-heading); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-accent-700); text-align:right; }

.l-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:0; margin:84px 0 0; border-top:1px solid var(--color-divider); }
.l-stat{ padding:28px 0 28px 28px; border-right:1px solid var(--color-divider); }
.l-stat:first-child{ padding-left:0; }
.l-stat:last-child{ border-right:none; }
.l-stat b{ display:block; font-family:var(--font-heading); font-weight:600; font-size:46px; line-height:1; }
.l-stat span{ display:block; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent-700); margin-top:6px; }

/* — buttons / inputs / tags (Industry component classes, blueprint variant) — */
.landing .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none; font-family:var(--font-heading); font-weight:600; font-size:16px; line-height:1.2; color:var(--color-text); background:transparent; border:1px solid var(--color-divider); padding:14px 26px; letter-spacing:0.04em; }
.landing .btn:hover{ text-decoration:none; }
.landing .btn:disabled{ opacity:0.45; cursor:not-allowed; }
.landing .btn-primary{ background:var(--color-accent); color:var(--color-bg); border-color:var(--color-accent); box-shadow:var(--shadow-md); font-size:24px; white-space:nowrap; }
.landing .btn-primary:hover{ background:var(--color-accent-600); }
.landing .btn-primary:active{ background:var(--color-accent-700); }
.landing .btn-secondary{ background:transparent; }
.landing .btn-secondary:hover{ background:color-mix(in srgb, var(--color-text) 7%, transparent); }
.landing .btn-danger{ background:transparent; border-color:var(--color-danger); color:var(--color-danger); }
.landing .btn-danger:hover{ background:color-mix(in srgb, var(--color-danger) 10%, transparent); }
.landing .btn-block{ width:100%; }

.landing .blueprint{ position:relative; border:1px solid var(--color-divider); }
.landing .blueprint > .corner{ position:absolute; width:11px; height:11px; color:color-mix(in srgb, var(--color-text) 55%, transparent); }
.landing .blueprint > .corner::before, .landing .blueprint > .corner::after{ content:""; position:absolute; background:currentColor; }
.landing .blueprint > .corner::before{ left:5px; top:0; width:1px; height:100%; }
.landing .blueprint > .corner::after{ top:5px; left:0; width:100%; height:1px; }
.landing .blueprint > .corner.tl{ top:-6px; left:-6px; }
.landing .blueprint > .corner.tr{ top:-6px; right:-6px; }
.landing .blueprint > .corner.bl{ bottom:-6px; left:-6px; }
.landing .blueprint > .corner.br{ bottom:-6px; right:-6px; }

.landing .field{ display:block; }
.landing .field > label{ display:block; font-size:12px; margin-bottom:5px; color:color-mix(in srgb, var(--color-text) 70%, transparent); }
.landing .input{ width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:14px; color:var(--color-text); caret-color:var(--color-accent); background:var(--color-surface); border:1px solid var(--color-divider); }
.landing .input:hover{ border-color:color-mix(in srgb, var(--color-text) 45%, transparent); }
.landing .input:focus-visible{ outline:2px solid var(--color-accent); outline-offset:0; border-color:var(--color-accent); }

.landing .tag{ display:inline-block; font-size:11px; letter-spacing:0.02em; padding:3px 10px; }
.landing .tag-accent{ background:var(--color-accent-100); color:var(--color-accent-800); }

.landing .l-gift{ width:fit-content; max-width:100%; background:var(--color-pop); border:2px solid var(--color-pop-edge); color:var(--color-text); border-radius:10px; padding:14px 16px; margin-top:18px; box-shadow:var(--shadow-md); }
.landing .l-gift b{ display:block; font-family:var(--font-heading); font-weight:600; font-size:22px; line-height:1.2; white-space:nowrap; }

/* — wall section — */
.l-wall-section{ padding:120px 0 0; }
.l-wall-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:40px; }
.l-wall-head h2{ font-family:var(--font-heading); font-weight:600; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-0.02em; margin:0 0 12px; }
.l-wall-head p{ margin:0; font-size:17px; color:var(--color-accent-700); }
.l-wall-count{ text-align:right; }
.l-wall-count b{ display:block; font-family:var(--font-heading); font-weight:600; font-size:30px; line-height:1; }
.l-wall-count span{ display:block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent-700); margin-top:4px; }

.l-wall-frame{ position:relative; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); padding:0 28px; box-sizing:border-box; filter:drop-shadow(0 26px 40px rgba(29,45,61,0.13)); }
.l-wall-frame svg{ display:block; width:100%; overflow:hidden; }
.l-wall-frame a{ cursor:pointer; }
.l-wall-frame .l-brick-empty{ cursor:pointer; }

.l-wall-note{ margin:34px 0 0; max-width:74ch; font-size:14px; line-height:1.65; color:var(--color-accent-700); }
.l-wall-note code{ font-family:ui-monospace,monospace; font-size:13px; background:var(--color-accent-100); padding:1px 5px; }

/* — claim section — */
.l-claim{ padding:128px 0 0; }
.l-claim-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:64px; align-items:start; }
.l-claim-grid h2{ font-family:var(--font-heading); font-weight:600; font-size:clamp(32px,4.4vw,58px); line-height:1.02; letter-spacing:-0.02em; margin:0 0 18px; }
.l-claim-grid .l-claim-sub{ margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--color-accent-700); max-width:40ch; }
.l-founding-count{ margin-top:10px; font-size:13px; color:var(--color-accent-700); }

.l-claim-card{ padding:38px; box-shadow:var(--shadow-md); background:var(--color-surface); }
.l-claim-card .l-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.l-claim-card .l-fields .l-span2{ grid-column:span 2; }
.l-claim-card .l-field-hint{ font-size:12px; color:var(--color-accent-700); margin-top:6px; }

.l-icon-row{ margin-top:26px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; }
.l-icon-slot{ width:76px; height:76px; border:1px dashed var(--color-accent-500); display:grid; place-items:center; color:var(--color-accent-700); font-family:var(--font-heading); font-size:12px; letter-spacing:0.1em; background-size:cover; background-position:center; overflow:hidden; }
.l-icon-slot span{ pointer-events:none; }
.l-icon-hint{ font-size:12px; color:var(--color-accent-700); margin-top:8px; }

.l-tier-label{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent-700); margin-bottom:12px; }
.l-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:14px; }
.l-tier-card{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; text-align:left; padding:16px 18px; cursor:pointer; font-family:var(--font-body); border:1px solid var(--color-divider); background:transparent; }
.l-tier-card.selected{ border:2px solid var(--color-accent); background:var(--color-accent-100); box-shadow:var(--shadow-sm); padding:15px 17px; }
.l-tier-card .price{ font-family:var(--font-heading); font-weight:600; font-size:28px; line-height:1; }
.l-tier-card .desc{ font-size:13px; color:var(--color-accent-700); }

.l-consent{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; font-size:13px; line-height:1.6; color:var(--color-accent-700); }
.l-consent input{ margin-top:4px; accent-color:var(--color-accent); flex:none; }

.l-turnstile{ margin-top:22px; }
.l-form-error{ font-size:13px; color:#a33; margin-top:14px; }
.l-form-hint{ margin-top:14px; font-size:12px; color:var(--color-accent-700); text-align:center; }

/* — footer — */
.l-footer{ margin:128px auto 0; padding:34px 0 56px; border-top:1px solid var(--color-divider); display:flex; align-items:baseline; gap:28px; flex-wrap:wrap; }
.l-footer .brand{ font-family:var(--font-heading); font-weight:600; font-size:18px; color:var(--color-text); }
.l-footer a{ font-size:14px; }
.l-footer .spacer{ flex:1; }
.l-footer .copy{ font-size:13px; color:var(--color-accent-700); }

/* — scroll reveal — */
/* Content is visible by default; wall.js opts elements into the fade-in only
   once it has an IntersectionObserver ready to reveal them again, so a JS
   error never leaves the page permanently blank. */
.landing [data-reveal].pre{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.landing [data-reveal].pre.in{ opacity:1; transform:none; }

@media (max-width: 640px){
  .l-claim-card{ padding:24px; }
  .l-claim-card .l-fields{ gap:14px; }
  .landing .l-gift b{ white-space:normal; }
}

/* — app page (public/app.html) — shares the header/footer classes above */
.l-appcard-wrap{ max-width:480px; margin:0 auto; padding:64px 28px 80px; }
.l-appcard{ padding:38px; text-align:center; background:var(--color-surface); box-shadow:var(--shadow-md); }
.l-appcard-icon{ width:96px; height:96px; margin:0 auto 20px; border:1px dashed var(--color-accent-500); overflow:hidden; background-size:cover; background-position:center; }
.l-appcard-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.l-appcard h1{ font-family:var(--font-heading); font-weight:600; font-size:36px; line-height:1.05; margin:0 0 8px; }
.l-appcard .l-app-tagline{ font-size:15px; color:var(--color-accent-700); margin:0 0 14px; }
.l-appcard .l-app-url{ font-size:14px; word-break:break-all; margin-bottom:16px; }
.l-appcard .l-app-pos{ font-family:var(--font-heading); font-size:15px; color:var(--color-accent-700); margin-bottom:30px; }
.l-appcard .l-app-pos b{ color:var(--color-text); font-size:20px; }
.l-share-list{ display:flex; flex-direction:column; gap:10px; }
.l-share-list .btn{ width:100%; }
.l-appcard-hint{ margin-top:18px; font-size:12px; line-height:1.6; color:var(--color-accent-700); }
.l-appcard .error-text{ color:var(--color-danger); font-size:12px; margin-top:10px; text-align:left; }

/* Shared one-line status/subtitle text — used below a card's <h1> wherever a
   page (success, manage) needs it, not just the status card itself. */
.landing .sub{ font-size:15px; color:var(--color-accent-700); margin:0 0 4px; }

/* — status page (public/success.html) — */
.l-status-wrap{ max-width:480px; margin:0 auto; padding:64px 28px 80px; }
.l-status-card{ padding:38px; text-align:center; background:var(--color-surface); box-shadow:var(--shadow-md); }
.l-status-card h1{ font-family:var(--font-heading); font-weight:600; font-size:32px; line-height:1.1; margin:0 0 10px; }
.l-status-card .hint{ margin-top:20px; padding-top:20px; border-top:1px solid var(--color-divider); font-size:13px; line-height:1.6; color:var(--color-accent-700); text-align:left; }
.l-status-card .btn{ margin-top:24px; }

/* — legal pages (terms/privacy/refunds) — */
.l-legal{ max-width:720px; padding:56px 28px 80px; line-height:1.6; }
.l-legal h1{ font-family:var(--font-heading); font-weight:600; font-size:44px; letter-spacing:-0.01em; margin:0 0 6px; }
.l-legal .updated{ color:var(--color-accent-700); font-size:13px; margin:0 0 32px; }
.l-legal h2{ font-family:var(--font-heading); font-weight:600; font-size:26px; margin:34px 0 8px; }
.l-legal p{ font-size:15px; margin:0 0 12px; }
.l-legal ul{ margin:0 0 12px; padding-left:20px; }
.l-legal li{ font-size:15px; margin:0 0 6px; }
.l-legal code{ font-family:ui-monospace,monospace; font-size:13px; background:var(--color-accent-100); padding:1px 5px; }
.l-legal .backlink{ display:inline-block; margin-top:36px; font-family:var(--font-heading); font-size:18px; color:var(--color-accent-700); }
.l-legal .backlink:hover{ color:var(--color-accent-800); }

/* — toast (shared) — */
.l-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--color-accent-900); color:var(--color-bg); font-family:var(--font-heading); font-size:15px; letter-spacing:0.02em; padding:10px 18px; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60; }
.l-toast.show{ opacity:1; }

/* — moderation page (public/ops.html) — internal moderation tool, kept on the
   same look for consistency rather than a separate visual language. */
.l-ops{ max-width:760px; padding:48px 28px 80px; }
.l-ops h1{ font-family:var(--font-heading); font-weight:600; font-size:32px; margin:0 0 24px; }
.l-ops-btnrow{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.l-ops-btnrow .btn{ font-size:15px; padding:10px 20px; }
.l-ops .l-field-hint{ font-size:12px; color:var(--color-accent-700); margin-top:8px; }

.l-attention{ display:none; flex-direction:column; gap:8px; margin:24px 0; padding:16px; border:2px solid var(--color-danger); border-radius:10px; background:var(--color-danger-bg); }
.l-attention.show{ display:flex; }
.l-attention h2{ margin:0; font-family:var(--font-heading); font-weight:600; font-size:18px; color:var(--color-danger); }
.l-attention .item{ font-size:13px; line-height:1.6; }
.l-attention .item b{ color:var(--color-text); }
.l-attention .item code{ font-family:ui-monospace,monospace; font-size:12px; background:var(--color-accent-100); padding:1px 5px; }

.l-queue{ display:flex; flex-direction:column; gap:14px; padding:24px 0; }
.l-queue-row{ display:flex; gap:16px; align-items:center; background:var(--color-surface); border:1px solid var(--color-divider); padding:14px; }
.l-queue-row img{ width:56px; height:56px; border:1px dashed var(--color-accent-500); object-fit:cover; flex-shrink:0; }
.l-queue-row .meta{ flex:1; min-width:0; }
.l-queue-row .meta .name{ font-size:14px; }
.l-queue-row .meta .url{ font-size:13px; word-break:break-all; }
.l-queue-row .meta .tagline, .l-queue-row .meta .email{ font-size:12.5px; color:var(--color-accent-700); }
.l-queue-row .actions{ display:flex; gap:8px; flex-shrink:0; }
.l-queue-row .actions .btn{ font-size:13px; padding:8px 14px; }
.l-queue-empty{ color:var(--color-accent-700); font-size:14px; }

@media (max-width: 640px){
  .l-queue-row{ flex-wrap:wrap; }
  .l-queue-row .actions{ width:100%; justify-content:flex-end; }
}