/* MECHOWL: the header and footer of Review AI — a canonical copy made from MechOwlReview/src/style.css by
   `npm run platform:design` (scripts/platform/design-css.mjs). Do not edit; products copy this file unchanged
   (platform spec ch3 3.1.1, MechOwlReview/docs/platform/03-design.md). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(/calc/fonts/inter-latin-400-800.woff2) format("woff2-variations"),url(/calc/fonts/inter-latin-400-800.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030-203A,U+20AC,U+2122,U+2190-2193,U+2212}
:root{font-family:Inter,"Noto Sans JP",system-ui,sans-serif;color:#193039;background:#f3f5f2;font-synthesis:none}
header{display:flex;justify-content:space-between;align-items:center;padding:23px 5%;background:#fff;border-bottom:1px solid #dce3df}
.brand{font-size:23px;font-weight:750;text-decoration:none;color:#173d3a}
.brand span{font-weight:400}
.header-right,.actions,.pagination,.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.muted,footer{color:#728079;font-size:12px;line-height:1.8}
footer{padding:28px 0}
@media(max-width:850px){header{padding:16px}
.header-right{gap:5px}
.header-right .pill{display:none}}
:root{color:#223c48; background:#f1f4f5; font-family:"Segoe UI","Noto Sans JP",system-ui,sans-serif; --ink:#223c48; --teal:#286d70; --line:#d8e2e5;}
header{padding:14px 3.5%; border-color:var(--line);}
.brand{display:flex; align-items:center; gap:8px; color:var(--ink); font-size:22px; letter-spacing:-.4px;}
.brand img{object-fit:contain;}
body > #app > header + main > aside{font-size:12px;}
@media(max-width:450px){header{padding:12px 16px;}
.brand{font-size:19px; gap:4px;}
.brand img{width:28px; height:32px;}}
:root{--ink:#152b43; --teal:#1e6874; --line:#dce3eb;}
header{padding:12px 3%; border-bottom:1px solid var(--line);}
.product-intro{flex:1; font-size:12px;}
.product-intro h1{font-size:22px;}
@media(max-width:700px){.product-intro{margin-bottom:8px;}
.header-right{flex-wrap:wrap; justify-content:flex-end;}}
header{gap:12px;}
@media(max-width:700px){header .brand{font-size:17px;}
header .header-right{max-width:52%; gap:5px;}
header .header-right button{font-size:11px; padding:6px 8px;}
header .pill{display:none;}}
.product-preview{background:white;border:1px solid #d0dbe7;border-radius:12px;box-shadow:0 12px 32px #253e5710;overflow:hidden}
.site-footer{display:flex; gap:24px; max-width:1480px; margin:auto; padding:24px 5%; border-top:1px solid var(--line);}
.site-footer a{color:#426372; font-size:12px;}
#home-logo[aria-disabled=true]{opacity:.5; cursor:default;}
.owl-avatar{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:none;width:48px;gap:1px;vertical-align:middle}
.owl-avatar>img{display:block;object-fit:contain;width:100%;height:auto}
.owl-avatar>small{display:block;font-size:9px;line-height:1.2;font-weight:600;letter-spacing:0;color:#27515c;white-space:nowrap}
.owl-avatar--home{width:80px}
.owl-avatar--brand{width:36px}
.owl-avatar--brand>small,.owl-avatar--inline>small{font-size:7px}
.owl-avatar--inline{width:28px}
.local-only .owl-avatar{margin-right:8px}
.brand-reading{display:inline-flex;flex-direction:column;align-items:center;flex:none}
.brand-reading small{font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1.5;margin-top:2px}
@media(max-width:700px){.owl-avatar{width:42px}
.owl-avatar--brand{width:28px}
.owl-avatar--home{width:60px}
.owl-avatar--inline{width:28px}
.brand-reading small{font-size:10px}
.owl-avatar--brand>small{font-size:7px}}
:root{--ink:#0d1b2a;--ink-2:#33475b;--muted:#5f7387;--line:#e2e8f0;--bg:#f5f7fa;--surface:#fff;
  --navy:#0b1f33;--navy-2:#11304a;--teal:#0f8b8d;--teal-strong:#0b6f74;--teal-soft:#e2f4f3;--cyan:#5eead4;
  --blue:#1d4f91;--blue-soft:#e7eef9;--green:#15803d;--green-soft:#e6f5ec;--amber:#b45309;--amber-soft:#fdf3e2;
  --radius:16px;--shadow-sm:0 1px 2px rgba(13,27,42,.06),0 1px 3px rgba(13,27,42,.05);--shadow-md:0 12px 32px -12px rgba(13,27,42,.22);
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,monospace;
  font-family:Inter,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;}
header{position:sticky;top:0;z-index:20;padding:12px 3%;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.brand{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.brand span{font-weight:500;color:var(--muted)}
header .pill{background:var(--teal-soft);color:var(--teal-strong);border:1px solid #c5e8e5;letter-spacing:.6px}
header .header-right button{background:transparent;border-color:var(--line);color:var(--ink-2);border-radius:999px;padding:8px 14px;font-weight:600}
header .header-right button:hover:enabled{background:#f0f4f8;filter:none}
.home-title .brand-reading>span{background:linear-gradient(92deg,#5eead4 0%,#7dd3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-title .brand-reading small{color:#8fb1c7;font-weight:600}
.home-hero .owl-avatar--home{width:76px}
.home-hero .owl-avatar>small{color:#cfe3ea}
.product-preview{background:#fff;border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.04);overflow:hidden;color:var(--ink)}
.site-footer{border-top:1px solid var(--line)}
:root{color-scheme:dark;
  --bg:#06111d;--surface:#0c1d30;--surface-2:#10263c;--surface-3:#153049;--line:rgba(148,197,230,.14);--line-strong:rgba(148,197,230,.26);
  --text:#e6eff6;--text-2:#b4c7d6;--muted:#8aa1b5;--ink:#e6eff6;--ink-2:#b4c7d6;
  --teal:#14b8a6;--teal-strong:#2dd4bf;--teal-soft:rgba(45,212,191,.12);--cyan:#5eead4;--sky:#7dd3fc;
  --blue:#7dd3fc;--blue-soft:rgba(125,211,252,.12);--green:#4ade80;--green-soft:rgba(74,222,128,.12);--amber:#fbbf24;--amber-soft:rgba(251,191,36,.12);--red:#f87171;--red-soft:rgba(248,113,113,.14);
  --shadow-sm:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -18px rgba(0,0,0,.8);--shadow-md:0 24px 50px -24px rgba(0,0,0,.9);
  color:var(--text);background:var(--bg);}
html{background:var(--bg)}
.muted,footer{color:var(--muted)}
header{background:rgba(6,17,29,.72);border-bottom:1px solid var(--line)}
.brand{color:#fff}
.brand span{color:var(--muted)}
.owl-avatar>small{color:var(--text-2)}
header .pill{background:var(--teal-soft);color:var(--cyan);border-color:rgba(45,212,191,.3)}
header .header-right button{color:var(--text);border-color:var(--line-strong);background:rgba(255,255,255,.03)}
header .header-right button:hover:enabled{background:rgba(255,255,255,.08)}
.site-footer{border-top:1px solid var(--line)}
.site-footer a{color:var(--text-2)}
.home-speech,.product-preview,.preview-rows p{color:#0d1b2a}
.owl-avatar--mini{width:30px}
.owl-avatar--mini>small{display:none}
.owl-avatar--feedback{width:52px}
@media(max-width:700px){.owl-avatar--feedback{width:38px}}
@media(max-width:700px){.processing-owl .owl-avatar--home{width:56px}}
:root{--text-2:#dbe6ef;--ink-2:#dbe6ef;--muted:#b6c8d6}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-footer{flex-wrap:wrap}
header .header-left{display:flex;align-items:center;gap:12px;min-width:0}
header .header-resume{background:var(--amber-soft,#fff4d6);color:var(--text,#193039);border:1px solid rgba(251,191,36,.55);font-weight:700;white-space:nowrap;font-size:12.5px;padding:6px 12px;min-height:32px;border-radius:999px;line-height:1.2}
.account-menu{position:relative}
header .account-menu-button{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-color:rgba(94,234,212,.45)}
.account-menu-dot{width:8px;height:8px;border-radius:50%;background:var(--muted,#8aa1b5)}
.account-menu-dot.is-on{background:var(--green,#4ade80)}
.account-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:240px;max-width:min(320px,calc(100vw - 24px));background:var(--surface-2,#10263c);border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:10px;padding:8px;box-shadow:var(--shadow-md,0 24px 50px -24px rgba(0,0,0,.9));display:flex;flex-direction:column;gap:2px}
.account-menu-list[hidden]{display:none}
.account-menu-status{margin:4px 8px 8px;font-size:12px;color:var(--text-2,#b4c7d6);overflow-wrap:anywhere;line-height:1.5}
header .account-menu-item{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:6px;padding:10px 12px;font-size:14px;color:var(--text,#e6eff6)}
header .account-menu-item:hover:enabled,header .account-menu-item:focus-visible{background:rgba(255,255,255,.08)}
header .header-right{margin-left:auto}
header .account-menu-button{color:var(--text,#193039);background:rgba(255,255,255,.03)}
@media(max-width:700px){header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"left menu" "right right";row-gap:8px}
header .header-left{grid-area:left}
header .header-right{grid-area:right;max-width:none;justify-content:flex-end}
.account-menu{grid-area:menu;justify-self:end}
header .header-resume{font-size:11px;padding:6px 8px;white-space:normal}
header .account-menu-button{font-size:12px;padding:7px 10px}}
.signup-callout .signup-button,.header-signup{background:#f2b33d;color:#1a1205;border:1px solid #f2b33d;font-weight:700}
.header-account{display:flex;align-items:center;gap:8px}
header .header-signup{padding:9px 14px;border-radius:8px}
@media(max-width:700px){header .header-account{grid-area:menu;justify-self:end}
header .header-signup{font-size:12px;padding:7px 10px}}
.item-owl .owl-avatar{width:44px;flex:none}
@media(max-width:600px){.item-owl .owl-avatar{width:36px}}
.header-credits{display:flex;flex-direction:column;align-items:flex-end;gap:0;margin-right:8px;padding:4px 10px;border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:10px;background:transparent;color:var(--text,#e6eff6);font-size:13px;line-height:1.3;cursor:pointer;min-height:40px;justify-content:center}
.header-credits strong{font-size:14px;color:#fff}
.header-credits-yen{font-size:11.5px;color:var(--text-2,#b4c7d6)}
.header-credits-expiry{font-size:11.5px;color:#f6c35f}
@media(max-width:600px){.header-credits{margin-right:4px;padding:3px 7px}
.header-credits-yen{font-size:10.5px}
.header-credits-expiry{font-size:10.5px}}
.site-footer a[data-legal]{white-space:nowrap}
:root{--table-line:rgba(170,205,232,.34);--table-line-strong:rgba(196,222,242,.62)}
:root{--text:#f4f8fb;--text-2:#dbe6ef;--muted:#c3d2de;--ink:#f4f8fb;--ink-2:#dbe6ef}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/calc/fonts/barlow-latin-600-normal.woff2) format("woff2")}
header .brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;--wm-h:17px}
header .brand .brand-name{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-weight:400}
header .brand .brand-line{display:inline-flex;align-items:center;gap:calc(var(--wm-h) * 21.5 / 22)}
header .brand .wordmark{display:block;height:var(--wm-h);width:auto;flex:none}
header .brand .brand-kana{display:block;font-size:10px;font-weight:500;line-height:1;letter-spacing:.3em;padding-left:.3em;color:#e6eff6;white-space:nowrap}
header .brand .brand-kana-product{white-space:pre}
header .header-left{flex:none}
@media(max-width:1280px){header .brand{--wm-h:14px}}
@media(max-width:700px){header .brand{gap:8px}
header .brand .brand-kana{font-size:9px}}
@media(min-width:701px){header{flex-wrap:nowrap;gap:10px}
header .header-left{flex:0 1 auto;min-width:0;gap:14px}
header .header-right{flex-wrap:nowrap;gap:6px;margin-left:auto}
header .header-right button,header .header-resume,header .account-menu-button,.header-credits{white-space:nowrap}
header .header-right button{padding:6px 12px;font-size:13px}
header .account-menu-button{padding:6px 12px;font-size:13px}
.header-credits{padding:4px 10px;margin-right:0;line-height:1.25}
.header-credits strong{font-size:13.5px}
.header-credits-yen{font-size:11px}}
@media(min-width:701px) and (max-width:1600px){header .header-right .pill{display:none}}
@media(min-width:701px) and (max-width:800px){header{gap:6px}
header .header-left{gap:8px}
header .header-right{gap:4px}
header .header-right button,header .account-menu-button{padding:4px 7px;font-size:11.5px}
header .header-resume{padding:4px 8px;font-size:11.5px}
.header-credits{padding:3px 7px}}
@media(min-width:701px) and (max-width:1024px){header .header-right button,header .account-menu-button{padding:5px 9px;font-size:12px}
header .header-resume{font-size:12px;padding:5px 10px}}
@media(max-width:700px){header .header-left{flex-wrap:wrap;row-gap:6px}
header .header-resume{white-space:normal;flex-basis:auto}}
@media(min-width:701px){header{flex-wrap:wrap;row-gap:10px;justify-content:flex-end}
header .header-left{flex:none;margin-right:auto}}
@media(max-width:700px){header{grid-template-areas:"left left" "menu menu" "right right"}
header .brand{--wm-h:12px}
header .header-right{justify-content:flex-start;flex-wrap:wrap;gap:6px}
header .header-right .header-resume{white-space:nowrap}}
@media(max-width:360px){header .brand{--wm-h:10.5px}}
header .header-right .header-resume,header .header-right .header-resume:hover:enabled{background:var(--amber-soft,#fff4d6);color:var(--text,#193039);border:1px solid rgba(251,191,36,.55);font-weight:700}
.owl-avatar,.home-hero .owl-avatar--home,.item-owl .owl-avatar,.processing-owl .owl-avatar--home{width:auto}
.owl-avatar{--owl-h:56px}
.owl-avatar>img{height:var(--owl-h);width:auto;max-width:none;object-fit:contain}
.owl-avatar--home{--owl-h:150px}
.processing-owl .owl-avatar--home{--owl-h:104px}
.owl-avatar--feedback{--owl-h:60px}
.owl-avatar--item{--owl-h:52px}
.owl-avatar--mini{--owl-h:40px}
.owl-avatar--brand{--owl-h:32px}
.owl-avatar--inline{--owl-h:24px}
@media(max-width:700px){.owl-avatar,.home-hero .owl-avatar--home,.item-owl .owl-avatar,.processing-owl .owl-avatar--home{width:auto}
.owl-avatar{--owl-h:48px}
.owl-avatar--home{--owl-h:112px}
.processing-owl .owl-avatar--home{--owl-h:84px}
.owl-avatar--feedback{--owl-h:46px}
.owl-avatar--item{--owl-h:44px}
.owl-avatar--mini{--owl-h:36px}
.owl-avatar--brand{--owl-h:28px}
.owl-avatar--inline{--owl-h:22px}}
.home-companion .owl-avatar--home{--owl-h:var(--home-owl-h)}
.site-footer .footer-vision{flex-basis:100%;margin:4px 0 0;font-size:12px;color:var(--muted)}
.site-footer{justify-content:center;text-align:center;column-gap:20px;row-gap:10px}
.site-footer .footer-vision{text-align:center}
[id]:not(header,header *){scroll-margin-top:calc(var(--header-h,64px) + 12px)}
@media(max-width:700px){[id]:not(header,header *){scroll-margin-top:calc(var(--header-h,112px) + 8px)}}
.products-menu{position:relative}
.products-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(360px,calc(100vw - 24px));background:var(--surface-2,#10263c);border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:10px;padding:10px;box-shadow:var(--shadow-md,0 24px 50px -24px rgba(0,0,0,.9))}
.products-menu-list[hidden]{display:none}
.products-menu-title{margin:2px 6px 8px;font-size:12px;font-weight:700;color:var(--muted,#8aa1b5);letter-spacing:.04em}
.products-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.product-link{display:grid;gap:4px;padding:10px 12px;border-radius:8px;border:1px solid var(--line,rgba(148,197,230,.16));color:var(--text,#e6eff6);text-decoration:none;text-align:left;white-space:normal}
.product-link:hover,.product-link:focus-visible{background:rgba(255,255,255,.06)}
.product-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.product-name{font-size:13.5px;line-height:1.35}
.product-status{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.product-status.status-current{color:#5eead4}
.product-status.status-in_development{color:#fbbf24}
.product-status.status-available{color:#86efac}
.product-desc{font-size:12px;line-height:1.55;color:var(--text-2,#b4c7d6)}
.product-item[data-status=current] .product-link{border-color:rgba(94,234,212,.45)}
.account-products .products-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:700px){.products-menu-list{position:fixed;left:12px;right:12px;top:auto;width:auto;margin-top:8px}}
.header-nav{display:flex;align-items:center;gap:6px}
.header-nav-toggle{display:none}
header .header-link{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 12px;font-size:13px;font-weight:600;border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:999px;color:var(--text,#e6eff6);text-decoration:none;background:rgba(255,255,255,.03)}
header .header-link:hover{background:rgba(255,255,255,.08)}
header .header-link:focus-visible,.header-nav-toggle:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
@media(max-width:1100px){header .header-right{position:relative}
header .header-right .header-nav-toggle{display:inline-flex;white-space:nowrap}
.header-nav{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:40;flex-direction:column;align-items:stretch;gap:6px;min-width:220px;padding:10px;border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:12px;background:#0b1a29;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.header-nav.open{display:flex}
.header-nav>*,header .header-nav .header-link,header .header-nav button{width:100%;justify-content:flex-start;text-align:left}
.header-nav .products-menu{width:100%}}
@media(max-width:700px){header{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:6px}
header::after{content:"";flex-basis:100%;order:3}
header .header-left{order:0;flex:1 1 0;min-width:0}
header .header-right{display:contents}
header #language{order:1;flex:none;padding:6px 9px;font-size:11.5px;white-space:nowrap}
header .header-right .header-nav-toggle{order:2;flex:none}
header .header-resume{order:4;flex:none;margin-right:auto}
.header-credits{order:5;flex:none;margin-left:auto;margin-right:0}
.header-resume~.header-credits{margin-left:0}
.header-account{order:6;flex:none;display:flex;align-items:center;gap:5px;margin-left:auto}
.header-credits+.header-account{margin-left:0}
.header-nav{right:max(12px,env(safe-area-inset-right,0px))}
header .account-menu-button,header .header-signup{padding:6px 9px;font-size:11.5px;white-space:nowrap;writing-mode:horizontal-tb}
header .header-right .header-nav-toggle{padding:6px 10px;font-size:11.5px}
header .header-resume{padding:5px 7px;font-size:11px;white-space:normal;max-width:96px;line-height:1.2}}
@media(max-width:370px){header #language,header .header-right .header-nav-toggle{padding:5px 7px;font-size:11px}}
@media(max-width:700px){header .brand{--wm-h:10px;gap:8px}
header .brand img{width:26px;height:30px}}
@media(max-width:430px){header .brand{--wm-h:8.4px;gap:6px}
header .brand img{width:22px;height:26px}}
@media(max-width:370px){header .brand{--wm-h:7.6px}}
.header-nav-toggle{align-items:center;gap:6px}
.header-nav-icon{flex:none}
@media(max-width:700px){header .header-right .header-nav-toggle{width:40px;height:34px;padding:0;justify-content:center}
.header-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media(max-width:700px){header .header-left,header .brand,header .brand .brand-name{min-width:0;max-width:100%}
header .brand .brand-kana{white-space:normal;letter-spacing:.12em;padding-left:0;line-height:1.25}
header .brand .brand-kana>span{white-space:nowrap}
header .brand .brand-kana-product{white-space:nowrap}}
@media(min-width:1101px) and (max-width:1560px){header .brand{--wm-h:13px}
header .header-right,.header-nav{gap:4px}
header .header-right button,header .header-link,header .account-menu-button,header .header-resume{padding:5px 9px;font-size:12px}
.header-credits{padding:3px 8px}}
header :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){box-sizing:border-box;height:32px;min-height:32px;max-width:none;display:inline-flex;align-items:center;gap:6px;padding:0 12px;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;border-width:1px;border-style:solid;writing-mode:horizontal-tb}
header #header-signup{font-weight:700}
header .header-right #header-resume,header .header-right #header-resume:hover:enabled{background:rgba(255,255,255,.03);border-color:#fbbf24;color:#fcd34d;font-weight:600}
header .header-right #header-resume:hover:enabled{background:rgba(251,191,36,.1)}
header #account-menu-button .account-menu-dot{flex:none}
@media(min-width:1101px) and (max-width:1560px){header :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){padding:0 10px;font-size:12px}}
@media(min-width:701px) and (max-width:1100px){header :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){height:30px;min-height:30px;padding:0 8px;font-size:11.5px}}
@media(max-width:700px){header :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){height:30px;min-height:30px;padding:0 10px;font-size:11.5px}
header .header-right .header-nav-toggle{height:30px;min-height:30px}
header .header-nav :is(#products-menu-button,.header-link,#pricing-open){height:auto;min-height:40px}}
@media(max-width:370px){header :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){padding:0 7px;font-size:11px}}
@media(max-width:370px){header .header-right #header-resume{white-space:normal;height:auto;max-width:104px;line-height:1.15;padding:3px 7px;text-align:center}}
@media(min-width:1101px){header .header-right #header-nav-toggle{display:none}}
@media(min-width:1101px) and (max-width:1400px){header:has(#header-resume) :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){padding:0 7px;font-size:11.5px}
header:has(#header-resume) .header-right,header:has(#header-resume) .header-nav{gap:4px}}
@media(min-width:1101px) and (max-width:1250px){header .header-right #header-resume{white-space:normal;line-height:1.05;text-align:center;justify-content:center}
html[lang="en"] header .header-right #header-resume{max-width:62px}
html[lang="ja"] header .header-right #header-resume{max-width:56px}}
@media(min-width:1101px) and (max-width:1400px){header:has(#header-resume) :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){padding:0 6px;font-size:11px}
header:has(#header-resume){gap:8px}
header:has(#header-resume) .header-right,header:has(#header-resume) .header-nav{gap:3px}}
header .brand{--wm-h:19px}
header .brand .brand-kana{font-size:9px}
@media(max-width:1280px){header .brand{--wm-h:15px}}
@media(min-width:1101px) and (max-width:1560px){header .brand{--wm-h:14px}}
@media(max-width:700px){header .brand{--wm-h:11px}
header .brand .brand-kana{font-size:8px}}
@media(max-width:430px){header .brand{--wm-h:9.2px}}
@media(max-width:370px){header .brand{--wm-h:8.2px}}
.brand-tagline{margin:0 0 2px;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.04em;color:#7dd3fc;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media(max-width:520px){.brand-tagline{font-size:14px;margin-bottom:-2px}}
@media(min-width:1101px) and (max-width:1180px){header:has(#header-resume) :is(#header-resume,#header-nav-toggle,#products-menu-button,.header-link,#pricing-open,#language,#account-menu-button,#header-signup){padding:0 5px;font-size:10.5px}}
.header-credits-contract{font-size:11.5px;color:#5eead4;display:block;max-width:16em;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.header-credits-contract{font-size:10.5px;max-width:9em}}
.header-nav-more{display:none}
@media(max-width:767px){header{display:flex!important;flex-wrap:nowrap!important;align-items:center;column-gap:10px;row-gap:0;grid-template-areas:none!important}
header::after{content:none!important;display:none!important}
header .header-left{order:0;flex:1 1 auto;min-width:0}
header .header-right{display:flex!important;order:1;flex:none;position:relative;margin-left:auto;gap:0;max-width:none}
header .header-right>:not(.header-nav-toggle):not(.header-nav),header>.header-credits,header>.header-account{display:none!important}
header .header-right #header-nav-toggle{display:inline-flex!important;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;align-items:center}
.header-nav{display:none!important;position:absolute;right:0;top:calc(100% + 8px);z-index:40;flex-direction:column;align-items:stretch;gap:6px;width:max-content;min-width:240px;max-width:calc(100vw - 24px);padding:10px;border:1px solid var(--line-strong,rgba(148,197,230,.26));border-radius:12px;background:#0b1a29;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.header-nav.open{display:flex!important}
.header-nav-more{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--line-strong,rgba(148,197,230,.26))}
header .header-nav :is(button,a),header .header-nav .header-credits{width:100%;box-sizing:border-box;min-height:44px!important;height:auto!important;padding:8px 12px!important;font-size:14px!important;justify-content:flex-start;text-align:left;white-space:normal!important;max-width:none}
header .header-nav .header-credits{flex-direction:column;align-items:flex-start;margin:0}
.header-nav-more>*{order:0!important}
header .brand{--wm-h:13px;gap:8px}
header .brand img{width:30px;height:34px}}
@media(max-width:430px){header .brand{--wm-h:11.5px;gap:6px}
header .brand img{width:26px;height:30px}}
@media(max-width:370px){header .brand{--wm-h:10.4px}}

/* Design tokens, DARK set (owner decision 2026-11-13: the same as Review AI as it is published now).
   The canonical platform/design/tokens.json does not exist yet (common spec ch.2 2.1, ch.3 3.2), so the values are copied
   from Review AI's dark theme: hiragg/mechowl-review MechOwlReview/src/style.css at 637da7b9 (2026-11-13), the v1.17 layer
   (lines 410-420: colours, shadows, body background), the v2.5 contrast layer (lines 1225-1231: text colours, primary button)
   and its inputs, panels and state tints (lines 431-507). review.mechowl.com itself could not be fetched from the development
   session (network policy, HTTP 403), so the copy is of main; recorded in platform-copies/source.json "missing".
   Print (and the PDF made from print) stays light: the @media print block at the end puts the light values back.
   Only these variables carry colour values; site.css uses variables only. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/calc/fonts/inter-latin-400-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/calc/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  /* Review AI v1.17: --bg --surface --surface-2 --surface-3 --line --line-strong; v2.5: --text --text-2 --muted */
  --color-bg: #06111d;
  --color-surface: #0c1d30;
  --color-surface-2: #10263c;
  --color-surface-3: #153049;
  --color-text: #f4f8fb;
  --color-text-2: #dbe6ef;
  --color-text-sub: #c3d2de;
  --color-heading: #ffffff;
  --color-line: rgba(148, 197, 230, .14);
  --color-input-line: rgba(148, 197, 230, .26);
  --color-input-line-hover: rgba(148, 197, 230, .45);
  --color-input-bg: rgba(6, 17, 29, .6);
  /* secondary buttons and toggles (Review AI dark buttons) */
  --color-btn-bg: rgba(255, 255, 255, .04);
  --color-btn-bg-hover: rgba(255, 255, 255, .09);
  --color-thead-bg: rgba(255, 255, 255, .04);
  --color-table-line: rgba(170, 205, 232, .34);
  /* brand teal (dark): --teal --teal-strong --teal-soft --cyan --sky */
  --color-brand: #14b8a6;
  --color-brand-strong: #2dd4bf;
  --color-brand-soft: rgba(45, 212, 191, .12);
  --color-brand-line: rgba(45, 212, 191, .3);
  --color-link: #5eead4;
  --color-sky: #7dd3fc;
  /* primary button (v2.5): gradient #2dd4bf -> #14b8a6, label #03211d */
  --color-primary-top: #2dd4bf;
  --color-primary-bottom: #14b8a6;
  --color-primary-text: #03211d;
  --color-primary-hover-top: #5eead4;
  --color-primary-hover-bottom: #2dd4bf;
  /* focus ring shared by the site and Review AI */
  --color-focus: #f2b84b;
  /* states (dark): --green --amber --sky --red with their -soft tints; the mark sits on the strong colour with a dark label */
  --color-ok: #4ade80;
  --color-ok-bg: rgba(74, 222, 128, .12);
  --color-ok-line: rgba(74, 222, 128, .35);
  --color-ng: #f87171;
  --color-ng-bg: rgba(248, 113, 113, .14);
  --color-ng-line: rgba(248, 113, 113, .4);
  --color-warn: #fbbf24;
  --color-warn-bg: rgba(251, 191, 36, .12);
  --color-warn-line: rgba(251, 191, 36, .35);
  --color-info: #7dd3fc;
  --color-info-bg: rgba(125, 211, 252, .12);
  --color-info-line: rgba(125, 211, 252, .3);
  --color-mark-text: #06111d;
  --color-draft: #fbbf24;
  --color-draft-bg: rgba(251, 191, 36, .12);
  --color-invalid-line: rgba(251, 191, 36, .55);
  --color-invalid-bg: rgba(251, 191, 36, .05);
  --color-selection: rgba(45, 212, 191, .35);
  --color-focus-glow: rgba(45, 212, 191, .18);
  --color-backdrop: rgba(0, 0, 0, .6);
  /* light surfaces keep dark text (Review AI: the speech bubble is white with #0d1b2a) */
  --color-bubble-bg: #ffffff;
  --color-bubble-text: #0d1b2a;
  /* glass panels on the blueprint background (Review AI .panel) */
  --panel-bg: linear-gradient(180deg, rgba(16, 38, 60, .82), rgba(12, 29, 48, .82));
  --header-bg: rgba(6, 17, 29, .72);
  --page-bg:
    radial-gradient(1200px 600px at 85% -10%, rgba(45, 212, 191, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(56, 189, 248, .07), transparent 60%),
    linear-gradient(rgba(148, 197, 230, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(148, 197, 230, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    #06111d;
  /* the home hero of Review AI (style.css 314-317) */
  --hero-bg:
    radial-gradient(900px 420px at 88% -12%, rgba(45, 212, 191, .22), transparent 60%),
    radial-gradient(700px 380px at -5% 110%, rgba(56, 189, 248, .14), transparent 60%),
    linear-gradient(155deg, #0a1b2d 0%, #0e2740 55%, #0b2236 100%);
  --hero-grid: rgba(148, 197, 230, .07);
  --hero-grid-fine: rgba(148, 197, 230, .035);
  --hero-eyebrow-line: rgba(94, 234, 212, .28);
  --hero-eyebrow-bg: rgba(94, 234, 212, .08);
  --hero-eyebrow-text: #8ff0df;
  --hero-eyebrow-glow: rgba(94, 234, 212, .18);
  /* Review AI's header, top page and pricing parts (MechOwlReview/src/style.css e13c93a6; docs/design/review-ai-structure.md §1–§7):
     the amber of its paid (plan) buttons, the ghost (secondary) button of the top's actions, the menu panel, the marks, the compare table's frame, the white preview */
  --color-amber: #f2b33d;
  --color-amber-hover: #f6c35f;
  --color-amber-text: #1a1205;
  --color-amber-badge: #f6c35f;
  --color-amber-soft: rgba(242, 179, 61, .08);
  --color-amber-line: rgba(242, 179, 61, .5);
  --shadow-amber: 0 10px 28px -14px rgba(242, 179, 61, .8);
  --color-ghost-bg: rgba(255, 255, 255, .06);
  --color-ghost-bg-hover: rgba(255, 255, 255, .12);
  --color-ghost-text: #e6eff6;
  --color-ghost-line: rgba(255, 255, 255, .22);
  --color-ghost-line-hover: rgba(255, 255, 255, .4);
  --color-menu-bg: #0b1a29;
  --shadow-menu: 0 12px 30px rgba(0, 0, 0, .45);
  --color-reco: #9fd8ff;
  --color-compare-frame: rgba(196, 222, 242, .62);
  --color-cost-row: rgba(94, 234, 212, .07);
  --color-row-head: rgba(255, 255, 255, .02);
  --color-disabled-text: #8ea3b5;
  --color-disabled-line: rgba(148, 197, 230, .45);
  --trust-tile-bg: linear-gradient(180deg, rgba(16, 38, 60, .7), rgba(12, 29, 48, .7));
  --strengths-link-line: rgba(111, 211, 194, .38);
  --strengths-link-line-hover: rgba(111, 211, 194, .75);
  --strengths-link-bg: linear-gradient(120deg, rgba(111, 211, 194, .10), rgba(255, 255, 255, .03) 55%, rgba(240, 180, 60, .08));
  --strengths-link-mark: linear-gradient(135deg, #2ed3b7, #f0b43c);
  --strengths-link-arrow: #6fd3c2;
  --strengths-link-text: #e8f3f1;
  --color-preview-bg: #ffffff;
  --color-preview-chrome: #f3f6f9;
  --color-preview-line: #e2e8f0;
  --color-preview-text: #4d6173;
  --color-preview-app: #33475b;
  --preview-dot-1: #f1a9a0;
  --preview-dot-2: #f3d38a;
  --preview-dot-3: #9fd8b6;
  --shadow-preview: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 6px rgba(255, 255, 255, .04);
  --color-step-no-bg: #ffffff;
  --color-step-no-text: #06111d;
  --color-ours-head: #2dd4bf;
  --color-ours-head-text: #03211d;
  --color-ours-bg: rgba(45, 212, 191, .07);
  /* diagram paper (owner decision 2026-11-14): the input and result diagrams are white paper inside the dark page, as Review AI
     shows drawings on white paper. The same values on screen and in print. Contrast on --paper-bg (docs/design/diagram-rules.md):
     text 17.39, text-sub 6.42, accent 5.93, ok 7.13, ng 6.54 (all >= 4.5:1, also on the part fills); axis lines 4.90 (>= 3:1). */
  --paper-bg: #ffffff;
  --paper-edge: #c9d6e0;
  --paper-text: #0d1b2a;
  --paper-text-sub: #4d6173;
  --paper-line: #0d1b2a;
  --paper-part: #f0f4f8;
  --paper-part-alt: #dff3f1;
  --paper-accent: #0b6f74;
  --paper-axis: #5f7387;
  --paper-ok: #166534;
  --paper-ng: #b3261e;
  --paper-track: #eef2f6;
  --shadow-paper: 0 20px 40px -24px rgba(0, 0, 0, .9);
  --font-sans: "Inter", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
  --font-display: "Barlow", "Inter", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-base: 16px;
  --text-small: 14px;
  --text-xs: 12.5px;
  --radius: 10px;
  --radius-panel: 16px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --header-h: 64px;
  --tap: 44px;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-md: 0 24px 50px -24px rgba(0, 0, 0, .9);
  --shadow-sticky: 0 -10px 30px -12px rgba(0, 0, 0, .8);
  --shadow-primary: 0 0 0 1px rgba(94, 234, 212, .25), 0 10px 24px -10px rgba(45, 212, 191, .7);
  --shadow-hero: 0 30px 60px -30px rgba(10, 27, 45, .6);
  --shadow-bubble: 0 10px 30px -10px rgba(0, 0, 0, .45);
}

/* Print (the design calculation sheet and the PDF made from it) is read on white paper: light values
   (Review AI keeps print light too; values from its light layer v1.16). */
@media print {
  :root {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #f0f4f8;
    --color-surface-3: #e6eef3;
    --color-text: #0d1b2a;
    --color-text-2: #33475b;
    --color-text-sub: #5f7387;
    --color-heading: #0d1b2a;
    --color-line: #e2e8f0;
    --color-input-line: #b7c7d6;
    --color-input-line-hover: #6b7f90;
    --color-input-bg: #ffffff;
    --color-btn-bg: #ffffff;
    --color-thead-bg: #f0f4f8;
    --color-table-line: #6b7f90;
    --color-brand-line: #9fd3cf;
    --color-brand: #0f8b8d;
    --color-brand-strong: #0b6f74;
    --color-brand-soft: #e2f4f3;
    --color-link: #0b6f74;
    --color-ok: #166534;
    --color-ok-bg: #e6f5ec;
    --color-ng: #b3261e;
    --color-ng-bg: #fdeceb;
    --color-warn: #b45309;
    --color-warn-bg: #fdf3e2;
    --color-info: #1d4f91;
    --color-info-bg: #e7eef9;
    --color-ok-line: #9fd3b2;
    --color-ng-line: #f0b4ae;
    --color-warn-line: #ecc98f;
    --color-info-line: #b3c8e6;
    --color-draft: #b45309;
    --color-draft-bg: #fdf3e2;
    --color-mark-text: #ffffff;
    --panel-bg: #ffffff;
    --page-bg: #ffffff;
    --shadow-sm: none;
    --shadow-md: none;
  }
}

/* Calculation site styles, built on Review AI's light layer (MechOwlReview/src/style.css v1.16; tokens.css records the
   source). Colours only through tokens.css variables (common spec ch.3 3.2). Mobile rules (ch.3 3.4): input text 16px,
   tap targets >= 44px, no maximum-scale, no horizontal overflow. State is never shown by colour alone. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg); background-attachment: fixed; color: var(--color-text); font: var(--text-base)/1.75 var(--font-sans); overflow-wrap: anywhere; }
::selection { background: var(--color-selection); }
a { color: var(--color-link); }
a:hover { color: var(--color-heading); }
:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-2); background: var(--color-surface); padding: var(--space-2); z-index: 30; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 auto; max-width: 1280px; padding: var(--space-3) 3% 0; font-size: 13px; color: var(--color-text-sub); }
.crumbs a { color: var(--color-text-sub); }
.crumbs li + li::before { content: "›"; margin-right: var(--space-2); }

main { max-width: 1280px; margin: 0 auto; padding: var(--space-4) 3% var(--space-8); }
h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.35; font-weight: 800; letter-spacing: -.01em; margin: var(--space-2) 0 var(--space-3); color: var(--color-heading); }
h2 { font-size: 22px; line-height: 1.4; font-weight: 800; letter-spacing: -.01em; margin: var(--space-8) 0 var(--space-3); color: var(--color-heading); }
h3 { font-size: 17px; font-weight: 700; margin: var(--space-4) 0 var(--space-2); color: var(--color-heading); }
.kicker { margin: var(--space-10) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-link); }
.kicker + h2 { margin-top: var(--space-1); }
.summary { color: var(--color-text-2); margin: 0 0 var(--space-3); }
.product-label { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--color-link); }
.lead { margin: 0 0 var(--space-2); font-weight: 600; color: var(--color-text-2); }
.note { font-size: 13px; color: var(--color-text-sub); }

/* pills (Review AI .pill): the state of a calculation on its card */
.state-draft { background: var(--color-draft-bg); color: var(--color-draft); }
.state-verified, .state-reviewed, .state-published { background: var(--color-brand-soft); color: var(--color-link); border-color: var(--color-brand-line); }

/* buttons (Review AI: secondary white, primary teal; radius 10) */
.btn, button, select, input { font: inherit; font-size: var(--text-base); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-input-line); background: var(--color-btn-bg); color: var(--color-text); font-size: var(--text-small); font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s, transform .15s, border-color .15s; }
.btn:hover { border-color: var(--color-input-line-hover); background: var(--color-btn-bg-hover); color: var(--color-heading); }
.btn.main { background: linear-gradient(180deg, var(--color-primary-top), var(--color-primary-bottom)); color: var(--color-primary-text); border-color: var(--color-primary-bottom); box-shadow: var(--shadow-primary); }
.btn.main:hover { background: linear-gradient(180deg, var(--color-primary-hover-top), var(--color-primary-hover-bottom)); color: var(--color-primary-text); transform: translateY(-1px); }
.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--color-btn-bg); border-style: dashed; color: var(--color-text-sub); box-shadow: none; transform: none; }
.btn-icon { width: 18px; height: 18px; }

/* calculation page */
.calc > h1 { margin-top: var(--space-1); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; padding: var(--space-3); background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); }
.tools fieldset { border: 0; margin: 0 var(--space-2) 0 0; padding: 0; display: flex; align-items: center; gap: var(--space-2); }
.tools legend { float: left; margin-right: var(--space-2); font-size: 13px; font-weight: 600; color: var(--color-text-2); }
.tool-status { flex-basis: 100%; margin: 0; min-height: 1.5em; font-size: 13px; color: var(--color-text-sub); }
.tool-status:empty { min-height: 0; }
.seg { display: inline-flex; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-btn-bg); color: var(--color-text); font-weight: 600; font-size: var(--text-small); cursor: pointer; transition: border-color .15s, background .15s; }
.seg input:checked + span { background: var(--color-brand-soft); color: var(--color-brand-strong); border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.seg input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.segs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.inputs, .results { min-width: 0; background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-panel); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.inputs > h2, .results > h2 { margin-top: 0; font-size: 20px; }
.results { position: sticky; top: calc(var(--header-h) + var(--space-4)); }

/* diagrams: one drawing rule for every calculation (docs/design/diagram-rules.md): white paper inside the dark page (owner
   decision 2026-11-14, as Review AI shows drawings on white paper), navy outlines, teal for loads, dimensions and motion,
   symbols in the label font. Colours only from the --paper-* tokens (the same on screen and in print). */
.diagram { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--paper-bg); border: 1px solid var(--paper-edge); border-radius: 12px; box-shadow: var(--shadow-paper); color: var(--paper-text); }
.diagram svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }
.diagram .part { fill: var(--paper-part); stroke: var(--paper-line); stroke-width: 1.6; stroke-linejoin: round; }
.diagram .part.alt { fill: var(--paper-part-alt); }
.diagram .arrow, .diagram .dim, .diagram .hatch, .diagram .axis { stroke: var(--paper-accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.diagram .axis { stroke: var(--paper-axis); stroke-width: 1.2; }
.diagram .dash { stroke-dasharray: 6 4; stroke: var(--paper-axis); stroke-width: 1.2; fill: none; }
.diagram .head { fill: var(--paper-accent); }
.diagram .shaft { stroke: var(--paper-line); stroke-width: 6; stroke-linecap: round; fill: none; }
.diagram .curve { stroke: var(--paper-line); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.diagram .lbl { fill: var(--paper-text); font: italic 600 15px var(--font-sans); }
.diagram .note { fill: var(--paper-text-sub); font: 14px var(--font-sans); }
/* text sizes are viewBox units; on a 390 px phone a 360-wide viewBox is drawn about 311 px wide, so 14 → 12.1 px: every
   text class is 14 or more (diagram-rules.md「スマホでは図の文字は 12px 以上」, src/calc/result-diagram.ts DIAGRAM_TEXT_PX)
   result diagram (diagram-rules.md「結果の図」): the same paper and size, the results written large on the schematic */
.diagram .rd-shape { stroke: var(--paper-accent); stroke-width: 4; fill: none; stroke-linecap: round; }
.diagram .rd-value { fill: var(--paper-text); font: 800 22px var(--font-sans); font-variant-numeric: tabular-nums; }
.diagram .rd-sub { fill: var(--paper-text); font: 800 17px var(--font-sans); font-variant-numeric: tabular-nums; }
.diagram .rd-cap { fill: var(--paper-text-sub); font: 600 14px var(--font-sans); }
.diagram .rd-verdict { fill: var(--paper-text); font: 800 14px var(--font-sans); }
.diagram .rd-mlabel { fill: var(--paper-text); font: 600 14px var(--font-sans); }
.diagram .rd-mvalue { fill: var(--paper-text); font: 800 15px var(--font-sans); font-variant-numeric: tabular-nums; }
.diagram .rd-mnote { fill: var(--paper-text-sub); font: 600 14px var(--font-sans); font-variant-numeric: tabular-nums; }
.diagram .rd-track { fill: var(--paper-track); stroke: var(--paper-axis); stroke-width: 1; }
.diagram .rd-over { fill: none; stroke: var(--paper-axis); stroke-width: 1; stroke-dasharray: 3 2; }
.diagram .rd-fill.ok { fill: var(--paper-ok); }
.diagram .rd-fill.ng { fill: var(--paper-ng); }
.diagram .rd-one { stroke: var(--paper-line); stroke-width: 2; }
.diagram .rd-frame { fill: none; stroke: var(--paper-axis); stroke-width: 1.2; stroke-dasharray: 6 4; }
.diagram .rd-wait { fill: var(--paper-text-sub); font: 600 14px var(--font-sans); }

.goal { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.goal legend { font-weight: 700; margin-bottom: var(--space-2); color: var(--color-heading); }
.field { margin-bottom: var(--space-5); }
.field[hidden] { display: none; }
.field > label { display: block; font-weight: 650; color: var(--color-text); margin-bottom: 6px; }
.sym { font-family: var(--font-sans); font-style: italic; color: var(--color-brand-strong); font-weight: 600; }
.help { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-text-sub); }
.num { display: flex; gap: var(--space-2); }
.num input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
input[type="text"], input[type="search"], input[type="date"], input:not([type]), select { min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--color-input-line); border-radius: var(--radius); background: var(--color-input-bg); color: var(--color-text); max-width: 100%; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover { border-color: var(--color-input-line-hover); }
input:focus, select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-focus-glow); outline: none; }
select option { background: var(--color-surface); color: var(--color-text); }
::placeholder { color: var(--color-text-sub); opacity: .8; }
input:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--color-invalid-line); background-color: var(--color-invalid-bg); }
.field select { width: 100%; }
.num select { width: auto; flex: 0 0 auto; }
.unknown { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--text-small); }
.unknown input { width: 22px; height: 22px; accent-color: var(--color-brand); }

