/* 本文の比較専用。Hero、共通ヘッダー、フッター、別ページには適用しない。
   掲載文・並び順・リンク・フォームのDOMは現行サイトのまま。
   10 は現行 site-shell.css + トップページ inline CSS をそのまま使う。 */

/* 共通の安全な土台。hidden の表示方法やフォームの状態は変更しない。 */
body[data-body-variant] #top > section:not(.hero) :where(.wrap,.head,.ks,.kc,.row,.row .x,.pb,.story,.pf,.ask,.mail,.mail > *,form,.eventcard,.eventcard > *){min-width:0}
body[data-body-variant] #top > section:not(.hero) :where(h2,h3,p,.kc b,.kc span,.row span,.btn){overflow-wrap:anywhere}

/* 03 — Refero を起点にした、白い編集ページ。 */
body[data-body-variant="03"] #top > section:not(.hero){
  --ink:#171717;--gray:#595959;--mute:#686868;--line:#dedede;--w:#fff;
  color:var(--ink);background:#fff;padding:100px 0;border-bottom:1px solid #e7e7e7;
}
body[data-body-variant="03"] #top > section:not(.hero) > .wrap{max-width:1264px;padding-inline:48px;display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.76fr);column-gap:76px;row-gap:26px;align-items:start}
body[data-body-variant="03"] #top > section:not(.hero) > .wrap > .head{grid-column:1;grid-row:1;margin:0;max-width:21rem}
body[data-body-variant="03"] #top > section:not(.hero) > .wrap > :not(.head){grid-column:2}
body[data-body-variant="03"] #top > section:not(.hero) .eye{font-family:var(--sans);font-style:normal;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#656565}
body[data-body-variant="03"] #top > section:not(.hero) .head h2{font-weight:400;font-size:clamp(28px,2.7vw,38px);line-height:1.5;letter-spacing:.03em;margin-top:20px;text-wrap:balance}
body[data-body-variant="03"] #top > section:not(.hero) .head p{font-size:16px;line-height:2;margin-top:24px}
body[data-body-variant="03"] #top > section:not(.hero) .ks{gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-body-variant="03"] #top > section:not(.hero) .kc{background:#f5f5f3;border:1px solid #ededeb;border-radius:28px;box-shadow:none;padding:30px;gap:14px;transition:background .15s,border-color .15s}
body[data-body-variant="03"] #top > section:not(.hero) .kc :is(b,h3){font-weight:400;font-size:22px}
body[data-body-variant="03"] #top > section:not(.hero) .kc .go{font-family:var(--sans);font-style:normal;font-size:16px;margin-top:18px;flex:0}
body[data-body-variant="03"] #top > section:not(.hero) :is(a.kc,.row):is(:hover,:focus-visible){transform:none;background:#e9e9e6;border-color:#bdbdb7;box-shadow:none}
body[data-body-variant="03"] #top > section:not(.hero) .work-item{min-height:250px;padding:32px;background:#f5f5f3;border:1px solid #dededb;border-radius:28px}
body[data-body-variant="03"] #top > section:not(.hero) .work-item .im{width:66px;height:66px;background:#fff;border:1px solid #e4e4df;border-radius:50%;margin-bottom:24px;color:#171717}
body[data-body-variant="03"] #top > section:not(.hero) .seclink{margin-top:0}
body[data-body-variant="03"] #top > section:not(.hero) .seclink a{font-family:var(--sans);font-size:16px;font-style:normal}
body[data-body-variant="03"] #top > section:not(.hero) .story{background:#f5f5f3;border:1px solid #e5e5e1;border-radius:30px;box-shadow:none;padding:44px}
body[data-body-variant="03"] #top > section:not(.hero) .story h3{font-weight:400;font-size:clamp(24px,2.6vw,34px);margin-block:22px}
body[data-body-variant="03"] #top > section:not(.hero) .story p{color:#505050;line-height:2}
body[data-body-variant="03"] #top > section:not(.hero) .btn{border-radius:999px;box-shadow:none;background:#171717;color:#fff;border:1px solid #171717;padding:14px 22px;font-size:16px;line-height:1.5;min-height:44px}
body[data-body-variant="03"] #top > section:not(.hero) .btn.o{background:#fff;color:#171717;border-color:#d5d5d0}
body[data-body-variant="03"] #top > section:not(.hero) .btn:is(:hover,:focus-visible){transform:none;background:#353535;color:#fff}
body[data-body-variant="03"] #top > section:not(.hero) .h3{font-size:20px;font-weight:400;margin:22px 0 0}
body[data-body-variant="03"] #top > section:not(.hero) .rows{gap:0;border-top:1px solid #ccc}
body[data-body-variant="03"] #top > section:not(.hero) .row{border-radius:0;padding:24px 0;background:#fff;box-shadow:none;border-bottom:1px solid #d5d5d0;align-items:start;gap:18px}
body[data-body-variant="03"] #top > section:not(.hero) .row .tg{font-family:var(--sans);font-style:normal;font-size:14px;min-width:8em;margin-top:3px}
body[data-body-variant="03"] #top > section:not(.hero) .row .x{font-size:16px;line-height:1.9}
body[data-body-variant="03"] #top > section#free:not(.hero) .ks{grid-template-columns:1fr;gap:0}
body[data-body-variant="03"] #top > section#free:not(.hero) .kc{border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:20px;background:#fff;border:0;border-bottom:1px solid #d5d5d0;padding:22px 0}
body[data-body-variant="03"] #top > section#free:not(.hero) .kc .go{margin:0;align-self:center}
body[data-body-variant="03"] #top > section#products:not(.hero) > .wrap{grid-template-columns:1fr;row-gap:38px}
body[data-body-variant="03"] #top > section#products:not(.hero) > .wrap > .head{grid-column:1;grid-row:auto;max-width:none}
body[data-body-variant="03"] #top > section#products:not(.hero) > .wrap > .ks{grid-column:1;gap:32px}
body[data-body-variant="03"] #top > section#products:not(.hero) .prod{padding:20px 20px 36px;border-radius:32px;gap:20px}
body[data-body-variant="03"] #top > section#products:not(.hero) .prod img{border-radius:20px;margin:0}
body[data-body-variant="03"] #top > section#products:not(.hero) .prod .pb{padding:4px 12px;gap:18px}
body[data-body-variant="03"] #top > section#products:not(.hero) .prod h3{font-size:27px}
body[data-body-variant="03"] #top > section:not(.hero) .pf{grid-template-columns:110px minmax(0,1fr);gap:30px;padding:32px;background:#f5f5f3;box-shadow:none;border-radius:28px}
body[data-body-variant="03"] #top > section:not(.hero) .pf img{width:110px;height:110px;filter:grayscale(1)}
body[data-body-variant="03"] #top > section:not(.hero) .pf p{color:#444}
body[data-body-variant="03"] #top > section:not(.hero) .ask{background:#fff;border:1px solid #d5d5d0;border-radius:28px;padding:36px;text-align:left}
body[data-body-variant="03"] #top > section:not(.hero) .ask b{font-weight:400}
body[data-body-variant="03"] #top > section:not(.hero) .ask p{color:#555}
body[data-body-variant="03"] #top > section:not(.hero) .faq{gap:0;border-top:1px solid #d5d5d0}
body[data-body-variant="03"] #top > section:not(.hero) .faq details{border-radius:0;background:#fff;border-bottom:1px solid #d5d5d0;box-shadow:none;padding-inline:0}
body[data-body-variant="03"] #top > section:not(.hero) .faq summary{padding-block:24px;line-height:1.8}
body[data-body-variant="03"] #top > section:not(.hero) .faq .a{color:#595959;line-height:2}
body[data-body-variant="03"] #top > section#mail:not(.hero) > .wrap,body[data-body-variant="03"] #top > section#event:not(.hero) > .wrap{display:block}
body[data-body-variant="03"] #top > section:not(.hero) .mail{background:#171717;color:#fff;padding:58px;border-radius:36px;gap:56px;box-shadow:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body[data-body-variant="03"] #top > section:not(.hero) .mail::before{content:none}
body[data-body-variant="03"] #top > section:not(.hero) .mail :is(.eye,.ms,.how,label,.note,.msg){color:#d4d4d4}
body[data-body-variant="03"] #top > section:not(.hero) .mail h2{font-weight:400;font-size:36px;margin-top:20px}
body[data-body-variant="03"] #top > section:not(.hero) .mail .how{background:#272727;border:1px solid #3a3a3a;border-radius:18px;padding:20px}
body[data-body-variant="03"] #top > section:not(.hero) .mail form{padding:26px;border:1px solid #383838;border-radius:24px;background:#222}
body[data-body-variant="03"] #top > section:not(.hero) .mail input{background:#fff;color:#171717;border-color:#aaa}
body[data-body-variant="03"] #top > section:not(.hero) .mail button{background:#fff;color:#171717;border-color:#fff}
body[data-body-variant="03"] #top > section:not(.hero) .mail .mockline{background:#303030;color:#e8e8e8;border-color:#aaa}
body[data-body-variant="03"] #top > section:not(.hero) .eventcard{background:#f1f1ef;color:#171717;box-shadow:none;border:1px solid #d5d5d0;border-radius:32px;padding:48px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px}
body[data-body-variant="03"] #top > section:not(.hero) .eventcard::before{content:none}
body[data-body-variant="03"] #top > section:not(.hero) .eventcard h2{font-weight:400;font-size:clamp(26px,2.7vw,38px)}
body[data-body-variant="03"] #top > section:not(.hero) .eventcard :is(p,.eye,.eventnote){color:#525252}
body[data-body-variant="03"] #top > section:not(.hero) .eventfacts{gap:0}
body[data-body-variant="03"] #top > section:not(.hero) .eventfacts span{background:transparent;border:0;border-top:1px solid #c7c7c1;border-radius:0;padding:18px 8px;color:#444}
body[data-body-variant="03"] #top > section:not(.hero) .eventfacts b{color:#171717}
body[data-body-variant="03"] #top > section:not(.hero) :focus-visible{outline:3px solid #171717;outline-offset:4px}
body[data-body-variant="03"] #top > section:not(.hero) .mail :focus-visible{outline-color:#ffe294}

