@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Instrument+Serif&family=Shippori+Mincho+B1:wght@800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
/* Reloop Design System v0.2.1 — visual layer only. Content/SEO stays owned by v3. */
:root{
  --rl-paper:#F2EFE7;--rl-paper-soft:#ECE9E1;--rl-brand:#FBF9F4;--rl-product:#FBFAF7;--rl-raised:#FFFFFF;
  --rl-night:#1A1813;--rl-night-soft:#2A2721;--rl-night-line:#3A352D;
  --rl-ink:#14130F;--rl-ink-secondary:#3B382F;--rl-muted:#5C594F;--rl-inverse:#F6F3EC;--rl-inverse-muted:#C7C2B5;
  --rl-line-subtle:#E6E2D8;--rl-line-hair:#D6D0C2;--rl-line-control:#8A867A;--rl-line-rule:#14130F;
  --rl-coral-decorative:#DF5F43;--rl-coral:#B8402A;--rl-coral-hover:#9A3220;--rl-coral-active:#7E2818;--rl-coral-tint:#F6E7E2;--rl-coral-dark:#F08B72;
  --rl-brand-jp:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --rl-brand-latin:"Instrument Serif",Georgia,serif;
  --rl-product-jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --rl-product-latin:system-ui,-apple-system,"Segoe UI",sans-serif;--rl-mono:"Geist Mono",ui-monospace,monospace;
  --paper:var(--rl-paper);--white:var(--rl-raised);--ink:var(--rl-ink);--muted:var(--rl-muted);--line:var(--rl-line-hair);
  --coral:var(--rl-coral);--coral-bright:var(--rl-coral-decorative);--peach:var(--rl-coral-tint);--dark:var(--rl-night);
  --max:1240px;--sans:var(--rl-product-jp);
}
html{background:var(--rl-paper)}
body{font-family:var(--rl-product-jp);color:var(--rl-ink);background:var(--rl-paper);letter-spacing:.02em;font-synthesis:none}
:lang(en) body{font-family:var(--rl-product-latin)}
::selection{background:var(--rl-coral-tint);color:var(--rl-ink)}
.brand>span{font-family:var(--rl-brand-latin);font-size:24px;font-weight:400;letter-spacing:-.015em}
.logo,.tiny-loop{color:var(--rl-coral)}
.hero-kicker{font-family:var(--rl-product-jp);font-size:11.5px;line-height:1.4;letter-spacing:.08em;font-weight:500;color:var(--rl-coral)}
.eyebrow,.source-label,.route-visual .micro,.footer-group-title{font-family:var(--rl-mono);letter-spacing:.14em;font-weight:500}
html[lang="ja"] .eyebrow{font-family:var(--rl-product-jp);font-size:11.5px;letter-spacing:.08em;text-transform:none}
.eyebrow .idx,.source-label svg{color:var(--rl-coral)}
/* Brand layer headings */
.hero h1,.section-heading h2,.big-heading,.flow-copy h2,.benefit-heading h2,.faq h2,.closing h2,.home-depth h2,.reading-section>h2,.related-heading h2,.last-cta h2,.hub-guide h2,.subhero h1{
  font-family:var(--rl-brand-jp);font-weight:800;letter-spacing:.01em;line-height:1.45;
}
.hero h1{font-size:56px;line-height:1.42;max-width:11.5em;white-space:normal;margin-left:0}
.subhero h1{font-size:40px;line-height:1.45;max-width:13em;letter-spacing:.01em}
.section-heading h2,.big-heading,.flow-copy h2,.benefit-heading h2,.faq h2,.closing h2,.home-depth h2,.reading-section>h2,.related-heading h2,.last-cta h2,.hub-guide h2{letter-spacing:.01em}
.reading-section>h3,.feature-card h2,.feature-card h3,.usecase h3,.benefit h3,.seq h3{font-family:var(--rl-product-jp);letter-spacing:.005em}
.route-visual h2{font-family:var(--rl-brand-jp);font-weight:800;letter-spacing:.01em;line-height:1.5}
.route-visual .route-number,.process-line b,.seq li:before{font-family:var(--rl-mono);font-variant-numeric:tabular-nums}
.reading-section>p,.pair-box p,.feature-card p,.usecase p,.benefit p,.faq-item .answer{line-height:2}
.btn{border-radius:0;background:var(--rl-coral);color:#fff;font-family:var(--rl-product-jp);font-weight:500;letter-spacing:.03em;transition:background .12s}
.btn:hover{background:var(--rl-coral-hover);transform:none}.btn:active{background:var(--rl-coral-active)}
.btn.dark{background:var(--rl-ink);color:var(--rl-inverse)}.btn.dark:hover{background:var(--rl-ink-secondary)}
.btn.white{background:#fff;color:var(--rl-ink)}.btn.white:hover{background:var(--rl-brand);color:var(--rl-ink)}
.text-link{color:var(--rl-coral);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
.text-link:hover{color:var(--rl-coral-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:0;box-shadow:0 0 0 2px var(--rl-paper),0 0 0 4px var(--rl-ink);position:relative;z-index:2
}
.site-header{background:rgba(242,239,231,.96);border-bottom-color:var(--rl-line-rule)}
.main-nav a{font-family:var(--rl-product-jp);font-size:14px;font-weight:400}
.main-nav a:hover,.main-nav a[aria-current=page],.main-nav a[data-section-current=true]{color:var(--rl-coral);text-decoration:underline;text-underline-offset:6px}
.language{font-family:var(--rl-product-latin);font-size:11.5px;font-weight:500;letter-spacing:.06em}
.menu-toggle{border-radius:0;border-color:var(--rl-line-control);min-width:44px;min-height:44px}
/* Product layer surfaces */
.hero-post.post-front,.slide.cover,.mini-editorial,.static-five>div:first-child,.route-visual.orange{background:var(--rl-coral);color:#fff}
.last-cta,.closing{background:var(--rl-coral);color:#fff}
.last-cta p,.closing p{color:#FBE4DD}
.tip{background:var(--rl-paper-soft)}.tip.warm{background:var(--rl-coral-tint);border-left-color:var(--rl-coral)}
.feature-card,.copy-box,.decision,.pair-box{background:var(--rl-raised);border-color:var(--rl-line-hair)}
.quick-answer,.editorial-table td,.toc a,.related-card,.faq-item,.content-divider{border-color:var(--rl-line-hair)}
.editorial-table th,.checklist{background:var(--rl-paper-soft);color:var(--rl-ink-secondary)}
input,textarea,select{border-color:var(--rl-line-control);background:var(--rl-raised);color:var(--rl-ink)}
.site-footer{background:var(--rl-night);color:var(--rl-inverse)}
.site-footer .footer-about p,.site-footer .footer-bottom,.site-footer .footer-group-title{color:var(--rl-inverse-muted)}
.site-footer .logo{color:var(--rl-coral-dark)}
/* Active static workflow — video is intentionally not part of v0.2.1 */
.workflow .mock-window{border-color:var(--rl-line-hair);box-shadow:none}
.mock-top{background:var(--rl-product);border-bottom-color:var(--rl-line-hair)}
.mock-sidebar{background:var(--rl-raised);border-right-color:var(--rl-line-hair)}
.canvas-paper{box-shadow:none;border:1px solid var(--rl-line-hair)}
/* Accessibility and mobile menu */
body.rl-nav-open{overflow:hidden}
.mobile-nav-close,.mobile-nav-meta{display:none}
@media(max-width:860px){
  .header-inner{height:56px}.main-nav{display:none}.header-cta{display:none}.menu-toggle{display:flex;width:44px;height:44px}
  .header-right .language{display:none}
  .mobile-nav:not([hidden]){position:fixed;inset:56px 0 0;z-index:800;display:flex!important;flex-direction:column;gap:0;padding:16px 20px 24px;background:var(--rl-paper);overflow:auto;border-top:1px solid var(--rl-line-rule)}
  .mobile-nav a{display:flex;align-items:center;min-height:50px;border-bottom:1px solid var(--rl-line-hair);font-family:var(--rl-product-jp);font-size:15px}
  .mobile-nav-close{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0;border:0;border-bottom:1px solid var(--rl-line-rule);background:transparent;font:500 14px/1.5 var(--rl-product-jp)}
  .mobile-nav-meta{display:flex;margin-top:auto;padding-top:24px;gap:12px;flex-wrap:wrap}
  .mobile-nav-meta a{border:1px solid var(--rl-line-control);padding:0 14px;min-height:44px;font-family:var(--rl-product-latin);font-size:12px}
  .subhero h1{font-size:34px}.hero h1{font-size:44px}.wrap{width:calc(100% - 80px)}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 40px)}
  .hero h1{font-size:34px;line-height:1.5;max-width:100%}
  .subhero h1{font-size:27px;line-height:1.5;max-width:100%}
  .section-heading h2,.flow-copy h2,.benefit-heading h2,.faq h2,.closing h2,.home-depth h2,.reading-section>h2,.related-heading h2,.last-cta h2,.hub-guide h2{line-height:1.5;letter-spacing:.01em}
  .hero-actions,.subhero-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .btn,.subhero-actions .btn,.last-cta .btn,.closing-action .btn{width:100%;min-height:52px}
  .hero-actions .text-link{justify-content:center;min-height:44px}
  .section{padding-block:72px}
}
@media(max-width:390px){
  .wrap{width:calc(100% - 40px)}
  .brand>span{font-size:24px}
  .hero h1{font-size:34px}
  .eyebrow{font-size:11px}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 32px)}
  .hero h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* P0 readability floor: body copy 18px; supporting copy and actions 16px. */
.hero-description,.section-heading>p,.benefit-heading>p,.reading-section>p,.reading p,.quick-answer p,.subhero .intro,.feature-card p,.usecase p,.faq-item .answer,.home-depth>p{font-size:18px;line-height:1.7}
.btn,.text-link,.hero-status,.meta-note,.sample-disclaimer,.source-label,.source-body,.related-card p,.partner-intro p,.partner-card>p,.source-note,.feature-boundary,.footer-links a,.footer-bottom,.header-cta{font-size:16px;line-height:1.6}
.hero-status{gap:9px}.status-dot{width:7px;height:7px}.hero-actions .btn{min-height:54px}
.hero-clarification{max-width:48rem;margin-top:16px;font-size:16px;line-height:1.7;color:var(--rl-ink-secondary);border-left:3px solid var(--rl-coral);padding-left:14px}
@media(max-width:560px){.hero-description,.section-heading>p,.benefit-heading>p,.reading-section>p,.reading p,.quick-answer p,.subhero .intro,.feature-card p,.usecase p,.faq-item .answer,.home-depth>p{font-size:18px;line-height:1.7}.btn,.text-link,.hero-status,.meta-note,.sample-disclaimer,.source-label,.source-body,.related-card p,.partner-intro p,.partner-card>p,.source-note,.feature-boundary,.footer-links a,.footer-bottom,.header-cta{font-size:16px}.hero-clarification{font-size:16px}}
@media(max-width:560px){.hero-actions .btn,.hero-actions .text-link{font-size:16px!important}}
@media(max-width:260px){.hero-grid{display:block}.hero-art{display:none}.examples{overflow:hidden}.sample-context,.usecase-grid{grid-template-columns:1fr;min-width:0}.source-heading,.mock-window,.mock-body{width:auto!important;min-width:0;max-width:100%}.deck-track{max-width:100%}.usecase{min-width:0}}