/* verdict: colour AND word AND mark (never colour alone; Review AI severity marks) */
.verdict { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; padding: 8px 14px; border-radius: 12px; border: 1px solid transparent; }
.verdict::before { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 15px; font-weight: 800; color: var(--color-mark-text); flex: 0 0 auto; }
.v-meets { background: var(--color-ok-bg); color: var(--color-ok); border-color: var(--color-ok-line); }
.v-meets::before { content: "✓"; background: var(--color-ok); }
.v-insufficient, .v-error { background: var(--color-ng-bg); color: var(--color-ng); border-color: var(--color-ng-line); }
.v-insufficient::before { content: "!"; background: var(--color-ng); }
.v-error::before { content: "×"; background: var(--color-ng); }
.v-cannot_judge, .v-out_of_scope { background: var(--color-warn-bg); color: var(--color-warn); border-color: var(--color-warn-line); }
.v-cannot_judge::before { content: "?"; background: var(--color-warn); }
.v-out_of_scope::before { content: "△"; background: var(--color-warn); }
.v-required_only { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-line); }
.v-required_only::before { content: "＝"; background: var(--color-info); }
.conclusion { margin: var(--space-3) 0; color: var(--color-text-2); }
.main-outputs, .other-outputs { margin: var(--space-3) 0; }
.out { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border-bottom: 1px solid var(--color-line); padding: 8px 0; }
.out dt { color: var(--color-text-2); font-size: var(--text-small); }
.out dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-heading); }
.out .u { font-size: .78em; font-weight: 600; color: var(--color-text-sub); margin-left: .2em; }
.main-outputs .out { border-bottom: 0; padding: 10px 14px; margin-bottom: 8px; background: var(--color-input-bg); border: 1px solid var(--color-line); border-radius: 12px; }
.main-outputs .out dd { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.01em; }
.issues { padding-left: 1.2em; }
.issues .lv-error, .issues .lv-missing { color: var(--color-ng); }
.issues .lv-warning { color: var(--color-warn); }

