/* Tifinger (tifinger.theill.com). Colours from the app: coral accent, one colour per finger
   (violet = little finger, sky = ring, green = middle, amber = index). Nunito is self-hosted (OFL). */
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url("/fonts/nunito-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#FFFBF7;--paper-2:#FFF2EC;--card:#fff;--ink:#25222C;--ink-2:#5D5967;--line:rgba(37,34,44,.12);
--coral:#E8505B;--coral-ink:#C2323E;--coral-soft:#FDE3E2;
--violet:#9B6CF2;--sky:#40A6F5;--green:#34C38F;--amber:#F5B83D;
--violet-soft:#EDE4FD;--sky-soft:#DDEFFD;--green-soft:#DAF4EA;--amber-soft:#FDF0D3;
--font:ui-rounded,"SF Pro Rounded",Nunito,"Hiragino Maru Gothic ProN","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Noto Sans KR",sans-serif;
--shadow:0 1px 0 rgba(37,34,44,.04),0 22px 44px -26px rgba(37,34,44,.4);--radius:26px;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.6 var(--font);overflow-x:clip}
a{color:var(--coral-ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:12px;z-index:10}.skip:focus{left:16px}
.wrap{width:min(1160px,100% - 40px);margin:0 auto}
.narrow{width:min(760px,100% - 40px)}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.08;margin:0 0 18px;font-weight:850}
h1{font-size:clamp(42px,6.2vw,76px)}h2{font-size:clamp(32px,4.3vw,50px)}h3{font-size:23px;letter-spacing:-.01em;margin-bottom:8px;line-height:1.2}
:lang(ja) :is(h1,h2,h3),:lang(ko) :is(h1,h2,h3){letter-spacing:0;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) h1,:lang(ko) h1{font-size:clamp(36px,5.2vw,62px)}:lang(ja) h2,:lang(ko) h2{font-size:clamp(28px,3.7vw,42px)}
em{font-style:normal;color:var(--coral)}
.lead{font-size:clamp(19px,2vw,22px);color:var(--ink-2);max-width:36em;margin:0}
p{margin:0 0 14px}

/* Header */
.top{position:sticky;top:0;z-index:5;background:rgba(255,251,247,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:850;font-size:23px;letter-spacing:-.01em}
.brand img{width:36px;height:36px}
.top nav{margin-left:auto;display:flex;gap:24px}.top nav a{color:var(--ink-2);text-decoration:none;font-size:17px;font-weight:700}.top nav a:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--coral);color:#fff;font-weight:800;text-decoration:none;border-radius:999px;padding:10px 18px;font-size:16px;line-height:1.2;white-space:nowrap;box-shadow:0 3px 0 #B9343F}
a.pill:hover{background:#DC4450}
.pill svg{width:18px;height:18px;margin-top:-2px;flex:none}
.pill.soon{background:var(--card);color:var(--ink);box-shadow:0 0 0 1.5px var(--line),0 3px 0 rgba(37,34,44,.08);cursor:default}
.pill.big{padding:16px 26px;font-size:18px;white-space:normal;text-align:center}.pill.big svg{width:22px;height:22px}

/* Hero */
.hero{padding:62px 0 34px}
.hero-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center}
.actions{display:flex;gap:22px;align-items:center;margin:30px 0 24px;flex-wrap:wrap}.actions .more{color:var(--ink);font-weight:700}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 11px;font-size:16px;font-weight:700}
.facts svg,.nots svg{width:20px;height:20px;color:var(--green);flex:none}
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:-8% -6% -10% 8%;background:radial-gradient(closest-side,var(--coral-soft),transparent);z-index:-1}

