/* Flapbaseとは (/about). Scoped to .ab-page; header, footer, .flap-aurora-btn and .text-link come
   from flapbase-lp.css / flap-aurora-buttons.css.
   Same world as /creator (creator.css): white ground, pale sky and aurora tints, light type, generous space.
   Bold is for headings only; labels are small Japanese, never uppercase English. */
.ab-page {
  --ab-ink:#27324b; --ab-muted:#58627a; --ab-soft:#7a849a; --ab-line:rgba(45,58,90,.12);
  --ab-sky:#cbe7ff; --ab-mint:#c6f4e5; --ab-lavender:#dfd6ff; --ab-pink:#ffddec;
  --ab-prism:linear-gradient(100deg,#7fdfc3,#86c6ff 35%,#b3a2ff 68%,#ffa6cf);
  --ab-gutter:clamp(20px,5vw,64px);
  background:#fff; color:var(--ab-ink); overflow:hidden; word-break:auto-phrase;
  font-family:Inter,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}
.ab-page *,.ab-page *::before,.ab-page *::after { box-sizing:border-box; }
.ab-page h1,.ab-page h2,.ab-page h3 { color:inherit; letter-spacing:.02em; margin-top:0; max-width:none; text-wrap:balance; }
.ab-page h2 { font-size:clamp(26px,3.2vw,38px); font-weight:500; line-height:1.55; margin-bottom:24px; }
.ab-page h3 { font-size:20px; font-weight:600; letter-spacing:.06em; line-height:1.5; margin-bottom:12px; }
.ab-page p { color:var(--ab-muted); font-size:16px; letter-spacing:.03em; line-height:2; margin:0 0 8px; }
.ab-page ol,.ab-page ul { list-style:none; margin:0; padding:0; }
.ab-page img { display:block; height:auto; max-width:100%; }
.ab-section { margin:0 auto; max-width:1120px; padding:clamp(64px,8vw,112px) var(--ab-gutter); }
.ab-phrase { display:inline-block; }
.ab-page .ab-kicker { color:var(--ab-soft); font-size:14px; letter-spacing:.2em; line-height:1.6; margin:0 0 20px; }

/* ── First view: pale sky and aurora behind the headline (the page's own air, not a box) ─────────── */
.ab-hero {
  background:
    radial-gradient(ellipse 46% 60% at 14% 28%,rgba(203,231,255,.95),transparent 70%),
    radial-gradient(ellipse 40% 55% at 86% 18%,rgba(223,214,255,.85),transparent 70%),
    radial-gradient(ellipse 50% 45% at 70% 88%,rgba(198,244,229,.8),transparent 70%),
    radial-gradient(ellipse 38% 40% at 28% 92%,rgba(255,221,236,.75),transparent 70%),
    #f7fbff;
  isolation:isolate; position:relative; text-align:center;
}
/* Fades the sky into the white page so the next section starts on plain ground. */
.ab-hero::after { background:linear-gradient(180deg,rgba(255,255,255,0) 55%,#fff 100%); content:""; inset:0; pointer-events:none; position:absolute; z-index:-1; }
.ab-hero__inner { margin:0 auto; max-width:920px; padding:clamp(96px,12vw,168px) var(--ab-gutter) clamp(112px,13vw,184px); }
.ab-page .ab-hero h1 { font-size:clamp(30px,4.4vw,56px); font-weight:600; letter-spacing:.02em; line-height:1.45; margin:0 auto 22px; }
.ab-page .ab-hero__lede { color:var(--ab-muted); font-size:clamp(16px,1.6vw,19px); line-height:1.9; margin:0 auto; }
.ab-hero__actions { display:flex; justify-content:center; margin-top:40px; }
.ab-page .flap-aurora-btn { min-height:52px; padding:0 30px; }

/* ── 問い ─────────────────────────────────────────────────────────────────────────────────────── */
.ab-question { padding-top:clamp(24px,3vw,40px); }
.ab-question__body { margin:0 auto; max-width:640px; }

/* ── ひとつの流れ: one thread runs through つくる・届ける・出会う ────────────────────────────── */
.ab-flow { padding-top:clamp(32px,4vw,56px); }
.ab-flow__head { margin:0 auto clamp(56px,7vw,96px); max-width:640px; }
.ab-steps { position:relative; }
/* The thread: a thin aurora line behind the three markers. */
.ab-steps::before { background:linear-gradient(180deg,#86c6ff,#b3a2ff 50%,#7fdfc3); border-radius:2px; bottom:120px; content:""; left:9px; opacity:.7; position:absolute; top:12px; width:2px; }
.ab-step { align-items:center; display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:20px minmax(0,.78fr) minmax(0,1.3fr); position:relative; }
.ab-step + .ab-step { margin-top:clamp(72px,9vw,120px); }
.ab-step__marker { align-self:start; background:#fff; border:2px solid #86c6ff; border-radius:50%; height:20px; margin-top:6px; width:20px; }
.ab-step:nth-child(2) .ab-step__marker { border-color:#b3a2ff; }
.ab-step:nth-child(3) .ab-step__marker { border-color:#7fdfc3; }
.ab-step__text { align-self:start; }
.ab-page .ab-step h3 { font-size:clamp(22px,2.2vw,26px); }
/* Real screens sit on a pale aurora mat, like light behind a window. */
.ab-visual { border-radius:24px; padding:clamp(18px,3vw,36px); position:relative; }
.ab-visual--make { background:radial-gradient(ellipse at 20% 20%,var(--ab-sky),transparent 70%),radial-gradient(ellipse at 90% 90%,var(--ab-lavender),transparent 70%),#f4f8ff; }
.ab-visual--deliver { background:radial-gradient(ellipse at 80% 15%,var(--ab-lavender),transparent 70%),radial-gradient(ellipse at 15% 90%,var(--ab-pink),transparent 70%),#fbf8ff; padding-bottom:clamp(40px,6vw,72px); padding-right:clamp(56px,9vw,112px); }
.ab-visual--meet { background:radial-gradient(ellipse at 15% 20%,var(--ab-mint),transparent 70%),radial-gradient(ellipse at 85% 85%,var(--ab-sky),transparent 70%),#f4fbf9; }
.ab-shot { background:#fff; border:1px solid rgba(45,58,90,.08); border-radius:12px; box-shadow:0 24px 48px -28px rgba(39,50,75,.35); overflow:hidden; }
.ab-shot img { width:100%; }
/* 届ける: the same page on a phone, overlapping the PC view. */
.ab-shot--phone { border-radius:16px; bottom:clamp(18px,3vw,32px); position:absolute; right:clamp(18px,3vw,32px); width:24%; }
/* 出会う: works pile up, one over another. */
.ab-pile { aspect-ratio:16/12; position:relative; }
.ab-pile .ab-shot { position:absolute; width:76%; }
.ab-pile .ab-shot:nth-child(1) { left:0; top:0; }
.ab-pile .ab-shot:nth-child(2) { left:12%; top:15%; }
.ab-pile .ab-shot:nth-child(3) { left:24%; top:30%; }

/* ── 決めるのは、つくる人 ───────────────────────────────────────────────────────────────────── */
.ab-decide { text-align:center; }
.ab-decide__body { margin:0 auto; max-width:620px; }
.ab-roles { align-items:stretch; display:grid; gap:0; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); margin:clamp(48px,6vw,72px) auto 0; max-width:860px; text-align:left; }
.ab-role { border-radius:22px; padding:clamp(24px,3vw,36px); }
.ab-role--ai { background:#f5f8fd; border:1px solid var(--ab-line); }
.ab-role--you { background:#fff; border:1px solid transparent; background-image:linear-gradient(#fff,#fff),var(--ab-prism); background-clip:padding-box,border-box; background-origin:border-box; box-shadow:0 24px 48px -32px rgba(108,92,201,.45); }
.ab-page .ab-role__label { color:var(--ab-soft); font-size:14px; letter-spacing:.14em; margin-bottom:14px; }
.ab-role li { border-top:1px solid var(--ab-line); color:var(--ab-ink); font-size:17px; letter-spacing:.04em; line-height:1.6; padding:14px 0; }
.ab-role li:last-child { padding-bottom:0; }
/* A quiet hand-off between the two: a line that ends in a small chevron. */
.ab-roles__handoff { align-self:center; height:2px; justify-self:center; position:relative; width:40px; background:linear-gradient(90deg,#c9d3e3,#b3a2ff); }
.ab-roles__handoff::after { border-right:2px solid #b3a2ff; border-top:2px solid #b3a2ff; content:""; height:9px; position:absolute; right:0; top:-4px; transform:rotate(45deg); width:9px; }

/* ── 大切にしていること ──────────────────────────────────────────────────────────────────────── */
.ab-values__list { display:grid; gap:clamp(28px,4vw,48px); grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(32px,4vw,48px); }
.ab-value { border-top:1px solid var(--ab-line); padding-top:24px; position:relative; }
.ab-value::before { background:var(--ab-prism); content:""; height:2px; left:0; position:absolute; top:-1px; width:40px; }

/* ── これから: one world, many tastes ─────────────────────────────────────────────────────────── */
.ab-future { align-items:center; display:grid; gap:clamp(36px,6vw,80px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
/* Until the generated image (image-prompts/about.md) arrives: four panes of the same little scene
   (a sun over a horizon), each in its own palette. Same world, different tastes. No text on it. */
.ab-world { aspect-ratio:4/3; border-radius:24px; display:grid; gap:10px; grid-template-columns:1fr 1fr; overflow:hidden; }
.ab-world__pane { border-radius:14px; overflow:hidden; position:relative; }
.ab-world__pane::before { border-radius:50%; content:""; height:26%; left:58%; position:absolute; top:22%; width:19.5%; }
.ab-world__pane::after { border-radius:50% 50% 0 0 / 22% 22% 0 0; bottom:0; content:""; height:34%; left:-10%; position:absolute; width:120%; }
.ab-world__pane--1 { background:linear-gradient(180deg,#d9eeff,#f3f9ff); }
.ab-world__pane--1::before { background:rgba(255,255,255,.95); box-shadow:0 0 40px rgba(255,255,255,.9); }
.ab-world__pane--1::after { background:linear-gradient(180deg,#b8dcf6,#d8ecfb); }
.ab-world__pane--2 { background:linear-gradient(180deg,#d6f6ea,#f2fcf8); }
.ab-world__pane--2::before { background:#fffbe8; }
.ab-world__pane--2::after { background:repeating-linear-gradient(90deg,#a9e6d0 0 6px,#bdeedd 6px 12px); }
.ab-world__pane--3 { background:linear-gradient(180deg,#e7e0ff,#f7f4ff); }
.ab-world__pane--3::before { background:transparent; border:2px solid #9c8ae6; }
.ab-world__pane--3::after { background:transparent; border-top:2px solid #9c8ae6; }
.ab-world__pane--4 { background:linear-gradient(180deg,#ffe3ee,#fff1e8); }
.ab-world__pane--4::before { background:#ffc6a8; }
.ab-world__pane--4::after { background:linear-gradient(180deg,#f8bfd3,#fcd9e4); }

/* ── Closing ──────────────────────────────────────────────────────────────────────────────────── */
.ab-closing {
  background:
    radial-gradient(ellipse 45% 70% at 20% 100%,rgba(203,231,255,.9),transparent 70%),
    radial-gradient(ellipse 45% 70% at 80% 100%,rgba(223,214,255,.85),transparent 70%),
    radial-gradient(ellipse 35% 50% at 50% 110%,rgba(198,244,229,.8),transparent 70%),
    #fff;
  text-align:center;
}
.ab-closing__inner { margin:0 auto; max-width:760px; padding:clamp(96px,11vw,150px) var(--ab-gutter) clamp(104px,12vw,160px); }
.ab-closing__actions { align-items:center; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; margin-top:36px; }
.ab-page .ab-closing .text-link { font-weight:500; }

@media (max-width:860px) {
  .ab-step { align-items:start; gap:16px 18px; grid-template-columns:20px minmax(0,1fr); }
  .ab-step__visual { grid-column:2; }
  .ab-steps::before { bottom:40px; }
  .ab-roles { grid-template-columns:1fr; max-width:520px; }
  .ab-roles__handoff { height:32px; margin:12px 0; width:2px; background:linear-gradient(180deg,#c9d3e3,#b3a2ff); }
  .ab-roles__handoff::after { bottom:0; right:-4px; top:auto; transform:rotate(135deg); }
  .ab-values__list { grid-template-columns:1fr; }
  .ab-future { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .ab-page .ab-hero h1 { font-size:clamp(26px,7.4vw,34px); }
  .ab-hero__inner { padding-top:80px; padding-bottom:104px; }
  .ab-page p { font-size:15px; }
  .ab-visual { border-radius:18px; }
  .ab-visual--deliver { padding-right:clamp(44px,14vw,64px); }
  .ab-shot--phone { width:28%; }
  .ab-decide,.ab-decide__body { text-align:left; }
}