@import url('./vendor/fonts/fonts.css');
/* Responsive integration of the preserved v4 tokens and components. */
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { min-width:0; }
.public-page { width:100%; max-width:1600px; margin:auto; }
.public-page > div { width:100%; }
.public-page > div > div { padding-left:clamp(20px,3.33vw,48px) !important; padding-right:clamp(20px,3.33vw,48px) !important; }
.public-page nav { flex-wrap:wrap; gap:8px 16px !important; }
.public-page > div > div:has(> nav) { flex-wrap:wrap; gap:16px !important; }
.public-page > div > div:has(> nav) > a img { height:52px !important; }
.hero { grid-template-columns:minmax(0,1.2fr) minmax(180px,.7fr) minmax(0,1fr) !important; gap:24px !important; }
.hero > div { min-width:0; }
h1 { font-size:clamp(60px,6vw,86px) !important; }
.pokemon-wordmark { display:block; width:min(100%,340px); height:auto; margin:0 0 16px; transform:skewX(5deg); filter:none; }
img { max-width:100%; }
.slab-photo { width:100%; height:100%; object-fit:contain; display:block; }
.photo-caption { display:none; }
#live-desk .desk-tight { margin:0; }
#live-desk h3 { font-size:clamp(28px,3.2vw,36px) !important; }
#desk3a h3 { font-size:clamp(32px,3.6vw,42px) !important; }
#live-desk a[href="#composer3a"] { min-height:36px !important; font-size:12px !important; }
img[src*="/logos/"]:not(.pokemon-wordmark) { background:#fff; border-radius:3px; padding:2px; box-sizing:content-box; }
[data-fallback] { display:none !important; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
a,button { transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
a[href*="member.html"] { position:relative; }
a[href*="member.html"]::after { content:'↗'; display:inline-block; margin-left:8px; transition:transform .18s ease; }
a[href*="member.html"]:hover::after { transform:translate(3px,-2px); }
@media(hover:hover) {
 button:not(:disabled):hover,a[href*="member.html"]:hover { transform:translateY(-2px); filter:brightness(1.06); }
 [data-reveal="on"]:has(.slab-photo):hover { translate:0 -4px; }
}
button:not(:disabled):active,a[href*="member.html"]:active { transform:translateY(2px); box-shadow:0 1px 0 var(--outline) !important; }
:focus-visible { outline:3px solid var(--accent) !important; outline-offset:4px; }
button:disabled { cursor:not-allowed !important; opacity:.6; }
.reading-progress { position:fixed; z-index:100; top:0; left:0; width:100%; height:3px; background:#6D28D9; transform-origin:left; transform:scaleX(0); pointer-events:none; }
.member section div { min-width:0; }
.member input:not([type=checkbox]),.member select { max-width:100%; }
.member section > div:has(>button[data-s]) { gap:8px !important; }
@media(max-width:1100px) {
 .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
 .hero > div:last-child { grid-column:1/-1; }
 .public-page [style*="grid-template-columns: repeat(3"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 .member [style*="padding: 64px 72px"] { padding:40px 24px !important; }
}
@media(max-width:700px) {
 .public-page > div > div { padding-top:36px; padding-bottom:36px; }
 .hero { grid-template-columns:minmax(0,1fr) !important; }
 .hero > div:last-child { grid-column:auto; }
 .public-page [style*="display: grid"] { grid-template-columns:minmax(0,1fr) !important; }
 .public-page [style*="grid-template-columns: 104px"] { grid-template-columns:104px minmax(0,1fr) !important; }
 .public-page [style*="display: flex"][style*="gap: 48px"], .public-page [style*="display: flex"][style*="gap: 32px"] { flex-wrap:wrap; gap:24px !important; }
 .public-page [style*="white-space: nowrap"] { white-space:normal !important; }
 .public-page nav { width:100%; }
 .public-page > div > div:has(> nav) > div { margin-left:0 !important; flex-wrap:wrap; }
 .public-page h2,.public-page h3 { font-size:clamp(30px,8vw,48px) !important; overflow-wrap:anywhere; }
 .public-page [style*="min-width: 260px"] { min-width:0 !important; }
 .member [style*="display: grid"] { grid-template-columns:minmax(0,1fr) !important; }
 .member [style*="padding: 64px 72px"], .member [style*="padding: 56px 72px"] { padding:32px 20px !important; }
 .member h1 { font-size:46px !important; }
 .member h2 { font-size:38px !important; }
 .member [style*="border-right: 2px"] { border-right:0 !important; border-bottom:2px solid var(--outline); }
 .member [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap:wrap; }
 .member [style*="padding: 28px"] { padding:20px !important; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
 [data-reveal] { opacity:1 !important; transform:none !important; }
 .reading-progress { display:none; }
 a:hover,button:hover { transform:none !important; }
}
@media(max-width:700px) {
 .hero > div:has(> [style*="position: absolute"]) { max-width:300px; margin:0 auto; width:100%; }
 .public-page [style*="display: flex"] > span { min-width:0; }
 .public-page [style*="display: flex"]:has(> img[src*="usps"]) { flex-wrap:wrap; }
}
@media(max-width:900px) {
 .public-page div:has(> div > button[data-i]) { flex-direction:column; }
 .public-page div:has(> button[data-i]) > span { display:none; }
}
.mobile-menu { display:none; }
.member-header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:2px solid var(--border); background:var(--panel); }
.member-header button,.mobile-menu { min-height:44px; min-width:44px; border:2px solid var(--border); border-radius:8px; background:var(--well); color:var(--text); font-weight:700; padding:0 12px; cursor:pointer; }
.member:not(.review-mode) section > div:has(>button[data-s]), .member:not(.review-mode) div:has(>button[data-v="default"]) { display:none !important; }
@media(max-width:700px) {
 .site-header { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; padding-top:12px !important; padding-bottom:16px !important; }
 .site-header > a { max-width:180px; }
 .site-header .mobile-menu { display:block; }
 .site-header #public-nav { display:none; grid-column:1/-1; }
 .site-header #public-nav[data-open="true"] { display:flex; }
 .site-header > div { grid-column:1/-1; width:100%; justify-content:space-between; gap:6px !important; }
 .site-header > div > a { padding:0 10px !important; font-size:13px !important; }
 .public-page [style*="animation:"][style*="ticker"], .public-page [style*="animation:"][style*="ticker"] * { white-space:nowrap !important; }
 .member .auth-layout > div:nth-child(2) { order:-1; }
}
@media(max-width:700px) {
 .public-page .site-header { grid-template-columns:minmax(0,1fr) auto !important; }
 .site-header #public-nav { display:none !important; }
 .site-header #public-nav[data-open="true"] { display:flex !important; }
}

/* Landing beta: an intro row followed by a distinct, usable watch demo. */
.hero {
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr) !important;
  gap:clamp(28px,4vw,64px) !important;
  align-items:start !important;
}
.hero-copy { grid-column:1; grid-row:1; min-width:0; }
.hero-art {
  grid-column:2;
  grid-row:1;
  position:relative;
  height:430px !important;
  min-width:0;
  margin:0 !important;
  overflow:visible !important;
}
.hero-demo {
  display:grid !important;
  grid-column:1 / -1;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:28px;
  align-items:start;
  width:100%;
  margin-top:0;
}
.hero-demo #composer3a,.hero-demo #hero-signup { margin-top:0 !important; }
.legacy-public-claim { display:none !important; }

@media (max-width:1100px) {
  .hero { grid-template-columns:minmax(0,1fr) !important; }
  .hero-copy { grid-column:1; grid-row:1; }
  .hero-art { grid-column:1; grid-row:2; width:min(100%,480px); margin:0 auto !important; }
  .hero-demo { grid-column:1; grid-row:3; grid-template-columns:minmax(0,1fr); }
}
@media (min-width:701px) {
  .hero-demo > div:last-child { display:flex !important; flex-direction:column; align-self:stretch; gap:10px !important; }
  .hero-demo > div:last-child > div { flex:1 1 0; }
}
/* The slab trio is scaled as a complete composition, never clipped. */
.hero-slab-charizard { left:0 !important; top:0 !important; transform:rotate(-7deg) scale(.65) !important; transform-origin:top left; }
.hero-slab-lugia { right:0 !important; top:98px !important; transform:rotate(5deg) scale(.65) !important; transform-origin:top right; }
.hero-slab-pikachu { left:40px !important; top:207px !important; transform:rotate(-4deg) scale(.65) !important; transform-origin:top left; }
.hero-art > div:last-child { bottom:6px !important; }

@media (max-width:700px) {
  .hero { gap:20px !important; }
  .hero-art { height:430px !important; width:min(100%,300px); overflow:visible !important; }
  .hero-demo { gap:16px; }
  .hero-demo #composer3a,.hero-demo #hero-signup { padding:14px !important; }
  .demo-result-summary { display:grid !important; grid-template-columns:64px minmax(0,1fr) !important; align-items:start !important; }
  .demo-result-photo { grid-column:1; grid-row:1; }
  .demo-result-summary > span { grid-column:1; grid-row:2; margin-top:8px; }
  .demo-result-copy { grid-column:2; grid-row:1; min-width:0; }
  .demo-guide-price { grid-column:1 / -1; grid-row:3; margin:12px 0 0 !important; padding-top:10px; border-top:1px solid var(--border); text-align:left !important; }
  .demo-guide-price > div:first-child { justify-content:flex-start !important; }
}

/* A factual public introduction to Ash. The portrait is the supplied source image. */
.meet-ash { display:grid; grid-template-columns:minmax(250px,.65fr) minmax(0,1.35fr); gap:clamp(28px,5vw,72px); align-items:center; padding:clamp(40px,6vw,80px) 48px; background:var(--card2); border-top:2px solid var(--outline); border-bottom:2px solid var(--outline); }
.meet-ash-portrait { align-self:stretch; min-height:420px; border:2px solid var(--outline); border-radius:18px; overflow:hidden; background:var(--well); box-shadow:0 6px 0 var(--outline); }
.meet-ash-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.meet-ash-kicker { margin:0 0 10px; color:var(--accent-text); font:700 12px/1.2 'Geist Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.meet-ash h2 { margin:0; max-width:18ch; font-size:clamp(32px,4vw,58px); line-height:.98; letter-spacing:-.045em; color:var(--text); }
.meet-ash-copy > p:not(.meet-ash-kicker) { max-width:60ch; color:var(--body); font-size:18px; line-height:1.55; }
.meet-ash-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.meet-ash-columns > div { padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--panel); }
.meet-ash-columns h3 { margin:0 0 8px; font-size:14px; color:var(--text); }
.meet-ash-columns ul { margin:0; padding-left:18px; color:var(--body2); line-height:1.65; }
.meet-ash-cta { display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border:2px solid var(--outline); border-radius:10px; color:var(--accent-ink); background:var(--cta-grad); font-weight:800; text-decoration:none; box-shadow:0 4px 0 var(--outline); }
@media (max-width:700px) { .meet-ash { grid-template-columns:minmax(0,1fr); padding:36px 20px; gap:24px; } .meet-ash-portrait { min-height:360px; max-width:420px; width:100%; margin:0 auto; } .meet-ash-columns { grid-template-columns:minmax(0,1fr); } }


.meet-ash-kicker span { display:inline-flex; margin-left:8px; padding:4px 8px; border-radius:999px; background:var(--panel); border:1px solid var(--border); color:var(--body2); font-size:10px; letter-spacing:.08em; vertical-align:middle; }
.meet-ash-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; margin:24px 0; padding:0; list-style:none; color:var(--body); }
.meet-ash-list li { position:relative; padding-left:20px; line-height:1.45; }
.meet-ash-list li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; }
@media (max-width:700px) { .meet-ash-list { grid-template-columns:minmax(0,1fr); gap:9px; } .meet-ash h2 { font-size:34px; } }

/* Homepage polish: keep Claude v4 voice, fix mobile hero scale */
@media (max-width: 700px) {
  .hero-copy h1, .hero h1 {
    font-size: clamp(40px, 12vw, 56px) !important;
    line-height: 0.92 !important;
  }
  .hero-copy p, .hero p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .hero-art { height: min(430px, 70vw) !important; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .hero-copy h1, .hero h1 { font-size: clamp(56px, 7vw, 72px) !important; }
}

/* Keep the demo "under $" max-price field from clipping digits at the right edge. */
#composer3a input[type="number"] {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding-right:4px;
}
#composer3a > div:nth-of-type(2) {
  grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) minmax(7.5rem,1fr) !important;
}
@media (max-width:700px) {
  #composer3a > div:nth-of-type(2) {
    grid-template-columns:minmax(0,1fr) !important;
  }
}