/* Text roles retain the existing card and heading hierarchy. */
body[data-body-variant="03"] #top > section:not(.hero) :is(.kc > span:not(.im):not(.go),.prod .m,.ask p,.faq summary,.faq .a,.eventfacts > span,.eventnote){font-size:16px}
body[data-body-variant="03"] #top > section:not(.hero) .kc .go{line-height:1.5}

/* 07 — AuthKit を起点にした、紺の道具箱。 */
body[data-body-variant="07"] #top > section:not(.hero){
  --ink:#ecf1fa;--gray:#bdc8dc;--mute:#b0bbd1;--line:#324563;--w:#0f1a2d;
  color:#ecf1fa;background-color:#080f1d;
  background-image:linear-gradient(rgba(156,184,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(156,184,226,.045) 1px,transparent 1px);
  background-size:44px 44px;padding:78px 0;border-bottom:1px solid #24324a;font-family:var(--sans);
}
body[data-body-variant="07"] #top > section:not(.hero) > .wrap{max-width:1256px;padding-inline:48px}
body[data-body-variant="07"] #top > section:not(.hero) .head{margin-bottom:32px;max-width:820px}
body[data-body-variant="07"] #top > section:not(.hero) .eye{color:#99beff;font-family:var(--sans);font-style:normal;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
body[data-body-variant="07"] #top > section:not(.hero) :is(h2,h3,.kc b,.ask b){font-family:var(--sans);font-weight:600;letter-spacing:-.015em}
body[data-body-variant="07"] #top > section:not(.hero) .head h2{font-size:clamp(27px,3vw,42px);line-height:1.5;margin-top:12px}
body[data-body-variant="07"] #top > section:not(.hero) .head p{color:#bdc8dc}
body[data-body-variant="07"] #top > section:not(.hero) .ks{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-body-variant="07"] #top > section:not(.hero) .kc{border:1px solid #324563;background:#0f1a2d;border-radius:14px;box-shadow:none;padding:28px;gap:14px;transition:background .16s,border-color .16s}
body[data-body-variant="07"] #top > section:not(.hero) .kc :is(b,h3){font-size:22px;color:#f2f5fc}
body[data-body-variant="07"] #top > section:not(.hero) .kc span{color:#bdc8dc}
body[data-body-variant="07"] #top > section:not(.hero) .kc .go{font-family:var(--sans);font-style:normal;font-size:13px;font-weight:600;color:#9cc3ff;border-color:#6a8dbd;flex:0}
body[data-body-variant="07"] #top > section:not(.hero) :is(a.kc,.row):is(:hover,:focus-visible){transform:none;box-shadow:none;background:#192b47;border-color:#91baff}
body[data-body-variant="07"] #top > section#start:not(.hero) .ks{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto}
body[data-body-variant="07"] #top > section#start:not(.hero) .kc:first-child{grid-column:1 / 3;background:linear-gradient(120deg,#162c50,#10203a);padding:34px;min-height:190px}
body[data-body-variant="07"] #top > section#start:not(.hero) .kc:first-child b{font-size:30px}
body[data-body-variant="07"] #top > section#start:not(.hero) .kc:nth-child(2){grid-column:3;grid-row:1 / 3;justify-content:center;background:#121f36}
body[data-body-variant="07"] #top > section#start:not(.hero) .kc:nth-child(2) b{font-size:27px}
body[data-body-variant="07"] #top > section#start:not(.hero) .kc:nth-child(2) span:not(.go){flex:0}
body[data-body-variant="07"] #top > section#works:not(.hero) .ks{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item{min-height:230px;position:relative;border:1px solid #324563;border-radius:14px;justify-content:flex-end}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child{grid-row:span 2;background:linear-gradient(145deg,#163358,#0f1a2d);min-height:430px;padding:36px}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child h3{font-size:38px}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:nth-child(4){grid-column:2 / 4}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item .im{width:56px;height:56px;background:#142b4d;color:#a6caff;border:1px solid #49678e;border-radius:12px;margin-bottom:22px}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child .im{width:100px;height:100px;background:#152941;border-radius:24px;margin-bottom:auto}
body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child .im .ic{width:48px;height:48px}
body[data-body-variant="07"] #top > section:not(.hero) .seclink a{font-family:var(--sans);font-style:normal;font-size:14px;border-color:#7296c9;color:#acd0ff}
body[data-body-variant="07"] #top > section:not(.hero) .story{background:linear-gradient(115deg,#142a4b,#0e192d);box-shadow:none;border:1px solid #405f8c;border-radius:18px;padding:42px;max-width:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px 50px}
body[data-body-variant="07"] #top > section:not(.hero) .story > .eye{grid-column:1 / -1}
body[data-body-variant="07"] #top > section:not(.hero) .story h3{grid-column:1;grid-row:2 / 4;font-size:clamp(24px,2.8vw,34px);line-height:1.7;margin:0}
body[data-body-variant="07"] #top > section:not(.hero) .story p{grid-column:2;color:#ccd6e7;line-height:2}
body[data-body-variant="07"] #top > section:not(.hero) .story .btns{grid-column:2;margin-top:0;align-self:end}
body[data-body-variant="07"] #top > section:not(.hero) .btn{background:#2563c4;color:#fff;border:1px solid #588edc;border-radius:8px;box-shadow:none;font-size:13px;line-height:1.7;padding:12px 20px}
body[data-body-variant="07"] #top > section:not(.hero) .btn.o{background:#15253e;color:#dceaff;border-color:#49648c}
body[data-body-variant="07"] #top > section:not(.hero) .btn:is(:hover,:focus-visible){transform:none;background:#244575;border-color:#a5c7ff;color:#fff}
body[data-body-variant="07"] #top > section#free:not(.hero) .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body[data-body-variant="07"] #top > section:not(.hero) .h3{color:#bdc8dc;font-family:var(--sans);font-size:16px;letter-spacing:.06em}
body[data-body-variant="07"] #top > section:not(.hero) .row{display:flex;flex-direction:column;align-items:flex-start;gap:18px;background:#0f1a2d;border:1px solid #324563;border-radius:14px;box-shadow:none;padding:28px;min-height:240px;font-size:15px}
body[data-body-variant="07"] #top > section:not(.hero) .row .tg{font-family:var(--sans);font-style:normal;min-width:0;font-size:11px;color:#b5d2ff;border:1px solid #3f5f8b;background:#142b4b;border-radius:5px;padding:4px 9px}
body[data-body-variant="07"] #top > section:not(.hero) .row .x{flex:1;color:#edf3fd;line-height:2}
body[data-body-variant="07"] #top > section#podcast:not(.hero) .btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body[data-body-variant="07"] #top > section#podcast:not(.hero) .btn{min-height:110px;justify-content:flex-start;padding:26px;font-size:15px;border-radius:14px}
body[data-body-variant="07"] #top > section#products:not(.hero) .prod{padding:16px 16px 28px;gap:10px}
body[data-body-variant="07"] #top > section#products:not(.hero) .prod img{border-radius:8px;margin-bottom:14px}
body[data-body-variant="07"] #top > section#products:not(.hero) .prod .pb{padding-inline:14px;gap:16px}
body[data-body-variant="07"] #top > section#products:not(.hero) .prod .m{color:#bdc8dc}
body[data-body-variant="07"] #top > section:not(.hero) .pf{background:#0f1a2d;border:1px solid #324563;border-radius:16px;box-shadow:none;padding:38px;grid-template-columns:160px minmax(0,1fr);gap:40px}
body[data-body-variant="07"] #top > section:not(.hero) .pf img{width:160px;height:160px;border-radius:18px;border:1px solid #54729d}
body[data-body-variant="07"] #top > section:not(.hero) .pf p{color:#ccd6e7}
body[data-body-variant="07"] #top > section:not(.hero) .ask{background:#112342;border:1px solid #456996;border-radius:16px;text-align:left;padding:38px}
body[data-body-variant="07"] #top > section:not(.hero) .ask b{font-size:25px}
body[data-body-variant="07"] #top > section:not(.hero) .ask p{color:#ccd6e7}
body[data-body-variant="07"] #top > section:not(.hero) .mail{background:#0f1a2d;box-shadow:none;border:1px solid #49678e;border-radius:18px;padding:0;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body[data-body-variant="07"] #top > section:not(.hero) .mail::before{content:none}
body[data-body-variant="07"] #top > section:not(.hero) .mail > div{padding:42px;border-right:1px solid #324563;background:linear-gradient(145deg,#163358,#0f1a2d)}
body[data-body-variant="07"] #top > section:not(.hero) .mail h2{font-size:32px;line-height:1.6;margin-top:18px}
body[data-body-variant="07"] #top > section:not(.hero) .mail .ms{color:#ccd6e7}
body[data-body-variant="07"] #top > section:not(.hero) .mail .how{color:#ccd6e7;background:#152b48;border:1px solid #3e587b;border-radius:8px;padding:20px;line-height:2}
body[data-body-variant="07"] #top > section:not(.hero) .mail form{padding:36px}
body[data-body-variant="07"] #top > section:not(.hero) .mail label{color:#c7d3e7}
body[data-body-variant="07"] #top > section:not(.hero) .mail input{background:#080f1d;color:#fff;border:1px solid #6881a5;border-radius:8px}
body[data-body-variant="07"] #top > section:not(.hero) .mail input::placeholder{color:#a7b9d5}
body[data-body-variant="07"] #top > section:not(.hero) .mail :is(.note,.msg){color:#bdc8dc}
body[data-body-variant="07"] #top > section:not(.hero) .mail .mockline{background:#152b48;color:#d9e8ff;border-color:#6d8fbe;border-radius:8px}
body[data-body-variant="07"] #top > section:not(.hero) .eventcard{background:#13294b;border:1px solid #5179b1;border-radius:18px;box-shadow:none;padding:40px;gap:42px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
body[data-body-variant="07"] #top > section:not(.hero) .eventcard::before{content:none}
body[data-body-variant="07"] #top > section:not(.hero) .eventcard h2{font-size:clamp(26px,2.8vw,36px);line-height:1.65}
body[data-body-variant="07"] #top > section:not(.hero) .eventcard :is(p,.eye,.eventnote){color:#d2e0f7}
body[data-body-variant="07"] #top > section:not(.hero) .eventfacts{gap:10px}
body[data-body-variant="07"] #top > section:not(.hero) .eventfacts span{background:#0f1f37;border:1px solid #45658f;border-radius:8px;color:#d2e0f7;line-height:1.8}
body[data-body-variant="07"] #top > section:not(.hero) .eventfacts b{color:#a8cbff}
body[data-body-variant="07"] #top > section:not(.hero) .faq details{background:#0f1a2d;border:1px solid #324563;border-radius:12px;box-shadow:none}
body[data-body-variant="07"] #top > section:not(.hero) .faq summary::before{font-family:var(--sans);font-style:normal;font-size:13px;color:#b5d2ff;border:1px solid #45658f;border-radius:4px;padding:0 6px}
body[data-body-variant="07"] #top > section:not(.hero) .faq summary::after,
body[data-body-variant="07"] #top > section:not(.hero) .faq .a{color:#c1d0e6}
body[data-body-variant="07"] #top > section:not(.hero) .faq .a a{color:#b5d2ff}
body[data-body-variant="07"] #top > section:not(.hero) :focus-visible{outline:3px solid #bdd8ff;outline-offset:4px}

