/* ParkZipply RevenueOS: Fluent 2 (web) tokens and components. Themes: light (default), dark, white. data-theme is set by the theme menu / system. */
:root {
  /* Color: neutral */
  --colorNeutralForeground1: #242424; --colorNeutralForeground2: #424242; --colorNeutralForeground3: #616161; --colorNeutralForegroundDisabled: #bdbdbd; --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralBackground1: #ffffff; --colorNeutralBackground1Hover: #f5f5f5; --colorNeutralBackground1Pressed: #e0e0e0; --colorNeutralBackground2: #fafafa; --colorNeutralBackground3: #f5f5f5; --colorNeutralBackground4: #f0f0f0; --colorNeutralBackground5: #ebebeb; --colorNeutralBackgroundDisabled: #f0f0f0;
  --colorNeutralStroke1: #d1d1d1; --colorNeutralStroke1Hover: #c7c7c7; --colorNeutralStroke2: #e0e0e0; --colorNeutralStroke3: #f0f0f0; --colorNeutralStrokeAccessible: #616161; --colorStrokeFocus1: #ffffff; --colorStrokeFocus2: #000000;
  --colorBackdrop: rgba(0, 0, 0, 0.4);
  /* Color: brand (communication blue) */
  --colorBrandBackground: #0f6cbd; --colorBrandBackgroundHover: #115ea3; --colorBrandBackgroundPressed: #0f548c; --colorBrandBackground2: #ebf3fc; --colorBrandBackground2Hover: #cfe4fa;
  --colorBrandForeground1: #0f6cbd; --colorBrandForegroundLink: #115ea3; --colorBrandStroke1: #0f6cbd;
  /* Color: status */
  --colorStatusSuccessForeground1: #107c10; --colorStatusSuccessBackground1: #f1faf1; --colorStatusSuccessBorder1: #9fd89f;
  --colorStatusWarningForeground1: #bc4b09; --colorStatusWarningBackground1: #fff9f5; --colorStatusWarningBorder1: #fdcfb4;
  --colorStatusDangerForeground1: #b10e1c; --colorStatusDangerBackground1: #fdf3f4; --colorStatusDangerBorder1: #eeacb2; --colorStatusDangerBackground3: #c50f1f;
  /* Type */
  --fontFamilyBase: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fontFamilyMono: "Cascadia Code", Consolas, "Courier New", monospace;
  --fontCaption1: 400 12px/16px var(--fontFamilyBase); --fontBody1: 400 14px/20px var(--fontFamilyBase); --fontBody1Strong: 600 14px/20px var(--fontFamilyBase);
  --fontSubtitle2: 600 16px/22px var(--fontFamilyBase); --fontSubtitle1: 600 20px/28px var(--fontFamilyBase); --fontTitle3: 600 24px/32px var(--fontFamilyBase);
  /* Shape, elevation, motion */
  --borderRadiusSmall: 2px; --borderRadiusMedium: 4px; --borderRadiusLarge: 6px; --borderRadiusXLarge: 8px; --borderRadiusCircular: 10000px;
  --shadow2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14); --shadow4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14); --shadow8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14); --shadow64: 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14);
  --durationFast: 100ms; --durationNormal: 200ms; --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1); --curveDecelerateMid: cubic-bezier(0.1, 0.9, 0.2, 1);
  --spacingXS: 4px; --spacingS: 8px; --spacingM: 12px; --spacingL: 16px; --spacingXL: 20px; --spacingXXL: 24px;
  --nav-w: 264px; --appbar-h: 48px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --colorNeutralForeground1: #ffffff; --colorNeutralForeground2: #d6d6d6; --colorNeutralForeground3: #adadad; --colorNeutralForegroundDisabled: #5c5c5c; --colorNeutralForegroundOnBrand: #ffffff;
    --colorNeutralBackground1: #292929; --colorNeutralBackground1Hover: #3d3d3d; --colorNeutralBackground1Pressed: #1f1f1f; --colorNeutralBackground2: #1f1f1f; --colorNeutralBackground3: #141414; --colorNeutralBackground4: #0f0f0f; --colorNeutralBackground5: #0a0a0a; --colorNeutralBackgroundDisabled: #141414;
    --colorNeutralStroke1: #666666; --colorNeutralStroke1Hover: #757575; --colorNeutralStroke2: #525252; --colorNeutralStroke3: #3d3d3d; --colorNeutralStrokeAccessible: #d6d6d6; --colorStrokeFocus1: #000000; --colorStrokeFocus2: #ffffff;
    --colorBackdrop: rgba(0, 0, 0, 0.6);
    --colorBrandBackground: #115ea3; --colorBrandBackgroundHover: #0f6cbd; --colorBrandBackgroundPressed: #0c3b5e; --colorBrandBackground2: #082338; --colorBrandBackground2Hover: #0c3b5e;
    --colorBrandForeground1: #479ef5; --colorBrandForegroundLink: #62abf5; --colorBrandStroke1: #479ef5;
    --colorStatusSuccessForeground1: #54b054; --colorStatusSuccessBackground1: #052505; --colorStatusSuccessBorder1: #107c10;
    --colorStatusWarningForeground1: #f7b88f; --colorStatusWarningBackground1: #4a1e04; --colorStatusWarningBorder1: #bc4b09;
    --colorStatusDangerForeground1: #e8909a; --colorStatusDangerBackground1: #3b0509; --colorStatusDangerBorder1: #b10e1c; --colorStatusDangerBackground3: #dc626d;
}
/* White theme: Fluent light colors on a pure white canvas, flat (no elevation), crisper borders. */
:root[data-theme="white"] {
  --colorNeutralBackground2: #ffffff; --colorNeutralBackground3: #f7f7f7; --colorNeutralBackground4: #f3f3f3; --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralStroke2: #d6d6d6; --colorNeutralStroke3: #ebebeb;
  --shadow2: none; --shadow4: none; --shadow8: 0 0 0 1px rgba(0,0,0,.08); --shadow16: 0 0 0 1px rgba(0,0,0,.1), 0 6px 16px rgba(0,0,0,.12);
}