/* margin bar: the fill is the margin (1 at the centre line), the number and the words say the same */
.margin { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-3); margin-bottom: var(--space-4); }
.m-value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-heading); }
.bar { grid-column: 1 / -1; position: relative; height: 16px; background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); overflow: hidden; }
.fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-ok); border-radius: var(--radius-pill); }
.margin.ng .fill { background: var(--color-ng); }
.one { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-heading); }

.table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-small); }
th, td { border-bottom: 1px solid var(--color-table-line); padding: 8px 10px; text-align: left; }
thead th { background: var(--color-thead-bg); font-size: 12px; font-weight: 700; color: var(--color-text-2); }
/* reference (参照) pages: tables of looked-up values; only the table scrolls sideways, never the page */
.state-ref { background: var(--color-surface-2); color: var(--color-text-2); border-color: var(--color-line); }
.ref-kind { display: inline-block; margin: 0 0 var(--space-1); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-2); border: 1px solid var(--color-line); }
.ref-block { margin-top: var(--space-6); }
.ref-table table { width: auto; min-width: 100%; }
.ref-table caption { caption-side: top; text-align: left; padding: 10px 10px 6px; font-weight: 700; color: var(--color-heading); }
.ref-table th, .ref-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ref-table thead th { white-space: normal; min-width: 4.5em; vertical-align: bottom; }
.ref-table tbody th { font-weight: 700; color: var(--color-heading); }
.ref-table .unit { display: block; font-weight: 400; }
.ref-table:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
.ref > .text { margin-top: var(--space-8); padding-top: var(--space-2); }
.ref > .text > h2 { margin-top: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); }
.candidates tr.ok th { background: var(--color-brand-soft); box-shadow: inset 3px 0 var(--color-brand); }
.formulas ol { padding-left: 1.2em; }
.formulas li { margin-bottom: var(--space-3); }
.formulas code { display: block; font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; background: var(--color-input-bg); border: 1px solid var(--color-line); border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
.f-label { font-weight: 650; }
.premise { margin: var(--space-3) 0; padding: 12px 15px; border: 1px solid var(--color-line); border-left: 4px solid var(--color-input-line); border-radius: 12px; background: var(--color-surface-2); }
.p-unconfirmed { border-left-color: var(--color-warn); background: var(--color-warn-bg); }
.p-missing_default { border-left-color: var(--color-ng); }
.premise h3 { margin: 0; font-size: var(--text-small); }
.premise ul { margin: var(--space-1) 0 0; padding-left: 1.2em; font-size: var(--text-small); }
.sticky-main { display: none; }
.empty { color: var(--color-text-sub); }

/* reading sections: a readable line length and Review AI section headings */
.text { max-width: 46em; }
.text p, .text li, .text dd { line-height: 1.85; }
.calc > .text { margin-top: var(--space-8); padding-top: var(--space-2); }
.calc > .text > h2 { margin-top: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); }
.examples { padding-left: 1.2em; }
.example { margin-bottom: var(--space-5); }
.faq dt { font-weight: 700; margin-top: var(--space-3); color: var(--color-heading); }
.faq dd { margin: 0; }
.related li { min-height: var(--tap); display: flex; align-items: center; }
.soon { color: var(--color-text-sub); }
.request a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.sources li { margin-bottom: var(--space-3); }
.references cite { font-style: normal; font-weight: 600; color: var(--color-heading); }
.product-guide { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-8) 0 var(--space-4); padding: var(--space-5) var(--space-6); background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); max-width: 46em; }
.product-guide img { height: 32px; width: auto; }
.product-guide p { margin: 0; flex: 1 1 16em; font-weight: 600; color: var(--color-text-2); }

