/* Figma node 368:272 — final geometry and surface overrides. */
@media (min-width:801px) {
  .theory.section { min-height:2410px; padding:0; overflow:visible; background:#161616; }
  .theory-backdrop { position:sticky; z-index:0; top:0; width:100%; height:100vh; margin-bottom:-100vh; overflow:hidden; background:#161616; pointer-events:none; }
  .theory-glow { display:block; position:absolute; z-index:0; top:17%; left:50%; width:min(105.5vw,2025px); height:auto; max-width:none; transform:translateX(-50%); opacity:1; }
  .theory-bg { display:block; position:absolute; z-index:1; inset:auto auto 0 50%; width:max(100vw,1920px); height:auto; max-width:none; margin:0; object-fit:contain; object-position:center bottom; transform:translateX(-50%); opacity:1; pointer-events:none; }
  .theory-heading { position:absolute; z-index:2; top:100px; left:max(7vw,54px); width:auto; margin:0; }
  .theory h2 { width:1003px; max-width:calc(100vw - 108px); font:700 68px/1.3 "Noto Sans SC",sans-serif; letter-spacing:0; }
  .theory-grid { position:relative; z-index:2; display:grid; grid-template-columns:575px 575px; grid-template-rows:repeat(4,410px); width:1342px; max-width:calc(100% - 120px); height:auto; margin:0 auto; padding-top:139px; gap:150px 191px; }
  .theory-grid article,.theory-grid article:nth-child(n) { --offset:0px; position:relative; display:grid; grid-template-columns:40px 64px 18px minmax(0,1fr) 40px; grid-template-rows:145px 1fr; box-sizing:border-box; width:368px; min-height:410px; height:410px; justify-self:center; align-self:stretch; margin:0; padding:8px 9px; overflow:hidden; border:0; border-radius:4px; background:#fff; color:#161616; box-shadow:none; opacity:0; transform:translateY(72px) scale(.96)!important; transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)!important; }
  .theory-grid article:nth-child(1) { grid-column:2; grid-row:1; }
  .theory-grid article:nth-child(2) { grid-column:1; grid-row:2; transition-delay:.05s!important; }
  .theory-grid article:nth-child(3) { grid-column:2; grid-row:3; transition-delay:.05s!important; }
  .theory-grid article:nth-child(4) { grid-column:1; grid-row:4; transition-delay:.05s!important; }
  .theory-grid article.is-active { opacity:1; transform:translateY(0) scale(1)!important; }
  .theory-grid article::before { content:""; position:absolute; z-index:2; inset:8px 9px; width:auto; height:auto; box-sizing:border-box; border:.565px solid #161616; background:transparent; pointer-events:none; }
  .theory-grid article::after { content:""; position:absolute; z-index:2; top:152px; right:9px; bottom:auto; left:9px; width:auto; height:0; border-top:.565px solid #161616; background:transparent; pointer-events:none; }
  .theory-grid article img { position:relative; z-index:1; grid-column:2; grid-row:1; align-self:center; justify-self:center; width:64px; height:64px; margin:0; object-fit:contain; }
  .theory-grid h3 { position:relative; z-index:1; display:block; grid-column:4; grid-row:1; align-self:center; width:auto; margin:0; font:400 28px/1.1075 "Noto Sans SC",sans-serif; letter-spacing:0; }
  .theory-grid p { position:relative; z-index:1; grid-column:2/5; grid-row:2; width:auto; margin:0; padding:88px 0 0; border:0; font:400 20px/1.2 "Noto Sans SC",sans-serif; }
}

@media (max-width:800px) {
  .theory.section { padding-top:60px; }
  .theory-backdrop { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .theory-glow { position:absolute; top:40px; left:50%; width:1100px; max-width:none; transform:translateX(-50%); opacity:.85; }
  .theory-bg { display:block; position:absolute; z-index:1; width:900px; max-width:none; left:50%; top:70px; transform:translateX(-50%); opacity:.75; }
  .theory-grid article,.theory-grid article:nth-child(n) { border-radius:4px; }
}