/* ===== Marketing site (shares the app's Fluent 2 tokens above) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font: var(--fontBody1); color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground1); -webkit-font-smoothing: antialiased; line-height: 1.55; }
a { color: var(--colorBrandForegroundLink); } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--colorStrokeFocus2); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4, p { margin: 0; } img, svg { max-width: 100%; }
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--colorNeutralBackground1); padding: 8px 12px; border-radius: 4px; box-shadow: var(--shadow8); }
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.mut { color: var(--colorNeutralForeground3); }

/* Header */
.sh { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--colorNeutralBackground1) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--colorNeutralStroke2); }
.sh .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo-l { display: flex; align-items: center; gap: 10px; color: var(--colorNeutralForeground1); text-decoration: none; font: var(--fontSubtitle2); } .logo-l:hover { text-decoration: none; }
.logo-m { width: 30px; height: 30px; border-radius: 6px; background: var(--colorBrandBackground); color: #fff; display: grid; place-items: center; font-weight: 700; }
.logo-l b { color: var(--colorBrandForeground1); }
.sn { display: flex; gap: 4px; margin-left: 8px; } .sn a { color: var(--colorNeutralForeground2); text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 500; } .sn a:hover { background: var(--colorNeutralBackground1Hover); } .sn a[aria-current="page"] { color: var(--colorNeutralForeground1); background: var(--colorNeutralBackground3); font-weight: 600; }
.sh-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.menu-t { display: none; }
.tsel { border: 1px solid transparent; background: transparent; font: inherit; color: var(--colorNeutralForeground2); padding: 6px; border-radius: 6px; cursor: pointer; } .tsel:hover { background: var(--colorNeutralBackground1Hover); }

/* Buttons */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); font: var(--fontBody1Strong); cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.b:hover { background: var(--colorNeutralBackground1Hover); text-decoration: none; } .b.pri { background: var(--colorBrandBackground); border-color: transparent; color: #fff; } .b.pri:hover { background: var(--colorBrandBackgroundHover); } .b.lg { min-height: 48px; padding: 0 26px; font-size: 16px; } .b.sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.b:disabled { opacity: .55; cursor: not-allowed; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--colorBrandBackground) 16%, transparent), transparent 70%), var(--colorNeutralBackground1); padding: 72px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-block; font: 600 12px/16px var(--fontFamilyBase); letter-spacing: .06em; text-transform: uppercase; color: var(--colorBrandForeground1); background: var(--colorBrandBackground2); padding: 4px 10px; border-radius: 99px; margin-bottom: 16px; }
.hero h1 { font: 700 clamp(34px, 5vw, 54px)/1.1 var(--fontFamilyBase); letter-spacing: -.02em; } .hero h1 em { font-style: normal; color: var(--colorBrandForeground1); }
.hero p.lead { font-size: 18px; color: var(--colorNeutralForeground2); margin: 18px 0 28px; max-width: 54ch; } .cta { display: flex; gap: 12px; flex-wrap: wrap; } .fine { font-size: 13px; color: var(--colorNeutralForeground3); margin-top: 14px; }

/* App preview mock */
.mock { background: var(--colorNeutralBackground2); border: 1px solid var(--colorNeutralStroke2); border-radius: 12px; box-shadow: var(--shadow16); overflow: hidden; font-size: 12px; }
.mock-bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--colorNeutralBackground1); border-bottom: 1px solid var(--colorNeutralStroke2); } .mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--colorNeutralStroke1); }
.mock-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; } .mcol { background: var(--colorNeutralBackground3); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .mcol .mh { margin: 0; font: 600 11px var(--fontFamilyBase); color: var(--colorNeutralForeground3); text-transform: uppercase; letter-spacing: .04em; }
.mcard { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 6px; padding: 8px; box-shadow: var(--shadow2); } .mcard b { display: block; margin-bottom: 4px; } .mcard.drag { transform: rotate(2deg) translateX(8px); border-color: var(--colorBrandStroke1); box-shadow: var(--shadow16); }
.mtag { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 99px; background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); font-weight: 600; } .mtag.g { background: var(--colorStatusSuccessBackground1); color: var(--colorStatusSuccessForeground1); } .mtag.w { background: var(--colorStatusWarningBackground1); color: var(--colorStatusWarningForeground1); }
.mock-chat { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--colorNeutralBackground1); border-radius: 8px; border: 1px solid var(--colorNeutralStroke2); } .bub { max-width: 78%; padding: 6px 10px; border-radius: 12px; background: var(--colorNeutralBackground3); } .bub.me { align-self: flex-end; background: var(--colorBrandBackground); color: #fff; } .bub.ai { background: #5b5fc7; color: #fff; align-self: flex-end; }

/* Sections */
section.sec { padding: 72px 0; } section.sec.alt { background: var(--colorNeutralBackground2); border-block: 1px solid var(--colorNeutralStroke2); }
.sec-h { max-width: 720px; margin: 0 auto 40px; text-align: center; } .sec-h h2 { font: 700 clamp(26px, 3.4vw, 36px)/1.2 var(--fontFamilyBase); letter-spacing: -.01em; } .sec-h p { color: var(--colorNeutralForeground2); font-size: 17px; margin-top: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; align-items: center; }
.fc { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 12px; padding: 24px; box-shadow: var(--shadow2); } .fc .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); display: grid; place-items: center; margin-bottom: 14px; } .fc h3, .fc h2.h3like { font: var(--fontSubtitle2); margin-bottom: 6px; } .fc p { color: var(--colorNeutralForeground2); } .fc ul { margin: 10px 0 0; padding-left: 18px; color: var(--colorNeutralForeground2); } .fc li { margin: 3px 0; }
.steps4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; counter-reset: s; } .st { position: relative; padding: 20px; border-left: 3px solid var(--colorBrandBackground); background: var(--colorNeutralBackground1); border-radius: 0 10px 10px 0; counter-increment: s; border-top: 1px solid var(--colorNeutralStroke2); border-bottom: 1px solid var(--colorNeutralStroke2); border-right: 1px solid var(--colorNeutralStroke2); } .st::before { content: counter(s); font: 700 13px/1 var(--fontFamilyBase); color: var(--colorBrandForeground1); display: block; margin-bottom: 8px; } .st h3 { font: var(--fontSubtitle2); margin-bottom: 4px; }
.band { background: var(--colorBrandBackground); color: #fff; border-radius: 16px; padding: 48px; text-align: center; } .band h2 { font: 700 clamp(24px, 3vw, 32px)/1.2 var(--fontFamilyBase); } .band p { opacity: .9; margin: 12px auto 24px; max-width: 56ch; } .band .b { background: #fff; color: #0f548c; border-color: transparent; } .band .b:hover { background: #eef5fc; }
.pagehead { padding: 56px 0 32px; background: var(--colorNeutralBackground2); border-bottom: 1px solid var(--colorNeutralStroke2); } .pagehead h1 { font: 700 clamp(30px, 4vw, 42px)/1.15 var(--fontFamilyBase); letter-spacing: -.01em; } .pagehead p { color: var(--colorNeutralForeground2); font-size: 18px; margin-top: 10px; max-width: 64ch; }
.chips2 { display: flex; gap: 8px; flex-wrap: wrap; } .chip2 { padding: 4px 12px; border-radius: 99px; background: var(--colorNeutralBackground3); border: 1px solid var(--colorNeutralStroke2); font-size: 13px; }

/* Pricing */
.seg2 { display: inline-flex; border: 1px solid var(--colorNeutralStroke1); border-radius: 8px; overflow: hidden; background: var(--colorNeutralBackground1); } .seg2 button { border: 0; background: transparent; padding: 8px 18px; font: var(--fontBody1Strong); color: var(--colorNeutralForeground2); cursor: pointer; } .seg2 button.on { background: var(--colorBrandBackground); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; } .plan { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow2); } .plan.hl { border: 2px solid var(--colorBrandBackground); box-shadow: var(--shadow16); position: relative; } .plan .tag { position: absolute; top: -12px; left: 24px; background: var(--colorBrandBackground); color: #fff; font: 600 12px var(--fontFamilyBase); padding: 3px 12px; border-radius: 99px; }
.plan h3 { font: var(--fontSubtitle1); } .price-big { font: 700 40px/1 var(--fontFamilyBase); letter-spacing: -.02em; } .price-big small { font: 400 14px var(--fontFamilyBase); color: var(--colorNeutralForeground3); } .plan ul { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 6px; flex: 1; } .plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .plan li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--colorStatusSuccessForeground1); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.builder { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; } .bcat { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 12px; padding: 8px 20px 12px; margin-bottom: 16px; } .bcat h3 { font: 600 12px var(--fontFamilyBase); text-transform: uppercase; letter-spacing: .06em; color: var(--colorNeutralForeground3); padding: 14px 0 6px; }
.mod { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--colorNeutralStroke3); cursor: pointer; } .mod:first-of-type { border-top: 0; } .mod input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--colorBrandBackground); } .mod b { display: block; } .mod span.d { color: var(--colorNeutralForeground2); font-size: 14px; } .mod .p { font-weight: 600; white-space: nowrap; } .mod.core { opacity: .85; cursor: default; }
.quote { position: sticky; top: 88px; background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 14px; padding: 24px; box-shadow: var(--shadow8); } .quote h3 { font: var(--fontSubtitle1); margin-bottom: 12px; } .qline { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--colorNeutralStroke3); font-size: 14px; } .qtot { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; } .qtot b { font: 700 34px/1 var(--fontFamilyBase); }
.stepper { display: flex; align-items: center; gap: 10px; } .stepper button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--colorNeutralStroke1); background: var(--colorNeutralBackground1); font-size: 18px; cursor: pointer; color: inherit; } .stepper input { width: 70px; text-align: center; }
.faq details { border-top: 1px solid var(--colorNeutralStroke2); padding: 16px 0; } .faq summary { cursor: pointer; font-weight: 600; font-size: 16px; } .faq p { margin-top: 8px; color: var(--colorNeutralForeground2); }

