/* One stylesheet for every app site. The reference design (_prompts/site-template/airy) with its colors moved into
   variables; each app sets them in apps/<app>.yaml › theme (written into the page as :root overrides).
   apple-design pass (PROMPT_27, emilkowalski/skills @2d22863): size-specific tracking and leading in rem, an 8 px
   spacing rhythm, press feedback on pointer-down, focus rings, hover only where a mouse hovers, transform/opacity-only
   reveals that reduced motion turns off, a translucent bar with a scroll edge, light/dark tokens, phone frames with
   a lit edge. Nothing here hides content without JavaScript. */
:root{
  color-scheme:light dark;
  --ink:#0B1B2B; --ink-2:#44546A; --ink-3:#5F6E84; --line:#E3E9F0;
  --bg:#FFFFFF; --bg-soft:#F4F8FB; --card:#FFFFFF;
  --btn-bg:#0B1B2B; --btn-fg:#FFFFFF;
  --nav-bg:rgba(255,255,255,.78); --nav-line:rgba(11,27,43,.08);
  --grad:linear-gradient(135deg,#1CC7B4 0%,#3577F0 100%);
  --accent:#0E8F9A; --accent-soft:rgba(20,184,166,.1); --accent-dark:#5EEAD4; --check:#0E8F9A;
  --glow-a:rgba(53,119,240,.16); --glow-b:rgba(28,199,180,.16); --icon-shadow:rgba(53,119,240,.5);
  --dark:#0B1B2B; --phone-ring:rgba(255,255,255,.10); --phone-shade:rgba(11,27,43,.42);
  --radius:24px; --max:1120px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
  :root{--ink:#EEF3F8; --ink-2:#C2CDD9; --ink-3:#97A6B7; --line:#202C39;
        --bg:#0B1117; --bg-soft:#121A23; --card:#141D27; --btn-bg:#EEF3F8; --btn-fg:#0B1117;
        --nav-bg:rgba(11,17,23,.74); --nav-line:rgba(255,255,255,.08);
        --phone-ring:rgba(255,255,255,.16); --phone-shade:rgba(0,0,0,.6)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{font:100%/1.6 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all}
html[lang="ja"] body{font-family:"Pretendard JP Variable","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Hiragino Sans",system-ui,sans-serif;word-break:normal;line-break:strict;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
p,li{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--btn-bg);color:var(--btn-fg);padding:8px 16px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* nav: a translucent layer content scrolls under; the hairline appears only once something is under it */
.nav{position:sticky;top:0;z-index:10;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--nav-line);transition:border-color 200ms ease}
.nav.at-top{border-bottom-color:transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1875rem;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:24px;font-size:.875rem;letter-spacing:.005em;color:var(--ink-2);align-items:center}
.lang{display:flex;gap:2px;background:var(--bg-soft);border-radius:999px;padding:3px}
.lang a{padding:4px 10px;border-radius:999px;font-size:.78125rem;font-weight:600;letter-spacing:.01em;color:var(--ink-3)}
.lang a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(11,27,43,.12)}

/* press feedback on pointer-down (things that look pressable) */
.brand,.lang a,.badge{transition:transform 160ms var(--ease-out)}
.brand:active,.lang a:active,.badge:active{transform:scale(.97)}
.nav-links a,footer a,.toc a,.prose a,.contact a,summary{transition:color 150ms ease,opacity 150ms ease}
.nav-links a:active,footer a:active,.toc a:active,.prose a:active,.contact a:active,summary:active{opacity:.6}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover,footer a:hover{color:var(--ink)}
  .toc a:hover,.prose a:hover,.contact a:hover{text-decoration-color:currentColor}
  summary:hover{color:var(--accent)}
}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 520px at 85% -10%,var(--glow-a),transparent 60%),radial-gradient(900px 480px at -10% 10%,var(--glow-b),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;letter-spacing:.01em;color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
h1{font-size:clamp(2.375rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:16px 0;text-wrap:balance}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
/* line breaks a language needs only on wide or narrow screens: [wide] / [narrow] in apps/<app>.yaml */
.br-wide{display:none}
.nw{white-space:nowrap}                      /* keep a phrase on one line: <span class="nw">…</span> */
@media (min-width:900px){.br-wide{display:inline}.br-narrow{display:none}}
.lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.55;color:var(--ink-2);max-width:32.5em}
.cta{display:flex;gap:16px;align-items:center;margin-top:32px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--btn-bg);color:var(--btn-fg);padding:12px 22px;border-radius:14px;font-weight:700;font-size:.9375rem}
.store small{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.02em;opacity:.75;line-height:1.1}
.store span{line-height:1.15}
.store.soon{cursor:default}
.badge img{height:52px;width:auto}
.cta .sub{font-size:.875rem;color:var(--ink-3)}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:32px;font-size:.875rem;color:var(--ink-2)}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust i{width:18px;height:18px;border-radius:50%;background:var(--grad);display:inline-grid;place-items:center;color:#fff;font-style:normal;font-size:.6875rem;font-weight:800}

/* phone: a dark frame with a lit edge, layered shadow and a faint screen reflection */
.phones{position:relative;height:700px}
.phone{position:absolute;width:280px;border-radius:44px;padding:10px;background:linear-gradient(160deg,#2A3747 0%,#0B1B2B 34%,#0B1B2B 100%);box-shadow:inset 0 0 0 1px var(--phone-ring),0 1px 2px rgba(11,27,43,.08),0 24px 48px -20px var(--phone-shade),0 48px 96px -40px var(--phone-shade)}
.phone img{border-radius:34px;width:100%}
.phone::after{content:"";position:absolute;inset:10px;border-radius:34px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 26%)}
.phone.a{right:150px;top:10px;z-index:2}
.phone.b{right:0;top:80px;transform:rotate(4deg);opacity:.98}

/* stats band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:32px;padding-bottom:32px}
.band b{display:block;font-size:1.375rem;line-height:1.3;letter-spacing:-.02em}
.band p{font-size:.875rem;color:var(--ink-3)}

/* features */
section{padding:112px 0}
.kicker{font-size:.8125rem;font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
h2{font-size:clamp(1.875rem,3.6vw,2.75rem);line-height:1.15;letter-spacing:-.028em;font-weight:800;margin:8px 0 16px;text-wrap:balance}
h3{line-height:1.35;letter-spacing:-.012em}
html[lang="ja"] h1,html[lang="ja"] h2{letter-spacing:-.01em;line-height:1.22;word-break:auto-phrase}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feat + .feat{margin-top:120px}
.feat.rev .shot{order:2}
.feat p.body{font-size:1.125rem;line-height:1.6;color:var(--ink-2);max-width:29.5em}
.feat ul{list-style:none;margin-top:24px;display:grid;gap:12px}
.feat li{display:flex;gap:10px;font-size:1rem;color:var(--ink-2)}
.feat li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:6px;background:var(--grad);mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8.2 13.6 4.6 10l-1.2 1.2 4.8 4.8L17 7.2 15.8 6z"/></svg>') center/16px no-repeat;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8.2 13.6 4.6 10l-1.2 1.2 4.8 4.8L17 7.2 15.8 6z"/></svg>') center/16px no-repeat}
.shot{display:grid;place-items:center;background:var(--bg-soft);border-radius:32px;padding:56px 24px}
.shot .phone{position:relative;width:300px}

/* steps */
.soft{background:var(--bg-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.step .n{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800}
.step h3{font-size:1.1875rem;margin:16px 0 8px}
.step p{color:var(--ink-2);font-size:.96875rem}

/* privacy */
.dark{background:var(--dark);color:#fff}
.dark .kicker{color:var(--accent-dark)}
.dark h2{color:#fff}
.priv{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px}
.pcard b{display:block;font-size:1rem;line-height:1.4;margin-bottom:4px}
.pcard p{font-size:.875rem;color:#A9B8CC}
.dark .lead{color:#C4D0DF}
.dark .shot{background:rgba(255,255,255,.04)}

/* pricing: the highlighted plan sits forward; prices align in tabular figures */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch;text-align:left}
.plans.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column}
.plan.hl{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:0 28px 56px -32px var(--icon-shadow)}
.plan .tag{align-self:flex-start;font-size:.75rem;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--grad);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.plan h3{font-size:1.0625rem;color:var(--ink-2)}
.plan .price{font-size:2.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.plan .price .per{font-size:1rem;font-weight:600;letter-spacing:0}
.plan .per{font-size:.875rem;color:var(--ink-3)}
.plan ul{list-style:none;margin:24px 0 0;display:grid;gap:8px;font-size:.9375rem;color:var(--ink-2)}
.plan li::before{content:"✓ ";color:var(--check);font-weight:800}
.fine{margin:24px auto 0;font-size:.84375rem;line-height:1.65;color:var(--ink-3);max-width:47.5em}

/* faq */
.faq{max-width:780px;margin:48px auto 0}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;list-style:none;font-weight:700;font-size:1.0625rem;line-height:1.45;display:flex;justify-content:space-between;gap:16px;border-radius:8px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--ink-3);transition:transform 200ms var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:8px;color:var(--ink-2);font-size:.96875rem}

/* final cta */
.final{text-align:center;padding:112px 0;background:radial-gradient(800px 400px at 50% 0,var(--glow-a),transparent 70%)}
.final img{width:96px;height:96px;border-radius:22px;margin:0 auto 24px;box-shadow:0 18px 40px -16px var(--icon-shadow)}
.final .cta{justify-content:center}

footer{border-top:1px solid var(--line);padding:40px 0;font-size:.875rem;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer nav{display:flex;gap:8px 24px;flex-wrap:wrap}
footer a{overflow-wrap:anywhere}

.center{text-align:center}
.center .lead{margin:0 auto}

/* documents: privacy, terms, support, 404 (readable 680px column with a table of contents) */
.doc{padding:64px 0 96px}
.doc .wrap{max-width:728px}
.doc h1{font-size:clamp(2rem,4.4vw,2.75rem);line-height:1.15;margin:8px 0}
.doc .updated{font-size:.875rem;color:var(--ink-3)}
.doc .note{margin:24px 0 0;padding:16px;border-radius:16px;background:var(--bg-soft);font-size:.9375rem;color:var(--ink-2)}
.toc{margin:32px 0 8px;padding:16px 24px;border:1px solid var(--line);border-radius:16px}
.toc b{display:block;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.toc ol{margin-left:20px;display:grid;gap:4px;font-size:.9375rem}
.toc a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.prose{font-size:1.03125rem;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:1.375rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:40px 0 8px;scroll-margin-top:88px}
.prose h3{font-size:1.125rem;color:var(--ink);margin:24px 0 8px;scroll-margin-top:88px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin:4px 0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose code{font-size:.92em;background:var(--bg-soft);padding:1px 5px;border-radius:5px}
.prose .original{margin-top:48px;padding-top:8px;border-top:1px solid var(--line)}
.contact{margin-top:32px;padding:24px;border-radius:var(--radius);background:var(--bg-soft)}
.contact b{display:block;font-size:1.0625rem;color:var(--ink);margin-bottom:4px}
.contact a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doc .faq{margin:24px 0 0;max-width:none}
.doc .faq-title{font-size:1.5rem;margin-top:48px}

/* reveal: blocks below the first screen ease in once (site.js marks them .pending; no JS → nothing is hidden) */
.reveal{transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);transition-delay:calc(var(--d,0) * 60ms)}
.reveal.pending{opacity:0;transform:translate3d(0,16px,0)}

/* wide desktops: a wider text column and a larger headline (mobile and tablet unchanged) */
@media (min-width:1200px){
  :root{--max:1240px}                          /* every .wrap, so the bar, hero and sections share one left edge */
  .hero .wrap{grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr)}
  .hero h1{font-size:clamp(4rem,5.2vw,4.5rem)}
  .band b{font-size:1.625rem}
  .band p{font-size:.9375rem}
}
@media (max-width:900px){
  .hero .wrap,.feat,.priv{grid-template-columns:1fr;gap:40px}
  .feat.rev .shot{order:0}
  .phones{height:540px;max-width:440px;margin:0 auto;width:100%}
  .phone{width:240px}
  .phone.a{right:auto;left:0}
  .band .wrap{grid-template-columns:repeat(2,1fr)}
  .steps,.plans,.plans.two{grid-template-columns:1fr}
  .nav-links .hide-m{display:none}
  section{padding:80px 0}
  .feat + .feat{margin-top:80px}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .phones{height:460px}
  .phone{width:200px;border-radius:36px;padding:8px}
  .phone img,.phone::after{border-radius:28px}
  .phone::after{inset:8px}
  .phone.b{right:-6px}
  .shot{padding:40px 16px}
  .shot .phone{width:240px}
  .pgrid{grid-template-columns:1fr}
}
/* the reader's settings win */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .reveal.pending{opacity:1;transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:#8A97A6;--ink-3:var(--ink-2);--nav-line:var(--line)}
  .nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-color-scheme:dark){
  .dark{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
  .lang a.on{box-shadow:none}
}