/* 状態の可読性。通常の input 上書きより後に置くが、表示状態自体は変えない。 */
body[data-body-variant="03"] #top > section:not(.hero) .mail input[aria-invalid="true"],
body[data-body-variant="07"] #top > section:not(.hero) .mail input[aria-invalid="true"]{background:#fff4f4;color:#3f1717;border:2px solid #ce4343}

@media(max-width:1000px){
  body[data-body-variant="03"] #top > section:not(.hero) > .wrap{column-gap:38px;padding-inline:28px;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)}
  body[data-body-variant="03"] #top > section:not(.hero) .ks{gap:14px}
  body[data-body-variant="03"] #top > section:not(.hero) .kc{padding:22px}
  body[data-body-variant="03"] #top > section:not(.hero) .story{padding:30px}
  body[data-body-variant="03"] #top > section:not(.hero) :is(.mail,.eventcard){padding:36px;gap:30px;grid-template-columns:1fr}
  body[data-body-variant="03"] #top > section:not(.hero) .pf{grid-template-columns:1fr;justify-items:start;text-align:left}
  body[data-body-variant="07"] #top > section:not(.hero) > .wrap{padding-inline:28px}
  body[data-body-variant="07"] #top > section:not(.hero) .story{gap:22px;padding:30px}
  body[data-body-variant="07"] #top > section:not(.hero) .mail{grid-template-columns:1fr}
  body[data-body-variant="07"] #top > section:not(.hero) .mail > div{border-right:0;border-bottom:1px solid #324563}
  body[data-body-variant="07"] #top > section:not(.hero) .eventcard{grid-template-columns:1fr}
}