/* Forms */
.fcard { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: 14px; padding: 32px; box-shadow: var(--shadow8); }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .fld label { font: var(--fontBody1Strong); } .fld input, .fld select, .fld textarea { font: inherit; color: inherit; background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke1); border-bottom-color: var(--colorNeutralStrokeAccessible); border-radius: 6px; padding: 10px 12px; width: 100%; min-height: 42px; } .fld textarea { min-height: 120px; resize: vertical; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom: 2px solid var(--colorBrandStroke1); padding-bottom: 9px; } .fld .hint { font-size: 13px; color: var(--colorNeutralForeground3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 12px 14px; border-radius: 8px; border: 1px solid; margin-bottom: 16px; font-size: 14px; } .alert.err { background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); } .alert.okk { background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); } .alert.info { background: var(--colorBrandBackground2); border-color: var(--colorBrandStroke1); }
.authwrap { min-height: calc(100vh - 64px - 200px); display: grid; place-items: start center; padding: 56px 24px; background: var(--colorNeutralBackground2); } .authbox { width: min(460px, 100%); } .authbox.wide { width: min(760px, 100%); } .authbox h1 { font: 700 28px/1.2 var(--fontFamilyBase); margin-bottom: 6px; }
.pw-meter { height: 4px; border-radius: 4px; background: var(--colorNeutralBackground5); overflow: hidden; } .pw-meter i { display: block; height: 100%; width: 0; background: var(--colorStatusDangerBackground3); transition: width .2s, background .2s; }

