/* kyukan.app: tokens follow design/tokens.css (iOS semantic colors, amber accent). */
:root{
  color-scheme:light dark;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --bg:#F2F2F7;--bg-warm:#F1E6DC;--surface:#FFFFFF;
  --label:#000000;--label-2:rgba(60,60,67,.72);--label-3:rgba(60,60,67,.40);
  --sep:rgba(60,60,67,.16);--fill:rgba(120,120,128,.12);
  --accent:#D97A06;--accent-ink:#A85700;--accent-tint:rgba(217,122,6,.13);
  --nav:rgba(242,242,247,.72);--nav-edge:rgba(60,60,67,.18);
  --device-shadow:0 40px 80px -32px rgba(110,62,10,.38),0 2px 8px rgba(0,0,0,.06);
  --card-shadow:0 1px 2px rgba(0,0,0,.04);
  --gutter-l:max(20px,env(safe-area-inset-left));--gutter-r:max(20px,env(safe-area-inset-right));
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000000;--bg-warm:#1B140D;--surface:#1C1C1E;
  --label:#FFFFFF;--label-2:rgba(235,235,245,.68);--label-3:rgba(235,235,245,.38);
  --sep:rgba(84,84,88,.55);--fill:rgba(120,120,128,.24);
  --accent:#F5A524;--accent-ink:#F5A524;--accent-tint:rgba(245,165,36,.17);
  --nav:rgba(10,10,10,.66);--nav-edge:rgba(84,84,88,.6);
  --device-shadow:0 40px 90px -30px rgba(245,165,36,.22),0 2px 8px rgba(0,0,0,.5);
  --card-shadow:none;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--label);
  font-family:var(--font);font-size:1.0625rem;line-height:1.85;letter-spacing:.02em;line-break:strict;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
main{flex:1}
img{max-width:100%;height:auto}
a{color:var(--accent-ink);text-decoration-thickness:.06em;text-underline-offset:.2em;transition:opacity .12s ease-out}
a:active{opacity:.55;transition-duration:0s}
h1,h2,h3{text-wrap:balance;word-break:auto-phrase;font-feature-settings:"palt";color:var(--label)}
p,li,dd{text-wrap:pretty}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:20;background:var(--surface);padding:8px 12px;border-radius:10px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Navigation: translucent material, content scrolls under it */
.nav{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top);background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 .5px 0 var(--nav-edge)}
.nav .wrap{display:flex;align-items:center;gap:8px;height:52px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--label);text-decoration:none;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 .5px var(--sep)}
.nav-links{flex:none}
@media (max-width:429px){.is-doc .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{color:var(--label-2);text-decoration:none;font-size:.8125rem;letter-spacing:.03em;
  padding:6px 9px;border-radius:999px;white-space:nowrap}
.nav-links a[aria-current="page"]{color:var(--label);font-weight:600}
.nav-links a.get{background:var(--label);color:var(--bg);font-weight:600;padding:5px 13px;margin-left:4px}
@media (hover:hover){.nav-links a:hover{color:var(--label);background:var(--fill)}.nav-links a.get:hover{background:var(--label);opacity:.85}}
@media (min-width:640px){.nav-links a{font-size:.875rem;padding:6px 12px}}

/* Press feedback on pointer-down */
.press{transition:transform .14s ease-out,opacity .14s ease-out;touch-action:manipulation}
.press:active{transform:scale(.97);opacity:.85;transition-duration:.06s}

/* Landing: hero */
.hero{background:linear-gradient(180deg,var(--bg-warm) 0%,var(--bg) 100%);margin-top:calc(-52px - env(safe-area-inset-top));padding-top:calc(52px + env(safe-area-inset-top));overflow:hidden}
.hero-grid{display:grid;gap:48px;padding-top:40px;padding-bottom:0;text-align:center;justify-items:center}
.app-icon{width:84px;height:84px;border-radius:19px;box-shadow:0 10px 24px -8px rgba(160,90,10,.45),0 0 0 .5px rgba(0,0,0,.06)}
.app-name{margin:18px 0 0;font-size:.9375rem;font-weight:600;letter-spacing:.04em;color:var(--label-2)}
.app-name span{font-weight:500;color:var(--label-3);margin-left:.4em;letter-spacing:.01em}
.display{margin:10px 0 0;font-size:clamp(2.25rem,1.35rem + 4.2vw,3.75rem);line-height:1.22;font-weight:700;letter-spacing:-.02em}
.lead{margin:20px auto 0;max-width:30em;text-wrap:balance;word-break:auto-phrase;font-size:1.0625rem;line-height:1.9;color:var(--label-2)}
.cta{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.badge{display:inline-block;line-height:0;border-radius:11px}
.badge img{width:162px;height:auto}
.cta-note{margin:0;font-size:.8125rem;color:var(--label-2);letter-spacing:.04em}
.hero-shot{align-self:end}
.device{margin:0;width:min(296px,76vw);padding:10px;border-radius:48px;background:#141416;
  box-shadow:var(--device-shadow),inset 0 0 0 1.5px rgba(255,255,255,.10)}
.device img{display:block;width:100%;height:auto;aspect-ratio:878/1816;object-fit:cover;object-position:top;border-radius:38px}
.hero .device{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0;
  height:min(600px,150vw);overflow:hidden}
.hero .device img{border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (min-width:880px){
  .hero-grid{grid-template-columns:1.15fr .85fr;text-align:left;justify-items:start;align-items:center;padding-top:72px;gap:40px}
  .lead{margin-left:0}
  .cta{align-items:flex-start}
  .hero-shot{justify-self:center;align-self:end}
  .hero .device{height:600px}
}

/* Landing: sections */
.section{padding:88px 0}
.section + .section{padding-top:0}
.eyebrow{margin:0 0 8px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;color:var(--accent-ink)}
.title{margin:0;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.625rem);line-height:1.3;font-weight:700;letter-spacing:-.015em}
.section-head{max-width:40em;margin-bottom:36px}
.features{display:grid;gap:12px}
@media (min-width:700px){.features{grid-template-columns:1fr 1fr;gap:16px}}
.feature{background:var(--surface);border-radius:22px;padding:24px 24px 22px;box-shadow:var(--card-shadow)}
.glyph{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent)}
.glyph svg{width:24px;height:24px}
.feature h3{margin:16px 0 6px;font-size:1.25rem;line-height:1.4;font-weight:700;letter-spacing:-.005em}
.feature p{margin:0;color:var(--label-2);font-size:.9375rem;line-height:1.85}

.split-grid{display:grid;gap:44px;justify-items:center}
.split-copy{max-width:36em}
.split-copy > p{color:var(--label-2);margin:16px 0 0}
.points{list-style:none;margin:28px 0 0;padding:0;border-top:.5px solid var(--sep)}
.points li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:.5px solid var(--sep);font-size:.9375rem;line-height:1.7}
.points svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--accent)}
@media (min-width:880px){.split-grid{grid-template-columns:.85fr 1.15fr;align-items:center;justify-items:start;gap:64px}.split-grid .device{justify-self:center}}

