/* soniru.com — the public website (not the app: the app is www/). Navy + gold like the app; no outside requests
   (the one font is here, Cormorant Garamond's Latin letters, SIL OFL — fonts/cormorantgaramond-OFL.txt). */
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:500 700; font-display:swap; src:url(fonts/cormorant-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{ color-scheme:dark; --bg:#0A0F26; --bg2:#060918; --panel:rgba(255,255,255,.035); --ink:#EDE7D6; --dim:#A9A39A; --gold:#D9B45A; --gold2:#F1DB9C; --line:rgba(233,207,138,.25);
  --serif:"Cormorant Garamond", Georgia, serif; --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif }
*{ box-sizing:border-box }
html{ background:var(--bg2) }
body{ margin:0; min-height:100vh; background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); color:var(--ink); font:16px/1.7 var(--sans); -webkit-text-size-adjust:100% }
a{ color:var(--gold2) }
.wrap{ max-width:720px; margin:0 auto; padding:0 16px }
/* top bar */
.top{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 }
.top .home{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gold); font:600 20px/1 var(--serif); letter-spacing:.2em }
.top .home svg{ width:28px; height:28px; display:block }
.top nav{ display:flex; gap:18px } .top nav a{ color:var(--dim); text-decoration:none; font-size:14px } .top nav a:hover, .top nav a[aria-current]{ color:var(--gold2) }
/* the wordmark: SONIRU with the logo mark as its O (as docs/brand: mark 0.854 em, spacing 1/φ³ em) */
.wm{ display:inline-flex; align-items:center; font:500 clamp(44px,13vw,76px)/1 var(--serif); letter-spacing:.236em; padding-left:.236em; color:var(--gold); white-space:nowrap }
.wm .o{ display:inline-block; width:.854em; height:.854em; margin-right:.236em } .wm .o svg{ width:100%; height:100%; display:block }
/* home */
.hero{ text-align:center; padding:48px 0 30px }
.hero .kana{ display:block; margin-top:10px; color:var(--dim); letter-spacing:.4em; font-size:15px }
.hero h1{ font:500 clamp(26px,6.6vw,36px)/1.25 var(--serif); color:var(--ink); margin:30px 0 10px }
.hero p{ color:var(--dim); margin:0 auto; max-width:30em }
.soon{ display:inline-block; margin-top:26px; padding:10px 22px; border:1.5px solid var(--gold); border-radius:99px; color:var(--gold2); font:600 18px/1.2 var(--serif); letter-spacing:.06em }
.feats{ list-style:none; padding:0; margin:34px 0 0; display:grid; gap:12px }
@media (min-width:620px){ .feats{ grid-template-columns:1fr 1fr } }
.feats li{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px }
.feats b{ display:block; font:600 21px/1.3 var(--serif); color:var(--gold2); margin-bottom:4px }
.feats span{ color:var(--dim); font-size:15px }
.promise{ text-align:center; color:var(--dim); margin:34px 0 0; font-size:15px }
/* text pages (support) */
.page h1{ font:600 34px/1.2 var(--serif); color:var(--gold); margin:28px 0 4px }
.page .sub{ color:var(--dim); margin:0 0 22px }
.page h2{ font:600 22px/1.3 var(--serif); color:var(--gold2); margin:30px 0 8px }
.qa{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:10px 0 }
.qa b{ display:block; color:var(--ink); margin-bottom:4px }
.qa p{ margin:0; color:var(--dim); font-size:15px }
.mail{ display:inline-block; margin:6px 0; padding:10px 20px; border:1.5px solid var(--gold); border-radius:99px; text-decoration:none; font-weight:600 }
/* footer */
footer{ border-top:1px solid var(--line); margin-top:56px; padding:20px 0 40px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--dim); font-size:13.5px }
footer nav{ display:flex; gap:18px } footer a{ color:var(--dim); text-decoration:none } footer a:hover{ color:var(--gold2) }