@media(max-width:767px){
  body[data-body-variant="03"] #top > section:not(.hero),body[data-body-variant="07"] #top > section:not(.hero){padding:62px 0}
  body[data-body-variant="03"] #top > section:not(.hero) > .wrap,
  body[data-body-variant="07"] #top > section:not(.hero) > .wrap{padding-inline:20px;display:block}
  body[data-body-variant="03"] #top > section:not(.hero) > .wrap > .head{margin-bottom:28px;max-width:none}
  body[data-body-variant="03"] #top > section:not(.hero) .head h2{font-size:30px;line-height:1.55;margin-top:12px}
  body[data-body-variant="03"] #top > section:not(.hero) .head p{margin-top:14px}
  body[data-body-variant="03"] #top > section:not(.hero) .ks,
  body[data-body-variant="07"] #top > section:not(.hero) .ks,
  body[data-body-variant="07"] #top > section#start:not(.hero) .ks,
  body[data-body-variant="07"] #top > section#works:not(.hero) .ks,
  body[data-body-variant="07"] #top > section#free:not(.hero) .rows,
  body[data-body-variant="07"] #top > section#podcast:not(.hero) .btns{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:14px}
  body[data-body-variant="03"] #top > section:not(.hero) .work-item{min-height:220px}
  body[data-body-variant="03"] #top > section:not(.hero) .seclink{margin-top:24px}
  body[data-body-variant="03"] #top > section:not(.hero) .h3{margin-block:34px 16px}
  body[data-body-variant="03"] #top > section:not(.hero) .story{padding:28px 22px;border-radius:24px}
  body[data-body-variant="03"] #top > section:not(.hero) .row{gap:8px 16px;padding-block:22px}
  body[data-body-variant="03"] #top > section#free:not(.hero) .kc{grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;padding:22px 0}
  body[data-body-variant="03"] #top > section#free:not(.hero) .kc > span:not(.go){grid-column:1;grid-row:2}
  body[data-body-variant="03"] #top > section#free:not(.hero) .kc .go{grid-column:2;grid-row:1 / 3}
  body[data-body-variant="03"] #top > section:not(.hero) .mail{padding:28px 20px;gap:28px;border-radius:26px}
  body[data-body-variant="03"] #top > section:not(.hero) .mail h2{font-size:28px}
  body[data-body-variant="03"] #top > section:not(.hero) .mail form{padding:20px 14px;border-radius:18px}
  body[data-body-variant="03"] #top > section:not(.hero) .eventcard{padding:28px 20px;border-radius:26px;gap:28px}
  body[data-body-variant="03"] #top > section:not(.hero) :is(.pf,.ask){padding:28px 22px}
  body[data-body-variant="07"] #top > section#start:not(.hero) .kc:first-child,
  body[data-body-variant="07"] #top > section#start:not(.hero) .kc:nth-child(2),
  body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child,
  body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:nth-child(4){grid-column:auto;grid-row:auto;min-height:0;padding:26px}
  body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child{min-height:310px}
  body[data-body-variant="07"] #top > section#works:not(.hero) .work-item:first-child .im{margin-bottom:34px}
  body[data-body-variant="07"] #top > section#start:not(.hero) .kc:nth-child(2) b{font-size:24px}
  body[data-body-variant="07"] #top > section:not(.hero) .story{grid-template-columns:1fr;padding:28px 22px;gap:18px}
  body[data-body-variant="07"] #top > section:not(.hero) .story > :is(.eye,h3,p,.btns){grid-column:1;grid-row:auto}
  body[data-body-variant="07"] #top > section:not(.hero) .row{min-height:210px;padding:26px}
  body[data-body-variant="07"] #top > section:not(.hero) .row .x{flex-basis:auto}
  body[data-body-variant="07"] #top > section:not(.hero) .mail > div,
  body[data-body-variant="07"] #top > section:not(.hero) .mail form{padding:28px 22px}
  body[data-body-variant="07"] #top > section:not(.hero) .mail h2{font-size:28px}
  body[data-body-variant="07"] #top > section:not(.hero) .eventcard{padding:28px 22px;gap:28px}
  body[data-body-variant="07"] #top > section:not(.hero) .pf{grid-template-columns:1fr;padding:28px 22px;gap:24px;justify-items:start;text-align:left}
  body[data-body-variant="07"] #top > section:not(.hero) .ask{padding:28px 22px}
  body[data-body-variant="03"] #top > section:not(.hero) .eventfacts,
  body[data-body-variant="07"] #top > section:not(.hero) .eventfacts{grid-template-columns:1fr}
  body[data-body-variant="03"] #top > section:not(.hero) .btn,
  body[data-body-variant="07"] #top > section:not(.hero) .btn{max-width:100%;white-space:normal;text-align:center}
}

@media(prefers-reduced-motion:reduce){
  body[data-body-variant] #top > section:not(.hero) *,
  body[data-body-variant] #top > section:not(.hero) *::before,
  body[data-body-variant] #top > section:not(.hero) *::after{transition:none!important;animation:none!important}
}