.pricing{text-align:center}
.pricing .section-head{margin-left:auto;margin-right:auto}
.plans{display:grid;gap:12px;max-width:640px;margin:0 auto}
@media (min-width:560px){.plans{grid-template-columns:1fr 1fr}}
.plan{position:relative;background:var(--surface);border-radius:22px;padding:26px 20px 22px;box-shadow:var(--card-shadow);border:1.5px solid transparent}
.plan.featured{border-color:var(--accent)}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
  font-size:.75rem;font-weight:700;letter-spacing:.06em;padding:2px 12px;border-radius:999px;white-space:nowrap}
@media (prefers-color-scheme:dark){.plan .tag{color:#1A1206}}
.plan-name{margin:0;font-size:.9375rem;font-weight:600;color:var(--label-2)}
.plan-price{margin:4px 0 0;font-size:2.25rem;line-height:1.3;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-price small{font-size:.9375rem;font-weight:500;color:var(--label-2);letter-spacing:.02em;margin-left:2px}
.plan-note{margin:6px 0 0;font-size:.875rem;color:var(--label-2)}
.fine{max-width:40em;margin:24px auto 0;font-size:.8125rem;line-height:1.85;color:var(--label-2);text-align:left;letter-spacing:.03em}
.pricing .cta{margin-top:32px;align-items:center}
.care{padding:0 0 72px}
.care p{max-width:40em;margin:0 auto;padding:18px 20px;border-radius:16px;background:var(--fill);font-size:.8125rem;line-height:1.85;color:var(--label-2)}

/* Documents: support, privacy, terms, 特商法 */
.doc{padding:40px 0 72px}
.prose{max-width:38em;margin:0 auto}
.prose h1{margin:0 0 6px;font-size:clamp(1.75rem,1.4rem + 1.6vw,2.375rem);line-height:1.35;font-weight:700;letter-spacing:-.015em}
.prose h2{margin:2.4em 0 .5em;font-size:1.25rem;line-height:1.5;font-weight:700;letter-spacing:0}
.prose p,.prose ul,.prose dl{margin:0 0 1.05em}
.prose ul{padding-left:1.25em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--label-3)}
.prose .meta{color:var(--label-2);font-size:.875rem;margin-bottom:2em}
.prose .card{background:var(--surface);border-radius:18px;padding:6px 20px;margin:12px 0 0;box-shadow:var(--card-shadow)}
.prose .card p{margin:0;padding:16px 0;font-size:.9375rem;line-height:1.85;color:var(--label-2)}
.prose .card p + p{border-top:.5px solid var(--sep)}
.prose .card b{display:block;margin-bottom:2px;color:var(--label);font-size:1rem}
.prose dl.table{background:var(--surface);border-radius:18px;padding:4px 20px;margin-top:28px;box-shadow:var(--card-shadow)}
.prose dl.table div{padding:14px 0;border-bottom:.5px solid var(--sep)}
.prose dl.table div:last-child{border-bottom:0}
.prose dt{font-weight:600;font-size:.8125rem;letter-spacing:.05em;color:var(--label-2)}
.prose dd{margin:2px 0 0;font-size:.9375rem;line-height:1.85}
@media (min-width:640px){.prose dl.table div{display:grid;grid-template-columns:11em 1fr;gap:16px}.prose dt{padding-top:.15em}.prose dd{margin:0}}

/* Footer */
.foot{border-top:.5px solid var(--sep);padding:28px 0 calc(32px + env(safe-area-inset-bottom));font-size:.8125rem;color:var(--label-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:12px}
.foot a{color:var(--label-2);text-decoration:none}
@media (hover:hover){.foot a:hover{color:var(--label);text-decoration:underline}}
.foot p{margin:0;letter-spacing:.03em}

/* Scroll edge: the bar is clear over the hero and becomes material once content passes under it */
@supports (animation-timeline:scroll()){
  .is-home .nav{animation:nav-edge linear both;animation-timeline:scroll();animation-range:0 64px}
  @keyframes nav-edge{from{background:transparent;box-shadow:0 .5px 0 transparent;-webkit-backdrop-filter:none;backdrop-filter:none}}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  .press:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.is-home .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
}
@media (prefers-contrast:more){
  :root{--label-2:var(--label);--sep:var(--label-3)}
  .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--label)}
  .feature,.plan,.prose .card,.prose dl.table{border:1px solid var(--label-3)}
}