/* top page: the 計算を探す section (search, field tiles, cards); the hero and the sections are in home.css */
.block { margin-top: var(--space-2); }
.tiles, .cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.tiles a { display: flex; gap: var(--space-4); align-items: flex-start; min-height: var(--tap); padding: var(--space-5); background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); text-decoration: none; color: var(--color-text); height: 100%; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-brand-soft); color: var(--color-link); box-shadow: inset 0 0 0 1px var(--color-brand-line); flex: 0 0 auto; }
.tile-icon .icon { width: 28px; height: 28px; }
.tile-text { display: block; min-width: 0; }
.tile-count { display: inline-block; margin: 2px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--color-link); }
.card a { display: block; min-height: var(--tap); padding: var(--space-5); background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); text-decoration: none; color: var(--color-text); height: 100%; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tiles a:hover, .card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-brand-line); color: var(--color-text); }
.card { position: relative; }
.card[hidden] { display: none; }
.card .state { position: absolute; right: var(--space-3); top: var(--space-3); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.card-field { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-link); margin-bottom: 4px; padding-right: 5em; }
.card-icon { width: 18px; height: 18px; }
.card-title { display: block; font-weight: 750; color: var(--color-heading); line-height: 1.5; }
.tiles .card-title { font-size: 17px; }
.card-sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--color-text-sub); }
.cards-featured { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.field-h1 { display: flex; align-items: center; gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.chips-label { font-size: 13px; font-weight: 600; color: var(--color-text-2); }
.chip { min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-btn-bg); color: var(--color-text); font-size: var(--text-small); font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--color-input-line-hover); }
.chip[aria-pressed="true"] { background: var(--color-brand-soft); color: var(--color-brand-strong); border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }

dialog { border: 1px solid var(--color-line); border-radius: var(--radius-panel); max-width: min(480px, calc(100vw - 32px)); width: 100%; color: var(--color-text); background: var(--color-surface-2); box-shadow: var(--shadow-md); padding: var(--space-6); }
dialog::backdrop { background: var(--color-backdrop); }
dialog label { display: block; margin-bottom: var(--space-3); font-weight: 600; font-size: var(--text-small); }
dialog input { width: 100%; display: block; margin-top: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.sheet { display: none; }

/* study sheets (検討シート): the calculation page's panels per step, linked inputs shown as values with their source */
.step { margin-top: var(--space-8); }
.step > h2 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }
.step-no { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--color-brand-soft); color: var(--color-brand-strong); border: 1px solid var(--color-brand); font-weight: 800; }
.step-calc { margin: 0 0 var(--space-3); font-size: 14px; color: var(--color-text-sub); }
.step-calc a { display: inline-flex; align-items: center; min-height: var(--tap); }
.step-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.step-inputs, .step-results { min-width: 0; background: var(--panel-bg); border: 1px solid var(--color-line); border-radius: var(--radius-panel); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.step-results > h3 { margin-top: 0; }
.goal[hidden], .step-form .field [hidden] { display: none; }
.linked { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-brand); border-radius: 12px; background: var(--color-brand-soft); }
.linked p { margin: 0 0 4px; }
.linked-label { font-size: 13px; font-weight: 700; color: var(--color-brand-strong); }
.linked-value { font-weight: 800; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.field:not(.is-linked) .linked > p { display: none; }
.field:not(.is-linked) .linked { border-style: solid; background: none; padding: 0 var(--space-3); }
.unlink { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-size: 14px; }
.fixed { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--color-surface-2); border: 1px solid var(--color-line); font-size: 14px; }
.manual { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 3px solid var(--color-warn); }
.manual[hidden], .linked-empty[hidden] { display: none; }
.notice { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--color-warn-bg); border: 1px solid var(--color-warn-line); color: var(--color-text); font-weight: 600; }
.notice[hidden] { display: none; }
.compare td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare td.is-current { background: var(--color-brand-soft); font-weight: 700; }
.compare .unit { font-weight: 400; color: var(--color-text-sub); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media (max-width: 900px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .results { position: static; }
  .inputs, .results { padding: var(--space-4); }
  .step-work { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .step-inputs, .step-results { padding: var(--space-4); }
  .sticky-main:not([hidden]):not(:empty) { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; position: sticky; bottom: 0; z-index: 15; background: var(--color-surface); border-top: 1px solid var(--color-input-line); padding: var(--space-3) var(--space-4); margin: 0 -3.4%; box-shadow: var(--shadow-sticky); font-weight: 700; }
  .sticky-main .verdict { font-size: 14px; padding: 4px 10px; }
  .sticky-main .verdict::before { width: 20px; height: 20px; font-size: 13px; }
  .sticky-main .s-value { font-size: 20px; color: var(--color-heading); font-variant-numeric: tabular-nums; }
}

@media (max-width: 767px) {
  main { padding: var(--space-3) 4% var(--space-8); }
  .cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .tiles a { flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: 16px; }
  .tiles .card-sub { display: none; }
  .tiles .card-title { font-size: 15px; }
  .tile-icon { width: 40px; height: 40px; border-radius: 12px; }
  .card a { padding: var(--space-4); }
  .tools { padding: var(--space-2); }
  input, select { font-size: 16px !important; }
  .diagram { padding: 6px; }
}

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }
  body { font-size: 10.5pt; line-height: 1.5; background: var(--color-surface); }
  .site-header, .crumbs, .tools, .site-footer, .contact, .contact-faq, .sticky-main, .skip, form button, .example button, dialog, .product-guide { display: none !important; }
  main { padding: 0; max-width: none; }
  .work { grid-template-columns: 1fr; }
  .inputs, .results { position: static; background: none; padding: 0; border: 0; box-shadow: none; }
  details { display: block; }
  details > summary { list-style: none; font-weight: 700; }
  .margin, tr, .premise, .formulas li { break-inside: avoid; }
  body.print-sheet main > *:not(#sheet), body.print-sheet .site-header, body.print-sheet .crumbs, body.print-sheet .site-footer { display: none !important; }
  body.print-sheet #sheet { display: block; }
  body:not(.print-sheet) #sheet { display: none; }
  .sheet h1 { font-size: 16pt; margin: 0 0 4mm; color: var(--color-text); }
  .sheet h2 { font-size: 13pt; margin: 4mm 0 2mm; color: var(--color-text); }
  .sheet h3 { font-size: 11pt; margin: 3mm 0 1mm; color: var(--color-text); }
  .sheet th, .sheet td { border: 1px solid var(--color-input-line-hover); }
  .sheet-meta th { width: 14%; }
  .sheet-meta td { width: 36%; height: 9mm; }
  .sheet-meta .approve { height: 18mm; }
  .sheet-trace, .sheet-foot { font-size: 9pt; color: var(--color-text-sub); }
  .sheet-version { font-size: 7.5pt; color: var(--color-text-sub); margin-top: 2mm; }
  .diagram { box-shadow: none; break-inside: avoid; }
  .sheet-diagram { max-width: 120mm; margin: 2mm 0 3mm; padding: 2mm; }
  .ref-table { overflow: visible; border: 0; }
  .ref-table table { font-size: 8.5pt; }
  .ref-table th, .ref-table td { padding: 3px 5px; border: 1px solid var(--color-input-line-hover); }
  .ref-block { break-inside: auto; }
  .sheet-compare th, .sheet-compare td { padding: 3px 5px; font-size: 9pt; }
  .sheet h3 { break-after: avoid; }
}

/* Places of header items Engineering AI does not have yet (platform spec ch3 3.1.1 (3)): the items keep Review AI's order (nothing is
   reordered), but an item not shown takes no room either, so no empty gap appears (owner decision 2026-11-14: "do not move other items
   there" is read as "do not change the order"). */
.header-slot { display: none; }

/* Review AI's header, footer, top page and pricing, and the official site's strengths page structure
   (owner decision 2026-11-14: the same structure and look as Review AI; only the content differs).
   Values: docs/design/review-ai-structure.md §1–§7 (computed in Chromium from hiragg/mechowl-review MechOwlReview/src/style.css
   at e13c93a6) and hiragg/mechowl-web src/styles/site.css 193–246 (f73143a). Colours only through tokens.css variables. */

/* The header and footer come from the canonical copy platform-copies/design/chrome/chrome.css (Review AI, PR #555 701053796,
   not merged yet), loaded before this file and never rewritten. Only what this product adds is styled here: the empty places
   (no language switch, no account yet) stay hidden, whatever display the canonical rules give them. */
.site-header [hidden], .site-header .header-nav-more[hidden], .site-header .header-account[hidden] { display: none !important; }

/* ---- contact (closed box before the footer, §6) ---- */
.contact { width: min(1100px, 94%); margin: 40px auto 0; padding: 0 22px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; }
.contact summary { display: list-item; min-height: 64px; padding: 20px 0; box-sizing: border-box; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--color-heading); }
.contact[open] summary { min-height: 56px; }
.contact p { margin: 0 0 14px; font-size: 14px; color: var(--color-text-2); }
.contact-faq { max-width: 1480px; margin: 4px auto 0; padding: 0 5%; text-align: right; font-size: 14px; }
.contact-faq a { display: inline-flex; align-items: center; min-height: 44px; }
/* ---- top page (§2): main 1400 px; hero; sections with a kicker and a heading; cards ---- */
.page-top main { max-width: 1400px; padding: 24px 3%; }
.home-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding: 64px 56px 56px; border-radius: 28px; background: var(--hero-bg); color: var(--color-text); box-shadow: var(--shadow-hero); }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px), linear-gradient(var(--hero-grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-fine) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%); }
.home-copy { min-width: 0; }
.brand-tagline { margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; color: var(--color-sky); word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
.home-hero .home-title { margin: 0 0 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 4.4vw, 64px); line-height: 1.12; letter-spacing: -.02em; text-transform: uppercase; color: var(--color-heading); }
.home-title .title-line { display: block; }
.home-subcopy { margin: 0; font-size: clamp(19px, 1.75vw, 25px); font-weight: 700; line-height: 1.5; color: var(--color-heading); }
.home-actions.home-start { display: flex; flex-direction: column; max-width: 440px; margin: 40px 0 8px; gap: 22px; }
.start-button { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 24px; font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; border-radius: 14px; border: 1px solid transparent; transition: background .15s, transform .15s; }
.start-button.primary { background: linear-gradient(180deg, var(--color-primary-top), var(--color-primary-bottom)); color: var(--color-primary-text); border-color: var(--color-primary-bottom); box-shadow: var(--shadow-primary); }
.start-button.primary:hover { background: linear-gradient(180deg, var(--color-primary-hover-top), var(--color-primary-hover-bottom)); color: var(--color-primary-text); transform: translateY(-1px); }
/* the second start button is a free action: Review AI's secondary (ghost) button of the top's actions, not its amber (paid) one
   (MechOwlReview/src/style.css .home-actions button.ghost; owner answer 2026-11-14) */