/* Footer */
.sf { background: var(--colorNeutralBackground2); border-top: 1px solid var(--colorNeutralStroke2); padding: 48px 0 28px; margin-top: 0; } .sf .cols4 { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; } .sf .fh { margin: 0 0 10px; font: 600 12px var(--fontFamilyBase); text-transform: uppercase; letter-spacing: .06em; color: var(--colorNeutralForeground3); } .sf a { display: block; color: var(--colorNeutralForeground2); text-decoration: none; padding: 3px 0; } .sf a:hover { color: var(--colorBrandForeground1); } .sf .legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--colorNeutralStroke2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--colorNeutralForeground3); }

@media (max-width: 960px) {
  .hero .wrap, .builder { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .quote { position: static; } .sf .cols4 { grid-template-columns: 1fr 1fr; }
  .sn { position: fixed; inset: 64px 0 auto 0; background: var(--colorNeutralBackground1); flex-direction: column; padding: 12px 16px; border-bottom: 1px solid var(--colorNeutralStroke2); transform: translateY(-120%); transition: transform .2s; margin: 0; z-index: 39; } body.menu-open .sn { transform: none; }
  .menu-t { display: inline-flex; background: transparent; border: 0; padding: 8px; color: inherit; cursor: pointer; } .sh-r .hide-s { display: none; } .two { grid-template-columns: 1fr; } .band { padding: 32px 20px; } section.sec { padding: 48px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 960px) { #cgrid { grid-template-columns: 1fr !important; } }