/* A Mac window around a screenshot */
.window{margin:0;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px rgba(37,34,44,.1),0 34px 60px -30px rgba(37,34,44,.5);overflow:hidden}
.window .bar{display:flex;gap:7px;align-items:center;height:30px;padding:0 13px;background:#F4F1EE;border-bottom:1px solid var(--line)}
.window .bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.window .bar i:nth-child(2){background:#FEBC2E}.window .bar i:nth-child(3){background:#28C840}
.window img{width:100%;height:auto;background:#fff}
figure{margin:0}
figcaption{font-size:16px;color:var(--ink-2);margin-top:14px;max-width:46em}

/* The drawn home row */
.homerow{display:flex;justify-content:center;gap:clamp(5px,1vw,12px);padding:34px 0 8px;flex-wrap:nowrap}
.key{position:relative;display:grid;place-items:center;width:clamp(28px,6.4vw,74px);aspect-ratio:1;border-radius:clamp(7px,1.2vw,15px);font-weight:850;font-size:clamp(14px,2.4vw,28px);color:var(--ink);background:var(--card);box-shadow:0 0 0 1.5px var(--line),0 4px 0 rgba(37,34,44,.12)}
.key.v{background:var(--violet-soft)}.key.s{background:var(--sky-soft)}.key.g{background:var(--green-soft)}.key.a{background:var(--amber-soft)}
.key.bump::after{content:"";position:absolute;bottom:16%;left:34%;right:34%;height:3px;border-radius:2px;background:currentColor;opacity:.7}
.key.lit{background:var(--amber);color:#fff;box-shadow:0 0 0 1.5px #E3A52A,0 4px 0 #D3961D,0 0 28px rgba(245,184,61,.6)}
@media (prefers-reduced-motion:no-preference){
.key.lit{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 1.5px #E3A52A,0 4px 0 #D3961D,0 0 6px rgba(245,184,61,.2)}}}
.fingers{display:flex;justify-content:center;gap:8px;margin:14px 0 0}
.fingers span{width:16px;height:16px;border-radius:50%}
.fingers .v{background:var(--violet)}.fingers .s{background:var(--sky)}.fingers .g{background:var(--green)}.fingers .a{background:var(--amber)}.fingers .w{background:#fff;box-shadow:0 0 0 1.5px var(--line)}

/* Sections */
.band{padding:88px 0}
.band.tint{background:var(--paper-2)}
.band.sky{background:linear-gradient(180deg,#E6F3FE,#F4FAFF)}
.band > .wrap > .lead{margin-bottom:38px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 44px;padding:0;list-style:none}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px;box-shadow:var(--shadow)}
.steps p{color:var(--ink-2);margin:0;font-size:17.5px}
.badge{display:flex;gap:6px;align-items:center;height:44px;margin-bottom:14px}
.badge .dot{width:22px;height:22px;border-radius:50%}
.badge .dot.v{background:var(--violet)}.badge .dot.s{background:var(--sky)}.badge .dot.g{background:var(--green)}.badge .dot.a{background:var(--amber)}
.badge .key{width:44px;font-size:20px;border-radius:11px}
.badge .star{width:30px;height:30px;color:var(--amber)}.badge .star.off{color:#E7E1DA}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.split.flip{grid-template-columns:1.2fr .8fr}.split.flip > :first-child{order:2}
.split p{color:var(--ink-2);font-size:19px}
.stages{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.stages li{font-size:15px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.parents{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.panel .window{box-shadow:0 0 0 1px rgba(37,34,44,.1);margin-bottom:22px}
.panel h3{margin-top:4px}.panel p{color:var(--ink-2);margin:0 4px 4px}
.panel h3{margin-left:4px}
.layouts{list-style:none;padding:0;margin:26px 0 18px;display:flex;flex-wrap:wrap;gap:10px}
.layouts li{font-weight:800;font-size:17px;padding:9px 16px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1.5px var(--line),0 3px 0 rgba(37,34,44,.08)}
.layouts li:nth-child(4n+1){background:var(--violet-soft)}.layouts li:nth-child(4n+2){background:var(--sky-soft)}.layouts li:nth-child(4n+3){background:var(--green-soft)}.layouts li:nth-child(4n+4){background:var(--amber-soft)}
.layouts li:last-child{background:var(--card);font-weight:700;color:var(--ink-2)}
.note{color:var(--ink-2);font-size:17px}

/* Private + price */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:88px 0}
.duo section{border-radius:var(--radius);padding:44px}
.coral{background:var(--coral);color:#fff}
.coral em{color:#fff;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.55)}
.coral p{font-size:19px;color:rgba(255,255,255,.94)}
.nots{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.nots li{display:flex;gap:10px;align-items:center;font-weight:700}
.coral .nots svg{color:#fff}
.card-panel{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.card-panel p{color:var(--ink-2);font-size:19px}
.card-panel p:first-of-type{color:var(--ink);font-weight:800;font-size:21px}
.price-tag{display:inline-flex;align-items:baseline;gap:10px;margin:6px 0 20px}
.price-tag b{font-size:48px;font-weight:900;letter-spacing:-.02em;color:var(--coral)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:44px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:20px;padding:14px 34px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:26px;color:var(--coral);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin:0 0 16px}

/* Plain pages */
.page{padding:64px 0 90px}
.page h1{font-size:clamp(38px,5vw,56px)}
.page h2{font-size:26px;margin:38px 0 10px}
.page p{color:var(--ink-2)}
.tips{padding-left:22px;color:var(--ink-2)}.tips li{margin-bottom:10px}
.mailbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin:30px 0;box-shadow:var(--shadow)}
.mailbox h2{margin-top:0}.mailbox p:last-child{margin:0}
.mailbox a.pill{margin-top:6px}
.muted{color:var(--ink-2);font-size:16px;margin-top:40px}

/* Footer (layout B) */
.site-footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:15px;color:var(--ink-2);background:var(--paper)}
.footer-top{display:flex;justify-content:space-between;gap:32px;align-items:flex-start}
.footer-id{max-width:520px}
.footer-brand{display:inline-flex;align-items:center;gap:8px;color:#8A8592;text-decoration:none;font-weight:800;font-size:16px}
.footer-brand img{width:20px;height:20px;filter:grayscale(1);opacity:.7}
.footer-tagline{margin:8px 0 6px}
.footer-made{margin:0}.footer-made a{color:var(--ink-2)}
.footer-side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}.footer-links a{color:var(--ink-2);text-decoration:none;font-weight:700}.footer-links a:hover{color:var(--ink)}
details.language{position:relative}
details.language summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:700;color:var(--ink)}
details.language summary::-webkit-details-marker{display:none}
details.language summary svg{width:18px;height:18px}
details.language summary .chevron{width:14px;height:14px;transition:transform .15s}
details.language:not([open]) summary .chevron{transform:rotate(180deg)}
details.language ul{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);min-width:210px;max-height:70vh;overflow:auto;z-index:6}
details.language li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
details.language li a:hover{background:var(--paper-2)}
details.language li a[aria-current]{font-weight:800}
details.language li svg{width:18px;height:18px;color:var(--coral)}

@media (max-width:900px){
.hero-grid,.split,.split.flip,.parents,.duo,.faq-grid{grid-template-columns:1fr}
.split.flip > :first-child{order:0}
.steps{grid-template-columns:1fr}
.hero{padding-top:40px}.band{padding:64px 0}.duo{padding:64px 0;gap:20px}.duo section{padding:30px}
.top nav{display:none}.top .pill{margin-left:auto}
.footer-top{flex-direction:column}.footer-side{align-items:flex-start}.footer-links{justify-content:flex-start}
details.language ul{right:auto;left:0}
}
@media (max-width:520px){
body{font-size:18px}
.top .pill{font-size:14px;padding:8px 12px}
.brand{font-size:20px}
.facts li{font-size:15px}
.homerow{gap:4px}
}