.start-button.ghost { background: var(--color-ghost-bg); color: var(--color-ghost-text); border-color: var(--color-ghost-line); box-shadow: none; }
.start-button.ghost:hover { background: var(--color-ghost-bg-hover); color: var(--color-ghost-text); border-color: var(--color-ghost-line-hover); }
.start-note { display: block; margin: -6px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--color-text-2); }
.home-strengths { max-width: 440px; margin: 14px 0 0; }
.home-strengths-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 13px 16px 13px 14px; border-radius: 12px; border: 1px solid var(--strengths-link-line); background: var(--strengths-link-bg); color: var(--strengths-link-text); text-decoration: none; font-size: 14.5px; font-weight: 650; letter-spacing: .01em; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.home-hero .home-strengths-link { color: var(--strengths-link-text); }
.home-strengths-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--strengths-link-mark); opacity: .55; transform: scaleX(.35); transform-origin: left; transition: transform .3s, opacity .3s; }
.home-strengths-mark { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--strengths-link-mark); transform: rotate(45deg); }
.home-strengths-text { flex: 1; }
.home-strengths-arrow { flex: none; font-size: 16px; color: var(--strengths-link-arrow); transition: transform .2s; }
.home-strengths-link:hover, .home-strengths-link:focus-visible { border-color: var(--strengths-link-line-hover); color: var(--strengths-link-text); }
.home-strengths-link:hover::after, .home-strengths-link:focus-visible::after { transform: scaleX(1); opacity: .9; }
.home-strengths-link:hover .home-strengths-arrow { transform: translateX(4px); }
.home-visual { min-width: 0; }
.home-companion { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; --home-owl-h: 104px; }
.home-companion .owl-avatar { display: inline-flex; flex-direction: column; align-items: center; flex: none; gap: 1px; }
.home-companion .owl-avatar img { display: block; height: var(--home-owl-h); width: auto; }
.home-companion .owl-avatar small { font-size: 9px; font-weight: 600; line-height: 1.2; color: var(--color-text-2); }
.home-speech { position: relative; max-width: 430px; margin-top: calc(var(--home-owl-h) * .326 - 24px); padding: 12px 16px; background: var(--color-bubble-bg); color: var(--color-bubble-text); border-radius: 16px; font-size: 14px; font-weight: 500; line-height: 1.7; box-shadow: var(--shadow-bubble); }
.home-speech::before { content: ""; position: absolute; left: -11px; top: 14px; width: 12px; height: 20px; background: var(--color-bubble-bg); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.product-preview { overflow: hidden; background: var(--color-preview-bg); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; box-shadow: var(--shadow-preview); color: var(--color-preview-app); }
.preview-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--color-preview-chrome); border-bottom: 1px solid var(--color-preview-line); color: var(--color-preview-text); font-size: 11px; }
.preview-dots { display: flex; gap: 6px; }
.preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--preview-dot-1); }
.preview-dots i:nth-child(2) { background: var(--preview-dot-2); }
.preview-dots i:nth-child(3) { background: var(--preview-dot-3); }
.preview-app { margin: 0 auto 0 10px; font-weight: 700; color: var(--color-preview-app); }
.preview-body img { display: block; width: 100%; height: auto; }
.preview-disclaimer { margin: 0; padding: 8px 14px; background: var(--color-preview-bg); border-top: 1px solid var(--color-preview-line); color: var(--color-preview-text); font-size: 11px; }
@media (max-width: 1100px) { .home-hero { padding: 48px 36px; } }
@media (max-width: 850px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 18px 20px; border-radius: 20px; }
  .home-hero .home-title { font-size: clamp(36px, 6vw, 52px); }
}
@media (max-width: 700px) { .home-companion { --home-owl-h: 84px; } }
@media (max-width: 520px) {
  .page-top main { padding: 12px; }
  .brand-tagline { font-size: 14px; margin-bottom: -2px; }
  .home-hero .home-title { font-size: clamp(30px, 8.6vw, 38px); margin-bottom: 14px; }
  .home-subcopy { font-size: 17px; }
  .home-actions.home-start { margin-top: 28px; gap: 18px; }
  .start-button { min-height: 56px; font-size: 16px; }
  .home-strengths { max-width: none; }
  .home-strengths-link { font-size: 14px; }
}

