*{box-sizing:border-box} :root{--bg:#fff;--ink:#172033;--muted:#738096;--line:#e7ebf3;--card:#fff;--soft:#f8faff;--accent:#6565ff;--accent-light:#f0f0ff;--shadow:0 1px 3px #17203308}body{margin:0;background-color:var(--bg);background-image:radial-gradient(#e8edf8 .8px,transparent .8px);background-size:13px 13px;color:var(--ink);font:13px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{height:48px;background:#ffffffed;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 980px)/2));position:sticky;top:0;z-index:4}.brand{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;font-weight:800;text-decoration:none}.brand img{width:19px;height:19px}.brand-muted{color:var(--accent)}.topbar nav{display:flex;align-items:center;gap:14px}.topbar nav a{font-size:11px;color:var(--muted);text-decoration:none}.topbar button{border:1px solid var(--line);border-radius:6px;background:white;color:#5c6880;width:28px;height:28px;cursor:pointer}.page{max-width:570px;width:calc(100% - 28px);margin:0 auto}.intro{text-align:center;padding:22px 0 14px}.intro h1{font-size:23px;line-height:1.3;letter-spacing:-.8px;margin:0 0 4px;font-weight:800}.intro p{font-size:11px;color:var(--muted);margin:0 0 9px}.pills{display:flex;justify-content:center;gap:5px}.pills span{font-size:9px;color:#46536b;border:1px solid var(--line);background:#fff;border-radius:12px;padding:3px 8px}.mailbox,.inbox,.article-card,.benefit-grid article,.use-grid,.steps article,.faq{background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}.mailbox{padding:10px;margin:0 auto 10px}.address-line{display:flex;align-items:center;border:1px solid var(--line);background:#fafbfe;border-radius:6px;padding:0 10px}.address-line input{width:100%;min-width:0;border:0;background:transparent;outline:0;height:38px;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#344057}.icon-button{border:0;background:transparent;color:#9aa5b8;cursor:pointer}.toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.toolbar button{height:29px;background:#fff;border:1px solid var(--line);border-radius:5px;font-size:10px;color:#39465d;cursor:pointer}.toolbar button:hover:not(:disabled){border-color:#bfc5ff;color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}.inbox{overflow:hidden;margin-bottom:21px;min-height:128px}.inbox-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #edf0f6;font-size:11px}.count{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px}.live{color:#0c9f6c;font-size:10px}.live i{display:inline-block;width:5px;height:5px;background:#12b981;border-radius:50%;margin-right:4px}.empty-state{text-align:center;padding:23px 10px 19px;color:#9aa7ba}.envelope{font-size:25px;color:#c7d4e7;line-height:1.1;margin-bottom:7px}.empty-state strong{display:block;font-size:11px;color:#718097;font-weight:600}.empty-state p{font-size:10px;margin:4px 0 0}.messages{display:none}.message{display:flex;gap:10px;padding:12px;border-bottom:1px solid #f0f2f7}.message strong{font-size:11px}.message p{margin:3px 0 0;color:var(--muted);font-size:10px}.article-card{padding:15px 16px;margin:8px 0}.article-card h2{font-size:14px;line-height:1.4;margin:0 0 8px;letter-spacing:-.25px}.article-card p{font-size:11px;line-height:1.65;color:#4f5b70;margin:0 0 7px}.article-card p:last-child{margin-bottom:0}.check-list{padding-left:0;list-style:none;margin:8px 0 0}.check-list li{font-size:10px;margin:4px 0;color:#4d5b70}.check-list li:before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px}.section{margin:22px 0}.section-title{text-align:center;margin:0 0 11px}.section-title h2{font-size:15px;letter-spacing:-.3px;margin:0 0 3px}.section-title p{font-size:10px;color:var(--muted);margin:0}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.benefit-grid article{padding:10px 9px;min-height:93px}.benefit-grid article>span,.step-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--accent-light);color:var(--accent);font-size:14px;margin-bottom:7px}.benefit-grid h3,.steps h3{font-size:10px;margin:0 0 4px}.benefit-grid p,.steps p{font-size:9px;color:var(--muted);line-height:1.5;margin:0}.use-cases{margin-top:24px}.use-grid{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.use-grid>div{padding:10px 9px;border-right:1px solid #edf0f6;border-bottom:1px solid #edf0f6}.use-grid>div:nth-child(4n){border-right:0}.use-grid>div:nth-last-child(-n+4){border-bottom:0}.use-grid b{font-size:9px;display:block}.use-grid b:first-letter{color:var(--accent)}.use-grid p{font-size:9px;color:var(--muted);line-height:1.45;margin:3px 0 0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.steps article{position:relative;text-align:center;padding:14px 10px 12px}.step-no{position:absolute;top:-7px;left:calc(50% - 8px);width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-size:9px}.step-icon{margin:0 auto 7px;width:28px;height:28px;font-size:15px}.steps h3{font-size:10px}.faq{margin:22px auto 28px;overflow:hidden}.faq .section-title{padding:0 8px;margin-bottom:10px}.faq details{border-top:1px solid #f0f2f7;padding:0 12px}.faq summary{list-style:none;cursor:pointer;font-size:10px;font-weight:600;padding:10px 14px 10px 0;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"⌄";position:absolute;right:0;color:#91a0b5}.faq details[open] summary:after{content:"⌃"}.faq details p{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 12px}.footer{min-height:42px;border-top:1px solid var(--line);background:#ffffffed;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px max(20px,calc((100% - 980px)/2));font-size:9px;color:#8995a8}.footer a{color:#8995a8;text-decoration:none;margin:0 5px}.footer-brand{font-weight:700;color:#59667c}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}body.dark{--bg:#111827;--ink:#edf2ff;--muted:#9caac0;--line:#303b50;--card:#172033;--soft:#1b263b;--accent:#9696ff;--accent-light:#2c3154;background-image:radial-gradient(#29364c .8px,transparent .8px)}body.dark .topbar,body.dark .footer{background:#111827ed}body.dark .pills span,body.dark .address-line,body.dark .toolbar button,body.dark .topbar button{background:#172033;color:#dbe4f5}body.dark .article-card p,body.dark .check-list li{color:#b8c5d8}body.dark .mailbox,body.dark .inbox,body.dark .article-card,body.dark .benefit-grid article,body.dark .use-grid,body.dark .steps article,body.dark .faq{box-shadow:none}
@media(min-width:1000px){.page{margin-top:0}.intro{padding-top:24px}}
@media(max-width:520px){.topbar{padding:0 14px}.page{width:calc(100% - 22px)}.intro{padding-top:22px}.intro h1{font-size:21px}.benefit-grid{grid-template-columns:repeat(2,1fr)}.use-grid{grid-template-columns:repeat(2,1fr)}.use-grid>div:nth-child(4n){border-right:1px solid #edf0f6}.use-grid>div:nth-child(2n){border-right:0}.use-grid>div:nth-last-child(-n+4){border-bottom:1px solid #edf0f6}.use-grid>div:nth-last-child(-n+2){border-bottom:0}.steps{grid-template-columns:1fr}.steps article{padding:15px 14px}.footer{padding:12px 14px;flex-wrap:wrap;justify-content:center;text-align:center}.footer>span{width:100%}.toolbar button{font-size:9px}.article-card{padding:13px}.faq summary{font-size:10px}}


/* Responsive readability upgrade: larger type, better touch targets, and tablet/desktop scaling */
html { font-size: 16px; }
body { font-size: 15px; line-height: 1.65; }
.topbar { min-height: 58px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.brand { font-size: 15px; }
.brand img { width: 23px; height: 23px; }
.topbar nav a { font-size: 14px; }
.topbar button { width: 36px; height: 36px; font-size: 16px; }
.page { max-width: 760px; }
.intro { padding-top: 34px; padding-bottom: 20px; }
.intro h1 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -1px; }
.intro p { font-size: 15px; }
.pills span { font-size: 12px; padding: 5px 11px; }
.mailbox { padding: 14px; margin-bottom: 14px; }
.address-line input { height: 48px; font-size: 14px; }
.icon-button { min-width: 38px; min-height: 38px; font-size: 16px; }
.toolbar { gap: 8px; margin-top: 10px; }
.toolbar button { min-height: 42px; font-size: 13px; }
.inbox { min-height: 180px; margin-bottom: 28px; }
.inbox-head { padding: 14px 16px; font-size: 14px; }
.count { min-width: 20px; height: 20px; font-size: 11px; }
.live { font-size: 13px; }
.empty-state { padding: 38px 12px 32px; }
.envelope { font-size: 34px; margin-bottom: 10px; }
.empty-state strong { font-size: 15px; }
.empty-state p { font-size: 13px; }
.article-card { padding: 22px 24px; margin: 12px 0; }
.article-card h2 { font-size: 19px; margin-bottom: 12px; }
.article-card p { font-size: 14px; line-height: 1.8; margin-bottom: 10px; }
.check-list li { font-size: 13px; margin: 7px 0; }
.section { margin: 34px 0; }
.section-title { margin-bottom: 18px; }
.section-title h2 { font-size: 21px; }
.section-title p { font-size: 13px; }
.benefit-grid { gap: 12px; }
.benefit-grid article { padding: 16px; min-height: 130px; border-radius: 11px; }
.benefit-grid article > span, .step-icon { width: 34px; height: 34px; font-size: 18px; margin-bottom: 10px; }
.benefit-grid h3, .steps h3 { font-size: 14px; margin-bottom: 6px; }
.benefit-grid p, .steps p { font-size: 12px; line-height: 1.65; }
.use-grid b { font-size: 12px; }
.use-grid p { font-size: 12px; line-height: 1.6; margin-top: 5px; }
.use-grid > div { padding: 14px; }
.steps { gap: 12px; }
.steps article { padding: 20px 14px 17px; border-radius: 11px; }
.step-icon { margin: 0 auto 10px; }
.faq { margin: 30px auto 42px; }
.faq summary { font-size: 13px; padding: 15px 20px 15px 0; }
.faq details p { font-size: 13px; line-height: 1.7; }
.footer { min-height: 54px; padding-top: 14px; padding-bottom: 14px; font-size: 12px; }
.footer a { font-size: 12px; margin: 0 7px; }

@media (min-width: 1000px) {
  .page { max-width: 860px; }
  .intro { padding-top: 42px; }
  .mailbox, .inbox { border-radius: 12px; }
  .article-card { padding: 25px 28px; }
  .benefit-grid { gap: 14px; }
  .benefit-grid article { padding: 18px; }
  .use-grid > div { padding: 16px; }
  .steps article { padding: 23px 18px 20px; }
}
@media (max-width: 760px) {
  .topbar { padding-left: 18px; padding-right: 18px; }
  .page { width: min(100% - 32px, 620px); }
  .intro { padding-top: 28px; }
  .intro h1 { font-size: clamp(27px, 5vw, 34px); }
  .intro p { font-size: 14px; }
  .article-card { padding: 19px 20px; }
  .article-card h2 { font-size: 18px; }
  .article-card p { font-size: 14px; }
  .benefit-grid article { min-height: 120px; }
  .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .use-grid > div:nth-child(4n) { border-right: 1px solid #edf0f6; }
  .use-grid > div:nth-child(2n) { border-right: 0; }
  .use-grid > div:nth-last-child(-n+4) { border-bottom: 1px solid #edf0f6; }
  .use-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 520px) {
  body { font-size: 15px; }
  .topbar { min-height: 56px; padding-left: 14px; padding-right: 14px; }
  .brand { font-size: 14px; }
  .topbar nav { gap: 9px; }
  .topbar nav a { font-size: 13px; }
  .topbar button { width: 36px; height: 36px; }
  .page { width: calc(100% - 24px); }
  .intro { padding: 25px 0 18px; }
  .intro h1 { font-size: clamp(25px, 7.4vw, 32px); letter-spacing: -.7px; }
  .intro p { font-size: 13px; }
  .pills span { font-size: 11px; padding: 5px 9px; }
  .mailbox { padding: 10px; }
  .address-line input { height: 46px; font-size: 12px; }
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar button { min-height: 43px; font-size: 13px; }
  .inbox-head { padding: 13px 14px; font-size: 13px; }
  .empty-state { padding: 34px 10px 29px; }
  .empty-state strong { font-size: 14px; }
  .empty-state p { font-size: 12px; }
  .article-card { padding: 17px 16px; margin: 10px 0; }
  .article-card h2 { font-size: 17px; }
  .article-card p { font-size: 13px; line-height: 1.75; }
  .check-list li { font-size: 12px; }
  .section { margin: 28px 0; }
  .section-title h2 { font-size: 19px; }
  .section-title p { font-size: 12px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .benefit-grid article { padding: 13px; min-height: 132px; }
  .benefit-grid h3 { font-size: 13px; }
  .benefit-grid p { font-size: 11px; }
  .use-grid > div { padding: 11px 10px; }
  .use-grid b { font-size: 11px; }
  .use-grid p { font-size: 11px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .steps article { padding: 19px 16px 16px; }
  .steps h3 { font-size: 13px; }
  .steps p { font-size: 12px; }
  .faq { margin: 26px auto 32px; }
  .faq summary { font-size: 12px; padding: 14px 20px 14px 0; line-height: 1.5; }
  .faq details p { font-size: 12px; }
  .footer { flex-direction: column; gap: 7px; padding: 14px 12px; }
  .footer a { margin: 0 4px; }
}
@media (max-width: 360px) {
  .page { width: calc(100% - 18px); }
  .intro h1 { font-size: 25px; }
  .pills { gap: 4px; }
  .pills span { font-size: 10px; padding: 4px 7px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { min-height: 0; }
  .toolbar { gap: 6px; }
  .address-line input { font-size: 11px; }
}