/* RIUNIONE BLOG — corporate-aligned (white / cyan / Sora+Noto) */
:root{
  --paper:#fff;--paper2:#f4fafc;--ink:#0e1411;--body:#333;--muted:#54616b;
  --cy:#00c7ff;--cy2:#168ce0;--cy-text:#0a648f;--teal:#003547;--wash:#e5f9ff;--line:#e4ebee;
  --en:'Sora',sans-serif;--jp:'Noto Sans JP',sans-serif;--ease:cubic-bezier(0,0,.1,1);
  --gut:clamp(20px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font-family:var(--jp);color:var(--body);background:var(--paper);font-size:clamp(15.5px,1.05vw,17px);line-height:2.0;letter-spacing:.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}a{color:var(--cy-text);text-decoration:none}
article p a,article li a,.toc a,.crumb a{text-decoration:underline;text-underline-offset:2px}
.en{font-family:var(--en);font-weight:700;letter-spacing:.04em}
.wrap{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
.wide{max-width:1120px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--teal);color:#fff;padding:10px 16px;font-weight:700}.skip:focus{left:8px;top:8px}
:where(a,button,summary):focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
/* header */
.bh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bh .in{max-width:1120px;margin:0 auto;padding:13px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:16px}
.bh .brand{display:flex;align-items:center;gap:10px;font-family:var(--en);font-weight:800;font-size:1.05rem;color:var(--ink)}
.bh .brand img{height:26px;width:auto}
.bh .brand small{font-family:var(--jp);font-weight:700;font-size:.66rem;color:var(--cy-text);letter-spacing:.06em}
.bh .home{font-size:.8rem;font-weight:700;color:var(--cy-text)}
/* breadcrumb */
.crumb{font-size:.76rem;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--cy-text)}
/* article */
article{padding-bottom:60px}
.ahead{padding:34px 0 28px;border-bottom:1px solid var(--line);margin-bottom:38px}
.ahead .cat{display:inline-block;font-family:var(--en);font-weight:700;font-size:.7rem;letter-spacing:.12em;color:#fff;background:linear-gradient(135deg,#1278c4,var(--teal));padding:5px 12px;border-radius:30px;margin-bottom:18px}
.ahead h1{font-size:clamp(27px,4.2vw,44px);line-height:1.32;font-weight:900;color:var(--ink);margin:0 0 18px;letter-spacing:.005em}
.ahead .meta{font-size:.8rem;color:var(--muted);font-family:var(--en);font-weight:600;letter-spacing:.04em}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink);line-height:1.9;margin:6px 0 36px;font-weight:500;letter-spacing:.005em}
article h2{font-size:clamp(22px,2.9vw,32px);font-weight:900;color:var(--ink);line-height:1.42;margin:62px 0 20px;letter-spacing:.004em}
article h2[id]{padding-left:19px;position:relative}
article h2[id]::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:5px;border-radius:4px;background:linear-gradient(180deg,var(--cy),var(--cy2))}
article h3{font-size:clamp(18px,1.95vw,22px);font-weight:800;color:var(--teal);margin:36px 0 12px;letter-spacing:.004em}
article p{margin:0 0 18px}
article strong{color:var(--cy-text);font-weight:700}
article ul,article ol{margin:0 0 22px;padding-left:1.4em}article li{margin-bottom:9px}
article .note{background:var(--wash);border-radius:14px;padding:20px 24px;margin:26px 0;font-size:.94rem;color:var(--teal)}
article .note b{color:var(--cy-text)}
.tbl{width:100%;border-collapse:collapse;margin:24px 0;font-size:.9rem}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.tbl th{background:var(--paper2);font-weight:700;color:var(--teal)}
.tbl thead th{background:var(--teal);color:#fff}
/* CTA card */
.cta{margin:42px 0 0;background:linear-gradient(150deg,#f4fafc,#e5f9ff);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,36px);text-align:center}
.cta h3{font-size:clamp(18px,2.2vw,24px);font-weight:900;color:var(--teal);margin:0 0 10px;border:0;padding:0}
.cta p{color:var(--muted);font-size:.92rem;margin:0 0 20px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--jp);font-weight:700;font-size:1rem;color:#001019;background:linear-gradient(135deg,var(--cy),var(--cy2));padding:15px 32px;border-radius:40px;transition:transform .4s var(--ease),filter .4s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn .ar{font-family:var(--en);font-weight:700}
.btn--ghost{background:#fff;color:var(--cy-text);border:1.6px solid var(--cy-text)}
/* related */
.rel{margin-top:48px;border-top:1px solid var(--line);padding-top:30px}
.rel h2{font-size:1.1rem;border:0;padding:0;margin:0 0 16px}
.rel a{display:block;padding:13px 16px;background:var(--paper2);border-radius:12px;margin-bottom:10px;color:var(--ink);font-weight:700;font-size:.92rem;transition:background .3s}
.rel a:hover{background:var(--wash)}
.rel a span{color:var(--cy-text);font-family:var(--en)}
/* blog index */
.hero-b{background:radial-gradient(120% 100% at 90% -10%,var(--wash),transparent 55%),var(--paper);padding:clamp(50px,8vw,90px) 0 clamp(30px,4vw,46px);text-align:center}
.hero-b .en{font-size:.78rem;letter-spacing:.24em;color:var(--cy-text)}
.hero-b h1{font-size:clamp(28px,5vw,52px);font-weight:900;color:var(--ink);margin:14px 0 12px}
.hero-b p{color:var(--muted);max-width:46ch;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:clamp(30px,5vw,60px) 0 70px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;box-shadow:0 1px 2px rgba(0,53,71,.04)}
.pcard:hover{transform:translateY(-5px);box-shadow:0 28px 52px -26px rgba(0,53,71,.28);border-color:#c9e6f3}
.pcard .ph{aspect-ratio:16/9;background:linear-gradient(135deg,#1278c4,var(--teal));display:flex;align-items:flex-end;padding:16px;color:#fff;font-family:var(--en);font-weight:700;font-size:.7rem;letter-spacing:.1em;position:relative;overflow:hidden}
.pcard .ph::after{content:"";position:absolute;right:-26px;top:-26px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.pcard .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard .cat{font-family:var(--en);font-weight:700;font-size:.66rem;letter-spacing:.1em;color:var(--cy-text);margin-bottom:9px}
.pcard h2{font-size:1.12rem;font-weight:800;color:var(--ink);line-height:1.5;margin:0 0 10px;border:0;padding:0;letter-spacing:.004em}
.pcard p{font-size:.85rem;color:var(--muted);margin:0 0 16px;flex:1}
.pcard .more{font-size:.8rem;font-weight:700;color:var(--cy-text);font-family:var(--en)}
/* footer */
.bf{background:var(--teal);color:#9fc4d2;padding:46px var(--gut);text-align:center;font-size:.84rem}
.bf .brand{font-family:var(--en);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:10px}
.bf nav{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:14px 0}
.bf nav a{color:#9fc4d2}.bf nav a:hover{color:#fff}
.bf .cp{margin-top:14px;font-family:var(--en);font-size:.72rem;color:#7f9fb0}
/* === article visual components === */
.ahero{margin:0 0 30px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--paper2)}
.ahero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
figure{margin:28px 0}
figure img{width:100%;border-radius:14px;border:1px solid var(--line)}
figcaption{font-size:.78rem;color:var(--muted);text-align:center;margin-top:9px}
/* stat callout row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.stat{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center}
.stat .n{font-family:var(--en);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);color:var(--cy-text);line-height:1.05;letter-spacing:.01em}
.stat .n small{font-size:.5em;font-weight:700;margin-left:2px}
.stat .l{font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.5}
/* step flow diagram */
.flowd{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:26px 0;counter-reset:fs}
.flowd .s{flex:1 1 120px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 14px;position:relative;text-align:center}
.flowd .s::before{counter-increment:fs;content:"0" counter(fs);font-family:var(--en);font-weight:800;font-size:.72rem;color:var(--cy);display:block;margin-bottom:8px}
.flowd .s b{font-size:.92rem;color:var(--ink);font-weight:800;display:block;line-height:1.4}
.flowd .s span{font-size:.74rem;color:var(--muted);display:block;margin-top:5px}
.flowd .ar{display:flex;align-items:center;color:var(--cy);font-weight:800;flex:0 0 auto}
@media(max-width:680px){.flowd{flex-direction:column}.flowd .ar{transform:rotate(90deg);align-self:center;padding:2px 0}.stats{grid-template-columns:1fr}}
/* comparison cards */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.ccard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.ccard .h{padding:14px;text-align:center;font-weight:800;font-size:.92rem;background:var(--paper2);color:var(--teal)}
.ccard.win .h{background:linear-gradient(135deg,#1278c4,#0a6e9e);color:#fff}
.ccard ul{list-style:none;margin:0;padding:16px 16px 18px}
.ccard li{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--body);margin-bottom:9px;line-height:1.5}
.ccard li i{flex:none;font-style:normal;font-weight:800}
.ccard li.ok i{color:#178048}.ccard li.no i{color:#c2453c}.ccard li.mid i{color:#8f5f10}
@media(max-width:680px){.ccards{grid-template-columns:1fr}}
/* checklist */
.chk{list-style:none;margin:22px 0;padding:0}
.chk li{position:relative;padding:11px 14px 11px 44px;background:var(--paper2);border-radius:12px;margin-bottom:9px;font-weight:600;color:var(--ink);font-size:.92rem}
.chk li::before{content:"";position:absolute;left:14px;top:13px;width:20px;height:20px;border-radius:50%;background:var(--cy);-webkit-mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");mask:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
/* toc */
.toc{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin:0 0 32px}
.toc p{font-weight:800;color:var(--teal);margin:0 0 10px;font-size:.92rem}
.toc ol{margin:0;padding-left:1.3em}.toc li{margin-bottom:6px;font-size:.88rem}
.toc a{color:var(--cy-text)}
/* pros/cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.pc .b{border-radius:16px;padding:20px 22px}
.pc .pros{background:#eefaf2;border:1px solid #c8ead5}
.pc .cons{background:#fdf1ef;border:1px solid #f2d4cf}
.pc h4{margin:0 0 12px;font-size:.95rem;font-weight:800}
.pc .pros h4{color:#178048}.pc .cons h4{color:#b23a30}
.pc ul{margin:0;padding-left:1.2em}.pc li{font-size:.86rem;margin-bottom:7px}
@media(max-width:680px){.pc{grid-template-columns:1fr}}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
/* premium components */
.pull{margin:38px 0;font-size:clamp(19px,2.2vw,25px);font-weight:800;line-height:1.62;color:var(--teal);padding-left:24px;border-left:4px solid var(--cy);letter-spacing:.004em}
.byline{display:flex;align-items:center;gap:11px;margin:14px 0 0}
.byline .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cy),var(--teal));flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--en);font-weight:800;font-size:.78rem}
.byline .t{font-size:.82rem;color:var(--muted);line-height:1.45}.byline .t b{color:var(--ink);font-weight:700}
.cta-mini{margin:32px 0;background:linear-gradient(120deg,#f4fafc,#e5f9ff);border:1px solid var(--line);border-radius:16px;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cta-mini p{margin:0;font-weight:700;color:var(--teal);font-size:.92rem}
.cta-mini a{font-family:var(--jp);font-weight:700;font-size:.85rem;color:#001019;background:linear-gradient(135deg,var(--cy),var(--cy2));padding:11px 22px;border-radius:30px;white-space:nowrap;transition:filter .3s}
.cta-mini a:hover{filter:brightness(1.07)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}