.home-section { padding: 56px 0 0; }
.section-head { max-width: 960px; margin: 0 0 22px; }
.section-kicker { margin: 0 0 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--color-link); }
.home-section .section-heading, .trust-heading { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: var(--color-heading); }
.section-lead, .trust-lead { max-width: 720px; margin: 12px 0 0; font-size: 16px; line-height: 1.75; color: var(--color-text-2); }
.home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; }
.home-card-icon { grid-row: span 2; width: 56px; height: 56px; }
.home-icon { display: block; width: 56px; height: 56px; }
.home-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--color-heading); }
.home-card p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--color-text-2); }
.step-no { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--color-step-no-bg); color: var(--color-step-no-text); font: 700 12px/1 var(--font-mono); vertical-align: 2px; }
.section-note { margin: 14px 0 0; font-size: 12.5px; color: var(--color-text-sub); }
.home-trust { padding: 56px 0 0; }
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-tile { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--trust-tile-bg); border: 1px solid var(--color-line); border-radius: 18px; }
.trust-icon { flex: none; width: 56px; height: 56px; }
.trust-tile h3 { margin: 2px 0 6px; font-size: 16px; font-weight: 700; color: var(--color-heading); }
.trust-tile p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-text-2); }
.faq-security-link { margin: 16px 0 0; text-align: center; font-size: 14px; }
.faq-security-link a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 850px) { .home-cards, .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 700px) {
  .home-section, .home-trust { padding-top: 40px; }
  .home-section .section-heading, .trust-heading { font-size: 23px; }
  .home-card, .trust-tile { padding: 14px; }
  .home-card { grid-template-columns: 48px minmax(0, 1fr); }
  .home-card-icon, .trust-icon, .home-icon { width: 48px; height: 48px; }
}

