/* Campus preset (Rumah Tuntas), "Lembar Kerja": a well-typeset worksheet. White pages, one blue pen for actions, red pen only for
   annotation, Albert Sans over Literata, hairlines, tables with craft, numbered figures. No paper tint, offset shadows, gradients or
   uppercase labels. Plan: docs/demo-bimbel-plan.md appendix C. Everything is scoped to [data-theme-style="campus"] (CSS nesting). */
:root[data-theme-style="campus"] {
  --bg: #fff; --bg-2: #F2F4F1; --tint: #F2F4F1; --card: #fff; --ink: #14171C; --ink-2: #4A505A; --ink-3: #565D68;
  --line: #CDD1D8; --rule: #838A95; --navy: #14171C; --paper: #fff; --red: #C8161D; --blue-d: #0F2670;
  --accent-strong: var(--primary); --tone-dark: #14171C; --tone-dark-ink: #fff;
  --h: var(--font-heading, "Albert Sans", system-ui, sans-serif); --s: var(--font, "Literata", Georgia, serif);
  --b2: 2px solid var(--ink); --b1: 1px solid var(--line);
  --max: 1180px; --gutter: clamp(20px, 4vw, 44px); --space: clamp(56px, 8vw, 104px); --radius: 0px; --sticky-top: 76px; scroll-padding-top: 96px;
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%231C3FAA'/%3E%3Cpath d='M8 5h11l5 5v17H8z' fill='%23fff'/%3E%3Cpath d='M11.5 14h9M11.5 18h6' stroke='%231C3FAA' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11.5 23.2l3 3 6-7.2' fill='none' stroke='%23C8161D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme-style="campus"] {
  /* type */
  & body { background: #fff; color: var(--ink); font-family: var(--s); font-size: 1.0625rem; line-height: 1.62; font-variant-numeric: lining-nums tabular-nums; font-optical-sizing: auto; counter-reset: gambar; }
  & h1, & h2, & h3, & h4 { font-family: var(--h); color: var(--ink); letter-spacing: -.02em; }
  & h1 { font-weight: 800; font-size: clamp(2.5rem, 1.5rem + 3.9vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em; }
  & h2 { font-weight: 800; font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem); line-height: 1.08; letter-spacing: -.03em; }
  & h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
  .lede { font-size: clamp(1.08rem, 1rem + .3vw, 1.2rem); color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
  .muted { color: var(--ink-3); }
  ::selection { background: #C9D3EE; color: var(--ink); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  ::placeholder { color: var(--ink-3); opacity: 1; }
  .skip:focus { outline-color: #fff; }
  & a { text-underline-offset: 3px; }
  & figure { margin: 0; }
  .eyebrow { font-family: var(--h); font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--primary); margin-bottom: .55em; }
  .section-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 52px); }
  .section-head h2 { margin-bottom: .35em; }
  .section-head .lede { margin: .7em 0 0; }

  /* buttons and links: flat blue, the only "lip" is the bottom edge of the primary button */
  .btn { font-family: var(--h); font-weight: 700; font-size: .98rem; letter-spacing: 0; min-height: 48px; padding: 10px 24px; border: 0; border-radius: 0; box-shadow: none; transition: background-color .12s, transform .12s; }
  .btn:hover { transform: none; box-shadow: none; }
  .btn-primary { background: var(--primary); color: #fff; border-bottom: 3px solid var(--blue-d); }
  .btn-primary:hover { background: #16328A; color: #fff; }
  .btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn-secondary:hover { background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn-light { background: #fff; color: var(--primary); border-bottom: 3px solid #B7C3E8; }
  .btn-light:hover { background: var(--tint); color: var(--primary); }
  .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
  .btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
  .btn:active { transform: translateY(1px); }
  .btn-primary:active { border-bottom-width: 2px; }
  .actions { gap: 14px 22px; margin-top: 30px; align-items: center; }
  .link-arrow, .bw-link, .section-foot a { font-family: var(--h); font-weight: 700; color: var(--primary); }
  .link-arrow { text-decoration: none; }
  .link-arrow:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; }
  .bw-link { text-decoration: underline; text-decoration-thickness: 1.5px; }
  .bw-link:hover { text-decoration-thickness: 3px; }
  .prose a { color: var(--primary); text-decoration-thickness: 1.5px; }
  .prose a:hover { color: var(--blue-d); text-decoration-thickness: 2.5px; }

  /* notice, running head, navigation */
  .topbar { background: var(--ink); color: #fff; font-family: var(--h); font-size: .86rem; border-bottom: 0; }
  .topbar a { color: #fff; font-weight: 700; text-decoration-thickness: 1.5px; }
  .topbar-close { color: #fff; width: 44px; height: 44px; border-radius: 0; }
  .topbar-close:hover { background: #fff; color: var(--ink); }
  .topbar :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
  .site-header { background: #fff; border-bottom: var(--b1); }
  .header-inner { min-height: 76px; gap: 20px; }
  .wordmark { display: inline-flex; align-items: center; gap: 11px; font-family: var(--h); font-weight: 800; font-size: 1.3rem; letter-spacing: -.035em; color: var(--ink); }
  .wordmark::before { content: ""; width: 32px; height: 32px; border-radius: 0; box-shadow: none; outline: 0; background: var(--mark) center / contain no-repeat; flex: none; }
  .header-inner .open-status { margin-right: auto; font-family: var(--h); font-weight: 500; font-size: .8rem; color: var(--ink-2); }
  .site-nav, .site-nav > ul { gap: 26px; }
  .site-nav a { white-space: nowrap; }
  .site-nav > ul > li > a { font-family: var(--h); font-weight: 500; font-size: .96rem; color: var(--ink-2); padding: 8px 0; box-shadow: none; }
  .site-nav > ul > li > a:hover, .site-nav > ul > li > a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .site-nav > ul > li > a[aria-current="page"] { font-weight: 700; }
  .site-nav .nav-cta, .site-nav .nav-cta:hover { color: #fff !important; padding: 8px 20px; min-height: 46px; display: inline-flex; align-items: center; text-decoration: none; }
  .submenu { border: 1px solid var(--ink); border-radius: 0; box-shadow: none; background: #fff; }
  .nav-toggle { min-width: 46px; min-height: 46px; padding: 11px 6px; border: 0; border-radius: 0; background: transparent; }
  .bars, .bars::before, .bars::after { background: var(--ink); height: 2px; border-radius: 0; }
  .nav-open .bars { background: transparent; }

  /* sections: white and tinted pages, hairline joins */
  .section-wrap > section { padding-block: var(--space); }
  .section-wrap + .section-wrap > section, .section-wrap[data-tone] > section { border-top: var(--b1); }
  .section-wrap[data-tone="tint"] > section, .statement { background: var(--tint); }
  .section-wrap[data-tone="accent"] > section { border-top: 0; }
  .container.narrow { max-width: var(--max); }
  .statement-inner { max-width: 46ch; padding-left: 0; border-left: 0; }
  .statement-text { font-family: var(--h); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem); line-height: 1.28; letter-spacing: -.02em; }
  .statement-text strong { color: var(--primary); font-weight: 800; }
  .prose { max-width: none; font-size: 1.0625rem; }
  .prose > :where(p, ul, ol, h2, h3, blockquote) { max-width: 66ch; }
  .prose h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-top: 1.7em; }
  .prose h3 { margin-top: 1.4em; }
  .prose blockquote { border-left: 2px solid var(--ink); padding: 2px 0 2px 1.2em; margin-left: 0; font-style: italic; }
  .prose hr { border: 0; border-top: var(--b1); }
  .prose table { width: 100%; max-width: none; border-collapse: collapse; margin: 1.4em 0; font-size: .98rem; line-height: 1.45; }
  .prose th { font-family: var(--h); font-weight: 700; font-size: .9rem; color: var(--ink-2); text-align: left; padding: 10px 18px 10px 0; border-bottom: var(--b2); white-space: nowrap; }
  .prose td { padding: 15px 18px 15px 0; border-bottom: var(--b1); vertical-align: top; }
  .prose td:first-child { font-family: var(--h); font-weight: 700; white-space: nowrap; }
  .prose :is(th, td):last-child { padding-right: 0; }
  .split-grid { gap: clamp(32px, 6vw, 88px); align-items: center; }
  :is(.split-media, .gallery-grid, .product-hero) img, .prose img { border-radius: 0; box-shadow: none; border: 0; }

  /* figures: "Gambar 3 · ..." in italic over a hairline */
  :is(.split-media, .bw-fig, .gallery-grid li, .product-hero) { counter-increment: gambar; }
  :is(.split-media, .product-hero)::after { display: block; margin-top: 12px; padding-top: 8px; border-top: var(--b1); font-style: italic; font-size: .9rem; line-height: 1.4; color: var(--ink-2); content: "Gambar " counter(gambar) " · Foto ilustrasi"; }
  :is(.split-media, .product-hero):has(img[src*="/fig-"])::after { content: "Gambar " counter(gambar) " · Diagram contoh"; }
  :is(.bw-fig figcaption, .gallery-grid figcaption)::before { content: "Gambar " counter(gambar) " · "; font-style: normal; font-weight: 500; color: var(--ink); }
  :is(.bw-fig figcaption, .gallery-grid figcaption) { position: static; margin-top: 12px; padding: 8px 0 0; border-top: var(--b1); background: transparent; font-style: italic; font-size: .9rem; line-height: 1.4; color: var(--ink-2); max-width: none; }
  .gallery-grid.layout-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 28px; }
  .gallery-grid.layout-grid li { aspect-ratio: auto; }
  .gallery-grid figure { height: auto; }
  .gallery-grid.layout-grid img { aspect-ratio: 3 / 2; object-fit: cover; }

  /* worked example (bimbel-worked): the opening of the home page */
  .bimbel-worked.is-hero { padding-block: clamp(40px, 6vw, 92px) clamp(56px, 7vw, 108px); }
  .bw-grid { gap: clamp(32px, 6vw, 96px); align-items: center; }
  .is-hero .bw-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .bimbel-worked:not(.is-hero) .bw-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .bw-title { font-weight: 800; font-size: clamp(2.5rem, 1.4rem + 4vw, 4.2rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: .45em; max-width: 14ch; }
  .bimbel-worked:not(.is-hero) .bw-title { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem); max-width: none; letter-spacing: -.03em; }
  .bimbel-worked:not(.is-hero) .bw-text { position: sticky; top: 96px; }
  .bw-text .lede { max-width: 46ch; color: var(--ink); }
  .bw-sheet { background: #fff; border: 1px solid var(--ink); padding: clamp(22px, 3vw, 36px); }
  .bw-label { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: var(--h); font-weight: 700; font-size: .98rem; }
  .bw-label::after { content: ""; flex: 1; border-top: var(--b1); }
  .bw-problem { margin: 0 0 22px; font-size: 1.22rem; line-height: 1.55; }
  .frac { margin: 0 .12em; font-size: .86em; }
  .frac > span:first-child { padding: 0 .22em; border-bottom: 1.5px solid currentColor; }
  .bw-steps { border-top: var(--b1); }
  .bw-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; min-height: 68px; padding: 8px 0; border-bottom: var(--b1); }
  .bw-n { font-family: var(--h); font-weight: 700; font-size: .95rem; color: var(--ink-3); }
  .bw-expr { position: relative; display: inline-block; justify-self: start; font-size: 1.28rem; font-weight: 500; padding: 12px 8px; margin-left: 4px; }
  .bw-circle { left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); }
  .bw-circle path, .bw-tick path, .bw-note path { stroke: var(--red); stroke-width: 2.6; }
  .bw-note path { stroke-width: 2; }
  .bw-circle path { vector-effect: non-scaling-stroke; }
  .bw-circle.is-fit path { vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .bw-tick { width: 26px; height: 26px; }
  li[data-mark="wrong"] .bw-expr { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
  .bw-note { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; font-style: italic; font-weight: 500; font-size: 1.08rem; line-height: 1.45; color: var(--red); }
  .bw-note svg { flex: none; width: 26px; height: 26px; margin-top: 2px; }
  .bw-key { margin-top: 22px; border-top: var(--b1); }
  .bw-key summary { display: flex; align-items: center; gap: 10px; min-height: 52px; font-family: var(--h); font-weight: 700; font-size: .98rem; color: var(--primary); list-style: none; }
  .bw-key summary::-webkit-details-marker { display: none; }
  .bw-key summary::before, .faq-list summary::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; font-family: var(--s); font-weight: 400; font-size: 1.05rem; line-height: 1; }
  .bw-key[open] summary::before { content: "\2212"; }
  .bw-key .prose { padding: 4px 0 6px; }
  .bw-key .prose p { margin-bottom: .6em; }
  .bw-foot { margin: 20px 0 0; padding-top: 12px; border-top: var(--b1); font-size: .86rem; font-style: italic; color: var(--ink-2); line-height: 1.45; }
  .bw-fig { margin: 26px 0 0; }

  /* side-by-side section heads: daftar isi, roster, fee list, kunci jawaban */
  .section-wrap:is([data-look~="toc"], [data-look~="roster"], [data-look~="kunci"], [data-look~="daftar"]) > section > .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(36px, 6vw, 96px); max-width: var(--max); }
  .section-wrap:is([data-look~="toc"], [data-look~="roster"], [data-look~="kunci"], [data-look~="daftar"]) > section > .container > .section-head { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 100px; margin-bottom: 0; }
  .section-wrap:is([data-look~="toc"], [data-look~="roster"], [data-look~="kunci"], [data-look~="daftar"]) > section > .container > :not(.section-head) { grid-column: 2; min-width: 0; }

  .service-list { border-top: var(--b2); counter-reset: svc; }
  .service-list > li { grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 28px; padding: 26px 0; align-items: baseline; border-bottom: var(--b1); }
  .service-list > li::before, .service-list > li.has-icon::before { content: counter(svc) "."; grid-column: 1; grid-row: 1; font-family: var(--h); font-weight: 700; color: var(--ink-3); }
  .service-list .icon-tile { display: none; }
  .service-list > li > h3 { grid-column: 2; grid-row: 1; font-weight: 800; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
  .service-list > li > p { grid-column: 3; grid-row: 1; color: var(--ink-2); margin: 0; }
  .service-points { grid-column: 3; grid-row: 2; margin: 6px 0 0; }
  .service-points li { position: relative; padding-left: 1.1em; color: var(--ink-2); }
  .service-points li::before { content: "\2013"; position: absolute; left: 0; color: var(--ink-3); }
  .section-wrap[data-look~="toc"] .service-list {
    & > li { grid-template-columns: 4.6rem minmax(0, 1fr) auto; grid-template-areas: "n t p" ". d d"; padding: 30px 0; position: relative; transition: background-color .12s; }
    & > li:hover { background: var(--tint); }
    & > li:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
    & > li::before { content: "Bab " counter(svc); grid-area: n; font-size: .95rem; }
    & > li > h3 { grid-area: t; display: flex; align-items: baseline; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); letter-spacing: -.035em; line-height: 1; margin: 0; }
    & > li > h3::after { content: ""; flex: 1; min-width: 24px; margin: 0 14px; border-bottom: 2px dotted var(--rule); transform: translateY(-.28em); }
    & > li > p { grid-area: d; max-width: 54ch; }
    & h3 a { color: var(--ink); text-decoration: none; }
    & h3 a::after { content: ""; position: absolute; inset: 0; }
    & h3 a:hover { color: var(--primary); }
    & h3 a:focus-visible { outline: none; }
    .service-points { grid-area: p; margin: 0; text-align: right; }
    .service-points li { padding: 0; font-family: var(--h); font-weight: 700; font-size: 1.02rem; color: var(--ink); white-space: nowrap; }
    .service-points li::before { content: none; }
  }

  /* bimbel-method: numbered steps with a margin note each */
  .bm-list { counter-reset: bm; border-top: var(--b2); }
  .bm-list > li { counter-increment: bm; grid-template-columns: 4.4rem minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 56px); padding: 30px 0; border-bottom: var(--b1); }
  .bm-list > li::before { content: counter(bm); font-family: var(--h); font-weight: 800; font-size: 3.4rem; line-height: .85; color: var(--primary); letter-spacing: -.04em; }
  .bm-main h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: .3em; }
  .bm-main p { margin: 0; color: var(--ink-2); max-width: 54ch; }
  .bm-note { margin: 0; padding-left: 16px; border-left: 1px solid var(--rule); font-style: italic; font-size: .95rem; line-height: 1.5; color: var(--ink-2); align-self: start; }
  .bm-note-label { display: block; margin-bottom: 3px; font-family: var(--h); font-style: normal; font-weight: 700; font-size: .86rem; color: var(--primary); }

  /* features (spec), compare, plans, timeline, fee menu */
  .feature-grid { counter-reset: spec; gap: 36px clamp(24px, 4vw, 56px); }
  .feature-grid li { border-top: var(--b2); padding-top: 18px; counter-increment: spec; }
  .feature-grid li:not(.has-photo)::before { content: counter(spec) "."; display: block; margin-bottom: 14px; font-family: var(--h); font-weight: 700; color: var(--ink-3); }
  .feature-grid :is(.icon-tile, .feature-index) { display: none; }
  .feature-grid li h3, .plan h3, .compare-col h3 { font-size: 1.25rem; font-weight: 800; }
  .feature-grid li p, .plan-desc, .plan-foot, .menu-desc { color: var(--ink-2); }
  .compare-grid { border: 0; border-radius: 0; background: transparent; gap: clamp(24px, 5vw, 80px); }
  .compare-col, .compare-solution { background: transparent; padding: 20px 0 0; border-top: var(--b2); }
  .compare-col h3::before { content: none; }
  .compare-solution h3 { color: var(--primary); }
  .compare-col ul { gap: 0; }
  .compare-col li { color: var(--ink); padding: 10px 0 10px 24px; border-bottom: var(--b1); }
  .compare-col li::before, .compare-solution li::before { content: "\2013"; color: var(--ink-3); top: 10px; }
  .plan-grid { gap: 40px clamp(24px, 4vw, 56px); }
  .plan { padding: 22px 0 0; border: 0; border-top: var(--b2); border-radius: 0; background: transparent; box-shadow: none; }
  .plan-price { font-family: var(--h); font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); letter-spacing: -.04em; margin: 6px 0 18px; }
  .plan-price span { font-family: var(--s); font-weight: 400; font-size: .88rem; letter-spacing: 0; color: var(--ink-2); margin-top: 2px; }
  .plan-features { gap: 0; margin-bottom: 26px; }
  .plan-features li { padding: 10px 0; border-top: var(--b1); }
  .plan-features .icon { display: none; }
  .plan-features li::before { content: "\2013"; color: var(--ink-3); }
  .timeline-list { border-left: 1px solid var(--ink); max-width: 860px; }
  .timeline-list li::before { border-radius: 0; width: 11px; height: 11px; left: -6px; top: 9px; background: var(--primary); border: 2px solid #fff; }
  .timeline-list time { font-family: var(--h); font-weight: 700; color: var(--primary); }
  .timeline-list h3 { font-size: 1.2rem; }
  .menu-groups { gap: clamp(36px, 5vw, 56px); }
  .menu-group-head { border-bottom: var(--b2); }
  .menu-group-head h3 { font-size: 1.25rem; font-weight: 800; }
  .menu-group-head p, .menu-foot { font-style: italic; }
  .menu-foot { color: var(--ink-2); }
  .menu-cols { text-transform: none; letter-spacing: 0; font-family: var(--h); font-weight: 700; font-size: .86rem; color: var(--ink-2); }
  .menu-cols, .menu-prices { --menu-col: 9rem; }
  .menu-prices { font-family: var(--h); font-weight: 700; }
  .menu-item { padding: 15px 0; }
  .menu-name { font-family: var(--h); font-weight: 700; font-size: 1.08rem; }
  .menu-leader { border-bottom: 2px dotted var(--rule); opacity: 1; }
  .section-wrap[data-look~="cont"] > section { padding-top: 0; border-top: 0; }
  .section-wrap:has(+ .section-wrap[data-look~="cont"]) > section { padding-bottom: clamp(36px, 5vw, 64px); }

  /* tutors (products): roster rows on the home page, figure cards on the index, a plain profile page */
  .section-wrap[data-look~="roster"] {
    .product-grid { display: block; align-self: start; }
    .product-grid > li { max-width: none; border-bottom: var(--b1); }
    .product-grid > li:first-child { border-top: var(--b2); }
    .product-card { display: block; padding: 0; height: auto; }
    :is(.product-thumb, .product-summary) { display: none; }
    .product-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) auto; grid-template-areas: "h tl l" "ey tl l"; column-gap: 24px; align-items: baseline; padding: 18px 0; }
    .product-body h3 { grid-area: h; margin: 0; font-size: 1.3rem; font-weight: 800; }
    .product-body .eyebrow { grid-area: ey; margin: 2px 0 0; font-family: var(--s); font-weight: 400; font-size: .92rem; color: var(--ink-2); }
    .product-tagline { grid-area: tl; margin: 0; font-weight: 400; font-size: 1rem; }
    .product-body .link-arrow { grid-area: l; padding: 0; margin: 0; }
    .product-card:hover h3 a { color: var(--primary); }
  }
  .chips { gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
  .chip { min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--rule); background: #fff; color: var(--ink); font-family: var(--h); font-weight: 700; }
  .chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: #fff; color: var(--ink); }
  .chip:is([aria-pressed="true"], [aria-current="page"], [aria-current="true"]) { background: var(--primary); box-shadow: none; color: #fff; }
  .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 44px 32px; justify-content: stretch; }
  .product-grid > li { max-width: none; }
  .product-card { height: 100%; }
  .product-card:hover { transform: none; }
  .product-thumb { border-radius: 0; margin: 0 0 14px; aspect-ratio: 3 / 2; background: #fff; border: var(--b1); }
  .product-card:hover .product-thumb img { transform: none; }
  .product-body { display: flex; flex-direction: column; flex: 1; }
  .product-card .eyebrow { margin: 0 0 .3em; font-size: .88rem; }
  .product-card h3 { font-weight: 800; font-size: 1.3rem; margin-bottom: .2em; }
  .product-card h3 a { color: var(--ink); text-decoration: none; }
  .product-card h3 a:hover { color: var(--primary); }
  .product-tagline { font-size: .98rem; color: var(--ink); }
  .product-summary { color: var(--ink-2); font-size: .95rem; }
  .product-card .link-arrow { margin-top: auto; padding-top: 8px; }
  .group-title { font-family: var(--h); font-weight: 800; font-size: 1.5rem; text-transform: none; letter-spacing: -.02em; color: var(--ink); border-bottom: var(--b2); padding-bottom: 10px; margin-bottom: 30px; }
  .product-group + .product-group { margin-top: 72px; }
  :is(.products-index, .blog-index) { padding-block: clamp(36px, 5vw, 64px) var(--space); }
  .product-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(36px, 6vw, 88px); }
  .product-hero { margin-bottom: 30px; max-width: 560px; }
  .product-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .product-main .lede { color: var(--ink); font-family: var(--h); font-weight: 700; font-size: 1.35rem; line-height: 1.35; }
  .product-side { border: 0; background: transparent; gap: 28px; top: 100px; }
  .product-side h2 { font-family: var(--h); font-weight: 800; font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--ink); padding-bottom: 8px; border-bottom: var(--b2); }
  .feature-list li { display: block; padding: 11px 0 12px; border-top: var(--b1); font-size: .98rem; }
  .feature-list li:first-child { border-top: 0; }
  .feature-list strong { display: block; font-family: var(--h); font-weight: 700; font-size: .86rem; color: var(--ink-2); margin-bottom: 1px; }
  .link-list a { font-family: var(--h); font-weight: 700; }
  .related { border-top: var(--b1); }

  /* report sheet (richtext look "lembar"), cabang facts */
  .section-wrap[data-look~="lembar"] {
    & h2 { max-width: 20ch; }
    .prose { background: #fff; border: 1px solid var(--ink); padding: clamp(22px, 3.4vw, 48px); }
    .prose > p:first-child { font-size: 1.12rem; color: var(--ink-2); }
    .prose > p:nth-child(2) { padding: 14px 0; border-top: var(--b2); border-bottom: var(--b1); font-family: var(--h); }
    .prose table { margin-top: 0; }
    .prose td:nth-child(2) { font-family: var(--h); font-weight: 700; color: var(--primary); white-space: nowrap; }
    .prose > p:last-child { margin-bottom: 0; font-size: .95rem; color: var(--ink-2); }
  }
  .section-wrap[data-look~="cabang"] .prose ul { list-style: none; padding: 0; margin: 1.2em 0 0; }
  .section-wrap[data-look~="cabang"] .prose li { padding: 11px 0; border-top: var(--b1); }
  .section-wrap[data-look~="cabang"] .prose li:last-child { border-bottom: var(--b1); }
  .section-wrap[data-look~="cabang"] .prose strong { font-family: var(--h); font-weight: 700; }

  /* kunci jawaban (faq) */
  .faq-list { border-bottom: var(--b1); counter-reset: q; }
  .faq-list details { border-top: var(--b1); counter-increment: q; }
  .faq-list details:first-child { border-top: var(--b2); }
  .faq-list summary { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 28px; align-items: baseline; gap: 0 12px; padding: 20px 0; min-height: 60px; font-family: var(--h); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.3; }
  .faq-list summary::before { content: "Soal " counter(q); font-size: .9rem; color: var(--primary); }
  .faq-list summary:hover { color: var(--primary); }
  .faq-list summary::after, .faq-list details[open] summary::after { justify-self: end; width: 24px; height: 24px; color: var(--ink); transform: none; }
  .faq-list details[open] summary::after { content: "\2212"; }
  .faq-list .prose { padding: 0 0 22px calc(5.2rem + 12px); color: var(--ink); }
  .faq-list .prose p:first-child::before { content: "Jawab. "; font-family: var(--h); font-weight: 700; color: var(--primary); }
  .faq-list .prose > :where(p, ul) { max-width: 60ch; }
  .section-wrap:not([data-look~="kunci"]) .faq .container.narrow { max-width: 820px; }

  /* forms: enquiry slip, contact */
  .enquiry-form { gap: 20px 24px; }
  .enq-field, .contact-form label { font-family: var(--h); font-weight: 700; font-size: .9rem; color: var(--ink); }
  :is(.enq-field :where(input, select), .contact-form :is(input, textarea, select), .product-search :is(input, select)) { border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); min-height: 48px; padding: 10px 2px; font: inherit; font-family: var(--s); font-weight: 400; font-size: 1.02rem; }
  .contact-form :is(input, textarea) { background: #fff; border: 1px solid var(--rule); border-bottom: 1.5px solid var(--ink); padding: 10px 12px; margin-top: 4px; }
  :is(.enq-field :is(input, select), .contact-form :is(input, textarea)):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .section-wrap[data-look~="slip"] .enquiry-form { background: #fff; border: 1px solid var(--ink); padding: clamp(22px, 3vw, 36px); position: relative; }
  .section-wrap[data-look~="slip"] .enquiry-form::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; border-top: 2px dashed var(--rule); }
  .section-wrap[data-look~="slip"] .enquiry-form .btn { align-self: end; }
  .enquiry-note { color: var(--ink-2); font-size: .88rem; font-style: italic; }
  .enquiry .container { max-width: var(--max); }
  .enquiry.layout-card .enquiry-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
  .enquiry.layout-card .enquiry-form .btn { grid-column: 1 / -1; justify-self: start; padding-inline: 34px; }
  .form-notice { border-radius: 0; }
  .form-notice.ok { background: #E7ECF8; color: var(--ink); border: 1px solid var(--primary); }
  .form-notice.err { background: #fff; color: var(--red); border: 1px solid var(--red); }
  .contact-grid { gap: clamp(32px, 6vw, 88px); }
  .contact-details { border-top: var(--b2); gap: 0; }
  .contact-details > div { padding: 14px 0; border-bottom: var(--b1); }
  .contact-details dt { font-family: var(--h); font-weight: 700; font-size: .88rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); }

  /* journal list */
  .section-wrap[data-look~="list"] .post-grid { display: block; max-width: none; border-top: var(--b2); }
  .section-wrap[data-look~="list"] .section-head { margin-bottom: 24px; }
  .post-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 28px; padding: 24px 0; border-bottom: var(--b1); background: transparent; }
  .post-thumb { display: none; }
  .post-meta { grid-column: 1; grid-row: 1 / span 2; margin: 4px 0 0; display: flex; flex-direction: column-reverse; gap: 2px; align-self: start; font-size: .9rem; color: var(--ink-2); }
  .post-cat { font-family: var(--h); font-weight: 700; font-size: .86rem; color: var(--primary); }
  .post-card h3 { grid-column: 2; margin: 0 0 .3em; font-weight: 800; font-size: 1.3rem; text-wrap: pretty; }
  .post-card h3 a { color: var(--ink); text-decoration: none; }
  .post-card h3 a:hover { color: var(--primary); text-decoration: underline; }
  .post-card > p:last-child { grid-column: 2; margin: 0; color: var(--ink-2); font-size: .98rem; }
  .blog-index .post-list { max-width: 880px; }
  .post-list li { padding-top: 0; border-top: 0; }
  .post-cover { border-radius: 0; }
  .pagination { font-family: var(--h); font-weight: 700; }
  .section-foot { margin-top: 28px; }

  /* page header, CTA band, footer */
  .page-header { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); background: var(--tint); border-bottom: var(--b1); }
  .page-header h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); max-width: 18ch; }
  .page-header .lede { margin-top: .8em; }
  .breadcrumb ol { font-family: var(--h); font-weight: 500; font-size: .86rem; color: var(--ink-2); }
  .breadcrumb a { color: var(--ink-2); text-decoration: underline; }
  .breadcrumb a:hover { color: var(--ink); }
  .not-found h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }
  .cta-band { padding-block: clamp(64px, 9vw, 120px) !important; }
  .cta-band::before { content: none; }
  .cta-grid { align-items: center; gap: 32px clamp(32px, 6vw, 96px); }
  .cta-band h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); max-width: 18ch; letter-spacing: -.035em; }
  .cta-band p, .cta-note a { color: #fff; }
  .cta-band p { font-size: 1.12rem; max-width: 46ch; margin-top: .6em; }
  .cta-actions { gap: 14px 16px; }
  .site-footer { background: var(--ink); color: #D5D9E0; border-top: 0; padding-top: clamp(56px, 7vw, 88px); }
  .site-footer .wordmark { color: #fff; }
  .site-footer a, .footer-about p { color: #D5D9E0; }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { color: #fff; text-decoration: underline; }
  .site-footer h2 { font-family: var(--h); font-weight: 700; font-size: 1rem; text-transform: none; letter-spacing: 0; color: #fff; margin-bottom: 16px; }
  .footer-grid { gap: 40px; padding-bottom: 48px; }
  .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .22); color: #C3C9D3; }
  .float-cta { background: var(--ink); color: #fff; border: 2px solid #fff; border-radius: 0; box-shadow: none; font-family: var(--h); font-weight: 700; }
  .float-cta:hover { background: var(--primary); color: #fff; }
  .float-cta:focus-visible { outline: 3px solid var(--primary); box-shadow: none; }

  /* planner (bimbel-planner): a printed timetable with text codes; picked = solid blue, clash = struck through */
  .bp { gap: clamp(24px, 3vw, 40px); }
  .bp-label { font-family: var(--h); font-weight: 700; font-size: 1rem; gap: 8px; margin-bottom: 12px; }
  .bp-num { width: auto; height: auto; background: transparent; color: var(--primary); font-weight: 800; display: inline; }
  .bp-num::after { content: "."; }
  .bp-tabs { gap: 0; }
  .bp-tab { background: #fff; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); margin-left: -1.5px; min-height: 52px; padding: 6px 20px; font-family: var(--h); flex-direction: column; align-items: flex-start; gap: 0; transition: background-color .12s; }
  .bp-tab:first-child { margin-left: 0; }
  .bp-tab b { font-size: 1.05rem; font-weight: 800; }
  .bp-tab small { font-family: var(--s); font-size: .8rem; opacity: 1; }
  .bp-tab:hover { background: var(--tint); }
  .bp-tab:is([aria-pressed="true"], [aria-current="true"]) { background: var(--primary); color: #fff; box-shadow: inset 0 0 0 1.5px var(--primary); }
  .bp-chips { gap: 8px; }
  .bp-chip { background: #fff; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--rule); font-family: var(--h); font-weight: 700; font-size: .96rem; padding: 6px 14px 6px 8px; gap: 10px; transition: background-color .12s; }
  .bp-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .bp-chip-code { display: inline-block; min-width: 3.1em; padding: 2px 6px; background: var(--tint); font-weight: 800; font-size: .76rem; text-align: center; color: var(--ink); }
  .bp-chip:is([aria-pressed="true"], [aria-current="true"]) { background: var(--primary); color: #fff; box-shadow: none; }
  .bp-chip:is([aria-pressed="true"], [aria-current="true"]) .bp-chip-code { background: #fff; color: var(--primary); }
  .bp-filter { margin: 0 0 20px; padding: 12px 16px; background: #fff; border: 1px solid var(--ink); font-size: .98rem; }
  .bp-filter a { font-family: var(--h); font-weight: 700; }
  .bp-board { background: #fff; border: 1px solid var(--ink); }
  .bp-grid { grid-template-columns: 92px repeat(6, minmax(86px, 1fr)); }
  .bp-dayname { padding: 12px 8px; background: var(--tint); color: var(--ink); font-family: var(--h); font-weight: 800; font-size: .92rem; text-align: center; border-bottom: 1.5px solid var(--ink); border-left: var(--b1); }
  .bp-col-times > .bp-dayname { border-left: 0; color: var(--ink-2); font-weight: 700; }
  .bp-cell { border-top: var(--b1); border-left: var(--b1); }
  .bp-cell[style*="--r:3"] { border-top: var(--b2); }
  .bp-cell[style*="--r:1"] { border-top: 0; }
  .bp-col-times .bp-cell { border-left: 0; background: #fff; }
  .bp-time b { font-family: var(--h); font-weight: 700; font-size: .84rem; }
  .bp-time span { font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .bp-slot { background: #fff; color: var(--ink); font-family: var(--h); border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .08s; }
  .bp-slot-name { font-family: var(--h); font-weight: 800; font-size: .92rem; letter-spacing: 0; }
  .bp-slot-tutor { font-family: var(--s); font-weight: 400; font-size: .76rem; opacity: 1; color: var(--ink-2); }
  .bp-slot[data-state="info"] { box-shadow: inset 0 0 0 1px var(--rule); }
  .bp-slot[data-state="dim"], .bp-slot[data-state="dim"] .bp-slot-tutor, .bp-slot[data-state="clash"] { color: var(--ink-3); }
  .bp-slot[data-state="dim"], .bp-slot[data-state="clash"] { box-shadow: inset 0 0 0 1px var(--line); }
  .bp-slot:is([data-state="avail"], [data-state="info"], [data-state="dim"]):hover { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
  .bp-slot[data-state="picked"] { background: var(--primary); color: #fff; box-shadow: none; }
  .bp-slot[data-state="picked"] .bp-slot-tutor { color: #fff; }
  .bp-slot[data-state="clash"] { background: var(--tint); }
  .bp-slot[data-state="clash"] .bp-slot-name { text-decoration: line-through; text-decoration-thickness: 2px; }
  .bp-slot[data-state="clash"] .bp-slot-tutor { font-size: 0; }
  .bp-slot[data-state="clash"] .bp-slot-tutor::after { content: "bentrok"; font-size: .76rem; font-style: italic; }
  .bp-summary { background: #fff; border: 1px solid var(--ink); padding: 22px 22px 24px; }
  .bp-figures > div { padding: 0 8px 0 0; }
  .bp-figures > div + div { padding-left: 12px; border-left: var(--b1); }
  .bp-figures dt { font-family: var(--s); font-size: .82rem; color: var(--ink-2); min-height: 2.6em; line-height: 1.3; }
  .bp-figures dd { font-family: var(--h); font-weight: 800; letter-spacing: -.03em; }
  .bp-figures .is-fee dd { color: var(--primary); font-size: 1.4rem; }
  .bp-calc { margin: 10px 0 0; font-size: .9rem; font-style: italic; color: var(--ink-2); }
  .bp-warn { margin: 10px 0 0; padding: 8px 12px; background: #fff; border: 1px solid var(--red); color: var(--red); font-size: .9rem; }
  .bp-picked-title { margin: 20px 0 6px; padding-top: 16px; border-top: var(--b2); font-family: var(--h); font-weight: 800; font-size: 1rem; }
  .bp-picked li { border-bottom: var(--b1); gap: 12px; padding: 4px 0; }
  .bp-dot { width: auto; height: auto; min-width: 3.4em; padding: 2px 5px; border: 0; background: var(--tint); color: var(--ink); font-family: var(--h); font-weight: 800; font-size: .72rem; text-align: center; }
  .bp-picked-text { font-size: .92rem; line-height: 1.35; }
  .bp-remove:hover { background: var(--tint); }
  .bp-none { color: var(--ink-2); font-size: .94rem; margin: 0 0 14px; }
  .bp-print { margin-top: 10px; width: 100%; justify-content: center; }
  .bp-fine { color: var(--ink-2); font-size: .84rem; }

  /* responsive */
  @media (max-width: 1400px) { .header-inner .open-status { display: none; } }
  @media (max-width: 1099px) {
    .bw-grid, .bimbel-worked:not(.is-hero) .bw-grid, .is-hero .bw-grid, .product-layout { grid-template-columns: 1fr; }
    .bimbel-worked:not(.is-hero) .bw-text, .product-side { position: static; }
    .bp-grid { grid-template-columns: 76px repeat(6, minmax(90px, 1fr)); }
    .bp-board { overflow-x: auto; }
    .bm-list > li { grid-template-columns: 3rem minmax(0, 1fr); }
    .bm-note { grid-column: 2; margin-top: 14px; }
  }
  @media (max-width: 960px) {
    .site-nav { background: #fff; border-bottom: 1px solid var(--ink); border-top: var(--b1); top: 100%; align-items: stretch; padding: 8px var(--gutter) 24px; box-shadow: none; }
    .site-nav > ul { flex-direction: column; gap: 0; align-items: stretch; }
    .site-nav > ul > li > a { display: block; padding: 15px 2px; border-bottom: var(--b1); font-size: 1.05rem; }
    .site-nav > ul > li > a:hover, .site-nav > ul > li > a[aria-current="page"] { text-decoration: none; background: var(--tint); }
    .site-nav .nav-cta { align-self: stretch; justify-content: center; margin: 16px 0 0; }
    .section-wrap:is([data-look~="toc"], [data-look~="roster"], [data-look~="kunci"], [data-look~="daftar"]) > section > .container { display: block; }
    .section-wrap:is([data-look~="toc"], [data-look~="roster"], [data-look~="kunci"], [data-look~="daftar"]) > section > .container > .section-head { position: static; margin-bottom: clamp(28px, 4vw, 44px); }
    .service-list > li { grid-template-columns: 2.6rem minmax(0, 1fr); }
    .service-list > li > p, .service-points { grid-column: 2; grid-row: auto; }
  }
  @media (max-width: 719px) {
    .bw-title { max-width: none; }
    .bw-steps li { grid-template-columns: 2rem minmax(0, 1fr) auto; }
    .enquiry.layout-card .enquiry-form { grid-template-columns: 1fr; }
    .bp-board { background: transparent; border: 0; overflow: visible; }
    .bp-grid { display: block; }
    .bp-col > .bp-dayname { text-align: left; padding: 10px 12px; border-left: 0; border-top: 1.5px solid var(--ink); position: sticky; top: 64px; z-index: 2; }
    .bp-cells { padding: 8px 0 4px; }
    .bp-slot-name { font-size: 1rem; }
    .bp-figures dt { min-height: 3.8em; }
    .bp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bp-tab, .bp-tab:first-child { margin-left: 0; }
    .post-grid, .product-grid, .post-card { grid-template-columns: 1fr; }
    .post-meta, .post-card h3, .post-card > p:last-child { grid-column: 1; grid-row: auto; }
    .post-meta { flex-direction: row; gap: 10px; margin: 0 0 6px; }
    .section-wrap[data-look~="roster"] .product-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h l" "ey ey" "tl tl"; row-gap: 2px; }
    .section-wrap[data-look~="roster"] .product-tagline { margin-top: 8px; }
    .section-wrap[data-look~="toc"] .service-list > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "t p" "d d"; }
    .section-wrap[data-look~="toc"] .service-list > li::before { margin-bottom: 4px; }
    .section-wrap[data-look~="toc"] .service-list > li > h3 { font-size: 2rem; }
    .section-wrap[data-look~="toc"] .service-list > li > h3::after { margin: 0 8px; min-width: 12px; }
    .section-wrap[data-look~="toc"] .service-list .service-points li { font-size: .92rem; white-space: normal; max-width: 8.5rem; }
    .faq-list summary { grid-template-columns: minmax(0, 1fr) 28px; }
    .faq-list summary::before { grid-column: 1 / -1; margin-bottom: 4px; }
    .faq-list .prose { padding-left: 0; }
    .prose table { display: block; overflow-x: auto; }
    .section-wrap[data-look~="lembar"] {
      .prose { padding: 20px 16px; }
      :is(table, tbody, tr, td) { display: block; overflow: visible; }
      & thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      & tr { padding: 16px 0; border-bottom: var(--b1); }
      & tr:first-child { border-top: var(--b2); }
      & td { padding: 2px 0; border: 0; white-space: normal; }
      & td::before { display: block; margin-top: 8px; font-family: var(--h); font-weight: 700; font-size: .8rem; color: var(--ink-2); }
      & td:first-child { font-size: 1.1rem; }
      & td:first-child::before { content: none; }
      & td:nth-child(2)::before { content: "Tingkat penguasaan"; }
      & td:nth-child(3)::before { content: "Catatan tutor"; }
      & td:nth-child(4)::before { content: "Fokus bulan depan"; }
      & table:has(th:nth-child(5)) td:nth-child(2)::before { content: "Pilihan kelas"; }
      & table:has(th:nth-child(5)) td:nth-child(3)::before { content: "Sesi per bulan"; }
      & table:has(th:nth-child(5)) td:nth-child(4)::before { content: "Perhitungan"; }
      & table:has(th:nth-child(5)) td:nth-child(5)::before { content: "Perkiraan per bulan"; }
    }
    .menu-cols, .menu-prices { --menu-col: 6.4rem; }
    .bm-list > li { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 14px; }
    .bm-list > li::before { font-size: 2rem; }
    .footer-grid { gap: 28px; }
    .cta-actions .btn { width: 100%; justify-content: center; }
  }
  @media (max-width: 420px) {
    .actions { flex-direction: column; align-items: stretch; }
    .actions .btn { width: 100%; justify-content: center; }
    .actions .bw-link { align-self: flex-start; }
    .bp-figures { grid-template-columns: 1fr 1fr; row-gap: 12px; }
    .bp-figures .is-fee { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: var(--b1); }
    .bp-figures dt { min-height: 0; }
  }
  @media print { .topbar, .site-header, .float-cta { display: none !important; } body { background: #fff; color: #000; } }
}

/* motion: buttons change colour in 120 ms; the red-pen circle draws once (site.js, guarded) */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme-style="campus"]:not([data-motion="off"]) {
    .bw-armed .bw-circle.is-fit path { stroke-dashoffset: 1; }
    .bw-armed.bw-drawn .bw-circle.is-fit path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.4, .1, .25, 1) .15s; }
  }
}
@media (prefers-reduced-motion: reduce) { [data-theme-style="campus"] :is(.btn, .bp-slot, .bp-tab, .bp-chip, .service-list > li) { transition: none; } }