/* 計算を探す (added under the hero; Review AI has no search): the search box, then the lists as sub-blocks */
.search label { display: block; margin-bottom: var(--space-2); font-weight: 700; color: var(--color-heading); }
.search-box { position: relative; max-width: 760px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-sub); pointer-events: none; }
.search input { width: 100%; min-height: 56px; padding-left: 48px; font-size: 18px; border-radius: 14px; border-color: var(--color-input-line); box-shadow: var(--shadow-sm); }
.results-list { list-style: none; max-width: 760px; padding: 0; margin: var(--space-2) 0 0; background: var(--color-surface-2); border: 1px solid var(--color-input-line); border-radius: 12px; }
.results-list:empty { display: none; }
.results-list li { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); min-height: var(--tap); }
.results-list .card-sub { display: block; }
.search-block { margin-top: var(--space-8); }
.search-block[hidden] { display: none; }
.search-block > h3 { margin: 0 0 var(--space-3); font-size: 20px; font-weight: 800; color: var(--color-heading); }

/* FUNCTION (§2.4) */
.fn-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 13.5px; color: var(--color-text); }
.fn-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fn-legend li:nth-child(1) .fn-icon { color: var(--color-link); }
.fn-legend li:nth-child(2) .fn-icon { color: var(--color-amber-badge); }
.fn-icon { flex: none; width: 18px; height: 18px; vertical-align: -3px; }
.fn-mark { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-weight: 700; white-space: nowrap; }
.fn-mark--yes { color: var(--color-link); }
.fn-mark--partial { color: var(--color-amber-badge); }
.fn-detail { display: block; margin-top: 2px; color: var(--color-text); }
.compare-wrap { overflow-x: auto; background: var(--color-surface-2); border: 1px solid var(--color-compare-frame); border-radius: 16px; }
.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.6; word-break: auto-phrase; line-break: strict; }
.compare-table th, .compare-table td { padding: 13px 16px; border-bottom: 1px solid var(--color-table-line); vertical-align: top; text-align: left; color: var(--color-text); }
.compare-table tr > * + * { border-left: 1px solid var(--color-table-line); }
.compare-table thead th { background: var(--color-surface-3); font-size: 15.5px; font-weight: 800; color: var(--color-heading); border-bottom: 2px solid var(--color-input-line); text-align: center; }
.compare-table thead th:first-child { width: 30%; }
.compare-table thead th:not(:first-child) { width: 35%; }
.compare-table th[scope="row"] { font-weight: 700; background: var(--color-row-head); }
.compare-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.compare-table .cost-body tr > * { border-bottom: 2px solid var(--color-compare-frame); }
.compare-table .cost-row > * { background: var(--color-cost-row); }
.table-badge { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--color-amber-badge); }
.table-badge.is-open { color: var(--color-link); }
.cost-main { display: block; font-size: 21px; font-weight: 800; line-height: 1.35; color: var(--color-heading); }
.cost-sub { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--color-text-2); }
.compare-note, .compare-link, .compare-lead { margin: 14px 0 0; font-size: 14px; color: var(--color-text-2); }
.compare-lead { margin: 0 0 16px; }
.compare-link .text-button { margin-left: 6px; font-weight: 700; color: var(--color-link); }
@media (max-width: 600px) {
  .compare-table { font-size: 13.5px; }
  .compare-table th, .compare-table td { padding: 10px 9px; }
  .compare-table thead th { font-size: 14px; }
  .compare-table thead th:first-child { width: 28%; }
  .compare-table thead th:not(:first-child) { width: 36%; }
  .compare-table th[scope="row"] { font-size: 12.5px; padding: 10px 7px; }
  .cost-main { font-size: 17px; }
  .fn-mark { white-space: normal; }
}

/* PRICING (§4) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-template-rows: auto auto; gap: 8px 14px; }
.plan-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.plan-marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; margin: 0; min-height: 28px; }
.plan-reco { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 800; line-height: 1.5; color: var(--color-reco); border: 1px solid var(--color-reco); }
.plan-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; background: var(--color-surface-2); border: 1px solid var(--color-input-line); border-radius: 16px; color: var(--color-text); }
.plan-card .plan-name { margin: 0; font-size: 24px; line-height: 1.25; text-align: center; color: var(--color-heading); }
.plan-card .plan-status { margin: -4px 0 0; text-align: center; }
.plan-card .plan-status .table-badge { display: inline-block; margin: 0; }
.plan-card .plan-for { margin: 0; font-size: 14px; text-align: center; color: var(--color-text-2); }
.plan-card .plan-price { margin: 0; }
.pack-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pack-table th, .pack-table td { padding: 7px 4px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.pack-table th { white-space: nowrap; color: var(--color-heading); }
.pack-table td.plan-credits { white-space: nowrap; font-weight: 700; color: var(--color-heading); }
.pack-table small { display: block; font-weight: 400; color: var(--color-text-2); white-space: normal; }
.plan-facts { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.plan-facts li + li { margin-top: 4px; }
.plan-buy { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.plan-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 800; text-align: center; text-decoration: none; background: var(--color-amber); color: var(--color-amber-text); border: 1px solid var(--color-amber); box-shadow: var(--shadow-amber); }
.plan-cta:hover { background: var(--color-amber-hover); color: var(--color-amber-text); }
/* the free column's start is a free action: Review AI's free (teal, primary) action, not the amber purchase button (owner 2026-11-14) */
.plan-cta.plan-cta--free { background: linear-gradient(180deg, var(--color-primary-top), var(--color-primary-bottom)); color: var(--color-primary-text); border-color: var(--color-primary-bottom); box-shadow: var(--shadow-primary); }
.plan-cta.plan-cta--free:hover { background: linear-gradient(180deg, var(--color-primary-hover-top), var(--color-primary-hover-bottom)); color: var(--color-primary-text); }
.plan-cta:disabled { background: transparent; border: 1px dashed var(--color-disabled-line); color: var(--color-disabled-text); box-shadow: none; cursor: not-allowed; }
.pricing-notes { margin: 18px 0 0; padding-left: 20px; color: var(--color-text); }
.pricing-notes li { font-size: 14px; }
.pricing-more { margin-top: 10px; }
.pricing-more summary { display: list-item; min-height: 44px; padding: 10px 0; box-sizing: border-box; cursor: pointer; font-weight: 700; color: var(--color-text); }
.pricing-more li { font-size: 13.5px; color: var(--color-text-2); }
.pricing-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 16px 0 0; }
.pricing-help a { display: inline-flex; align-items: center; min-height: 44px; }
.owl-note { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 13px; color: var(--color-text); }
.owl-note img { flex: none; height: 40px; width: auto; }
@media (max-width: 600px) {
  .plan-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .plan-col { grid-row: auto; grid-template-rows: auto auto; gap: 6px; }
  .plan-card { padding: 14px; }
  .plan-card .plan-name { font-size: 21px; }
  .cost-main { font-size: 18px; }
}

/* the collapsed full text (Review AI #home-terms) */
.home-terms .data-handling { margin: 20px 0 0; padding: 0 22px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; }
.data-handling > details > summary { display: list-item; min-height: 64px; padding: 20px 0; box-sizing: border-box; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--color-heading); }
.data-handling .legal-links { margin: 0 0 12px; font-size: 14px; color: var(--color-text-2); }
.data-handling .legal-links a { margin-left: 10px; }
.terms-summary { margin: 0 0 16px; }
.terms-summary h3 { margin: 12px 0 4px; font-size: 16px; }
.terms-section { border-top: 1px solid var(--color-line); }
.terms-section summary { display: list-item; min-height: 44px; padding: 10px 0; box-sizing: border-box; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--color-text); }
.terms-section p, .terms-section li { font-size: 14px; line-height: 1.8; color: var(--color-text-2); }

@media print {
  .home-hero, .home-visual, .home-start, .home-strengths, #search, .owl-note { display: none !important; }
}