/* ==========================================================================
   Imported page styles
   --------------------------------------------------------------------------
   drone-repair and buy-pre-owned-drones were imported from the static site as
   whole-page copies: markup and behaviour came across, the stylesheet did not.
   Everything here is lifted from hobitech.in — only rules whose selectors name
   a class those two page bodies actually use, so this is the page's own CSS
   and not a copy of the old site's theme.

   Every selector is scoped under .pagebody-raw, the wrapper the page template
   puts around an imported body. That containment is the point: these rules can
   restyle the imported page and nothing else — not the header, footer, mega
   menu or product grid, all of which the storefront owns. Selectors the
   storefront already defines (.wrap, .btn, .eyebrow) were excluded for the
   same reason.

   Loaded only by t/page.html, so no other template pays for it.
   ========================================================================== */
/* The body also brings the old site's footer; the storefront draws its own. */
.pagebody-raw > footer{ display:none; }

.pagebody-raw .btn-wa{ background: rgb(31, 138, 77); color: rgb(255, 255, 255); }
.pagebody-raw .btn-wa:hover{ background: rgb(26, 122, 68); }
.pagebody-raw .logo-img{ height: 42px; width: auto; display: block; }
.pagebody-raw .cart-drawer, .pagebody-raw .modal{ display: none; position: fixed; inset: 0px; z-index: 90; background: rgba(15, 44, 69, 0.45); }
.pagebody-raw .cart-drawer.open{ display: block; }
.pagebody-raw #cartDrawer .qty button:hover, .pagebody-raw #cartDrawer .cq button:hover{ border-color: var(--brand); background: var(--brand); color: rgb(255, 255, 255); }
.pagebody-raw .modal.open{ display: flex; align-items: center; justify-content: center; padding: 20px; }
.pagebody-raw .cart-panel{ position: absolute; right: 0px; top: 0px; height: 100%; width: 90%; max-width: 400px; background: rgb(255, 255, 255); display: flex; flex-direction: column; box-shadow: rgba(15, 44, 69, 0.35) -24px 0px 60px -20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; }
@media (max-width: 860px){.pagebody-raw .cart-panel{ width: min(300px, 82vw); }}
.pagebody-raw .cart-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.pagebody-raw .cart-head h3{ font-size: 18px; font-family: "Space Grotesk"; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.pagebody-raw .cart-close, .pagebody-raw .modal-close{ background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-soft); width: 34px; height: 34px; border-radius: 8px; }
.pagebody-raw .cart-close:hover, .pagebody-raw .modal-close:hover{ background: var(--paper-2); color: var(--text); }
.pagebody-raw .cart-items{ flex: 1 1 0%; overflow-y: auto; padding: 14px 22px; }
.pagebody-raw .cart-empty{ color: var(--text-soft); text-align: center; padding: 56px 20px; font-size: 14.5px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pagebody-raw .cart-empty svg{ color: var(--brand-soft); }
.pagebody-raw .cart-empty p{ margin: 0px; max-width: 220px; line-height: 1.5; }
.pagebody-raw .cart-empty .btn{ margin-top: 4px; }
.pagebody-raw .citem{ display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background 0.15s; }
.pagebody-raw .citem:hover{ background: var(--paper-2); }
.pagebody-raw .citem .cinfo{ flex: 1 1 0%; min-width: 0px; }
.pagebody-raw .citem .cinfo b{ font-family: "Space Grotesk"; font-size: 14.5px; display: block; }
.pagebody-raw .citem .cinfo span{ font-family: "IBM Plex Mono"; font-size: 11px; color: var(--cyan); text-transform: uppercase; }
.pagebody-raw .cremove{ background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; color: var(--text-soft); font-size: 16px; padding: 4px; }
.pagebody-raw .cremove:hover{ color: rgb(192, 57, 43); }
.pagebody-raw .cart-foot{ border-top: 1px solid var(--line); padding: 18px 22px calc(18px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; gap: 10px; box-shadow: rgba(15, 44, 69, 0.25) 0px -10px 24px -20px; position: relative; z-index: 1; background: rgb(255, 255, 255); }
.pagebody-raw .cart-note{ font-size: 12.5px; color: var(--text-soft); margin: 0px; }
.pagebody-raw .cart-foot .btn{ justify-content: center; }
.pagebody-raw .modal-card{ background: rgb(255, 255, 255); border-radius: 16px; width: 100%; max-width: 380px; padding: 26px 24px; position: relative; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 70px -24px; }
.pagebody-raw .modal-close{ position: absolute; top: 14px; right: 14px; }
.pagebody-raw .modal-card h3{ font-size: 21px; margin-bottom: 4px; }
.pagebody-raw .modal-sub{ color: var(--text-soft); font-size: 14px; margin: 0px 0px 18px; }
.pagebody-raw .modal-card label{ display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.pagebody-raw .modal-card input{ width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: "IBM Plex Sans"; font-size: 14.5px; color: var(--text); }
.pagebody-raw .modal-card input:focus{ outline: none; border-color: var(--brand); }
.pagebody-raw .modal-card .btn{ width: 100%; justify-content: center; margin-top: 4px; }
.pagebody-raw .modal-hint{ font-size: 12.5px; color: var(--brand-deep); text-align: center; margin: 12px 0px 0px; }
.pagebody-raw .phone-field{ display: flex; align-items: center; margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pagebody-raw .phone-field:focus-within{ border-color: var(--brand); }
.pagebody-raw .phone-field .cc{ padding: 12px; background: var(--paper-2); font-family: "IBM Plex Mono"; font-size: 14px; border-right: 1px solid var(--line); }
.pagebody-raw .phone-field input{ flex: 1 1 0%; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 0px !important; margin: 0px !important; }
.pagebody-raw .otp-inputs{ display: flex; gap: 8px; margin-top: 6px; }
.pagebody-raw .otp-inputs input{ width: 100%; text-align: center; font-family: "Space Grotesk"; font-size: 20px; font-weight: 600; padding: 12px 0px; border: 1px solid var(--line); border-radius: 10px; }
.pagebody-raw .otp-inputs input:focus{ outline: none; border-color: var(--brand); }
.pagebody-raw .otp-to{ font-size: 13px; color: var(--text-soft); margin: 0px 0px 14px; }
.pagebody-raw .otp-to b{ color: var(--text); }
.pagebody-raw .otp-resend{ font-size: 13px; color: var(--text-soft); text-align: center; margin: 12px 0px 0px; }
.pagebody-raw .linklike{ background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 13px; padding: 0px; font-family: inherit; }
.pagebody-raw .linklike:disabled{ color: var(--text-soft); cursor: default; }
.pagebody-raw .fgrid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 30px; }
.pagebody-raw .fgrid h5{ font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(107, 113, 119); margin: 0px 0px 14px; }
.pagebody-raw .fgrid a{ display: block; color: rgb(230, 232, 234); font-size: 14px; padding: 5px 0px; }
.pagebody-raw .fgrid a:hover{ color: var(--brand-soft); }
.pagebody-raw .fabout p{ font-size: 13.5px; max-width: 34ch; color: rgb(154, 160, 166); }
.pagebody-raw .fcontact{ font-size: 13.5px; line-height: 1.5; }
.pagebody-raw .fcontact div{ padding: 4px 0px; color: rgb(182, 187, 191); }
.pagebody-raw .fcontact a{ display: inline; color: rgb(230, 232, 234); }
.pagebody-raw .fcontact a:hover{ color: var(--brand-soft); }
.pagebody-raw .social{ display: flex; gap: 10px; margin-top: 16px; }
.pagebody-raw .social a{ width: 38px; height: 38px; border: 1px solid rgb(42, 42, 42); border-radius: 9px; display: grid; place-items: center; color: rgb(199, 203, 206); background: rgb(20, 20, 20); transition: 0.15s; }
.pagebody-raw .social a:hover{ border-color: var(--brand); color: rgb(255, 255, 255); background: var(--brand); }
.pagebody-raw .social a svg{ width: 18px; height: 18px; }
.pagebody-raw .fbar{ border-top: 1px solid rgb(31, 31, 31); margin-top: 32px; padding-top: 18px; font-size: 12.5px; color: rgb(122, 128, 133); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pagebody-raw .fbar a{ color: rgb(154, 160, 166); }
.pagebody-raw .fbar a:hover{ color: var(--brand-soft); }
@media (max-width: 680px){.pagebody-raw .logo-img{ height: 34px; }}
@media (max-width: 680px){.pagebody-raw .fgrid{ grid-template-columns: 1fr; }}
.pagebody-raw .search-suggest .ss-head{ font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); padding: 8px 10px 6px; }
.pagebody-raw .ss-item{ display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; cursor: pointer; text-decoration: none; transition: background 0.12s; }
.pagebody-raw .ss-item:hover, .pagebody-raw .ss-item.active{ background: var(--paper-2); }
.pagebody-raw .ss-thumb{ width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; background: rgb(255, 255, 255); border: 1px solid var(--line); object-fit: contain; padding: 3px; box-sizing: border-box; }
.pagebody-raw .ss-thumb-ph{ width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; background: var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.pagebody-raw .ss-thumb-ph svg{ width: 26px; height: 26px; }
.pagebody-raw .ss-body{ flex: 1 1 0%; min-width: 0px; }
.pagebody-raw .ss-name{ font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagebody-raw .ss-meta{ font-size: 11.5px; color: var(--text-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagebody-raw .ss-price{ font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px; color: var(--brand-deep); flex: 0 0 auto; margin-left: 6px; }
.pagebody-raw .ss-empty{ padding: 18px 12px; text-align: center; color: var(--text-soft); font-size: 13.5px; }
.pagebody-raw .ss-empty a{ color: var(--brand-deep); font-weight: 600; }
.pagebody-raw .ss-all{ display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--brand-deep); cursor: pointer; text-decoration: none; }
.pagebody-raw .ss-all:hover{ background: var(--paper-2); border-radius: 0px 0px 10px 10px; }
.pagebody-raw .cform-card .sub{ font-size: 13.5px; color: var(--text-soft); margin: 0px 0px 22px; }
.pagebody-raw .cf-field{ display: flex; flex-direction: column; gap: 5px; }
.pagebody-raw .cf-label{ font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.pagebody-raw .cf-input{ font-family: "IBM Plex Sans", sans-serif; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgb(255, 255, 255); transition: 0.15s; width: 100%; box-sizing: border-box; }
.pagebody-raw .cf-input:focus{ border-color: var(--brand); box-shadow: rgba(30, 126, 198, 0.12) 0px 0px 0px 3px; }
.pagebody-raw .cf-input.err{ border-color: rgb(229, 57, 53); box-shadow: rgba(229, 57, 53, 0.1) 0px 0px 0px 3px; }
.pagebody-raw .drawer .panelnav a.sub{ padding: 13px 0px 13px 16px; font-size: 14px; color: var(--brand-soft); font-weight: 400; }
.pagebody-raw .pimg-drone{ width: 74%; opacity: 0.95; }
.pagebody-raw .pimg-drone .body{ transform-origin: 50px 50px; animation: 4s ease-in-out 0s infinite normal none running droneBodyIn; }
.pagebody-raw .pimg-drone .arm{ transform-origin: 50px 50px; animation: 4s ease-in-out 0s infinite normal none running droneArmIn; }
.pagebody-raw .pimg-drone .arm2{ animation-delay: 0.12s; }
.pagebody-raw .pimg-drone .arm3{ animation-delay: 0.24s; }
.pagebody-raw .pimg-drone .arm4{ animation-delay: 0.36s; }
.pagebody-raw .pimg-drone .motor{ opacity: 0; animation: 4s ease-in-out 0s infinite normal none running droneMotorIn; }
.pagebody-raw .pimg-drone .motor1{ transform-origin: 22px 22px; }
.pagebody-raw .pimg-drone .motor2{ transform-origin: 78px 22px; animation-delay: 0.12s; }
.pagebody-raw .pimg-drone .motor3{ transform-origin: 22px 78px; animation-delay: 0.24s; }
.pagebody-raw .pimg-drone .motor4{ transform-origin: 78px 78px; animation-delay: 0.36s; }
.pagebody-raw .pimg-drone .propwrap{ opacity: 0; animation: 4s ease-in-out 0s infinite normal none running dronePropIn; }
.pagebody-raw .pimg-drone .propwrap2{ animation-delay: 0.08s; }
.pagebody-raw .pimg-drone .propwrap3{ animation-delay: 0.16s; }
.pagebody-raw .pimg-drone .propwrap4{ animation-delay: 0.24s; }
.pagebody-raw .pimg-drone .prop-spin{ transform-origin: 0px 0px; animation: 0.5s linear 0s infinite normal none running dronePropSpin; }
@media (prefers-reduced-motion: reduce){.pagebody-raw .pimg-drone *{ animation: auto ease 0s 1 normal none running none !important; opacity: 1 !important; transform: none !important; }}
.pagebody-raw .hero h1{ font-size: clamp(34px, 5vw, 58px); color: var(--text-on-ink); margin: 18px 0px 0px; }
.pagebody-raw .hero{ position: relative; overflow: hidden; color: var(--text-on-ink); background: radial-gradient(1100px 520px at 88% -8%, rgba(30, 126, 198, 0.2), transparent 60%), radial-gradient(820px 560px at 6% 112%, rgba(91, 168, 222, 0.18), transparent 55%), linear-gradient(178deg, rgb(232, 243, 252) 0%, rgb(241, 248, 253) 50%, rgb(255, 255, 255) 100%); }
.pagebody-raw .hero-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 60px 22px 64px; max-width: var(--maxw); margin: 0px auto; position: relative; z-index: 1; }
.pagebody-raw .hero-cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.pagebody-raw .tagstrip{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.pagebody-raw .tag{ font-family: "IBM Plex Mono"; font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-on-ink-soft); border: 1px solid var(--ink-3); border-radius: 999px; padding: 6px 11px; }
.pagebody-raw .panel{ background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 18px; padding: 17px; position: relative; max-width: 412px; margin: 0px auto; width: 100%; }
.pagebody-raw .panel .ptop{ display: flex; align-items: center; justify-content: space-between; font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-ink-soft); margin-bottom: 14px; }
.pagebody-raw .panel .ptop .live{ display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.pagebody-raw .panel .ptop .live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: 2s ease 0s infinite normal none running pulse; }
.pagebody-raw .panel .pimg{ background: rgb(255, 255, 255); border-radius: 12px; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; }
.pagebody-raw .panel .pimg svg{ width: 74%; opacity: 0.92; }
.pagebody-raw .panel .pimg img{ width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.pagebody-raw .readout{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.pagebody-raw .readout div{ background: var(--ink-2); padding: 11px 12px; }
.pagebody-raw .readout .k{ font-family: "IBM Plex Mono"; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-ink-soft); }
.pagebody-raw .readout .v{ font-family: "Space Grotesk"; font-size: 18px; color: var(--text-on-ink); margin-top: 3px; }
.pagebody-raw .hero h1 .hl{ color: var(--brand); }
.pagebody-raw .hero p.lede{ color: var(--text-on-ink-soft); font-size: 17px; max-width: 46ch; margin: 18px 0px 26px; }
.pagebody-raw .btn-outline-light{ background: transparent; border-color: var(--ink-3); color: var(--text-on-ink); }
.pagebody-raw .btn-outline-light:hover{ border-color: var(--brand); color: var(--brand); }
@media (max-width: 980px){.pagebody-raw .hero-grid{ grid-template-columns: 1fr; gap: 34px; }}
.pagebody-raw .rp-cta-row{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.pagebody-raw .btn-outline{ background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.pagebody-raw .rp-section{ padding: 46px 0px; }
.pagebody-raw .rp-section h2{ font-size: clamp(22px, 2.8vw, 30px); color: var(--ink); margin: 0px 0px 10px; }
.pagebody-raw .rp-section p.sub{ color: var(--text-soft); font-size: 15px; max-width: 72ch; margin: 0px 0px 28px; line-height: 1.6; }
.pagebody-raw .rp-grid3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pagebody-raw .rp-card{ background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.pagebody-raw .rp-card .ico{ width: 44px; height: 44px; border-radius: 10px; background: var(--sky); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.pagebody-raw .rp-card h3{ font-size: 16.5px; color: var(--ink); margin: 0px 0px 8px; }
.pagebody-raw .rp-card p{ font-size: 14px; color: var(--text-soft); line-height: 1.55; margin: 0px; }
.pagebody-raw .rp-process{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.pagebody-raw .rp-process h3{ font-size: 15px; font-family: "IBM Plex Mono"; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-deep); margin: 0px 0px 16px; }
.pagebody-raw .rp-steps{ list-style: none; margin: 0px; padding: 0px; counter-reset: rpstep 0; }
.pagebody-raw .rp-steps li{ counter-increment: rpstep 1; position: relative; padding: 0px 0px 20px 40px; border-left: 2px solid var(--line); margin-left: 14px; }
.pagebody-raw .rp-steps li:last-child{ border-color: transparent; padding-bottom: 0px; }
.pagebody-raw .rp-steps li::before{ content: counter(rpstep); position: absolute; left: -15px; top: 0px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: rgb(255, 255, 255); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk"; }
.pagebody-raw .rp-steps b{ display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; }
.pagebody-raw .rp-steps span{ font-size: 13.5px; color: var(--text-soft); }
.pagebody-raw .rp-price-table{ width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14.5px; }
.pagebody-raw .rp-price-table th, .pagebody-raw .rp-price-table td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pagebody-raw .rp-price-table th{ font-family: "IBM Plex Mono"; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); }
.pagebody-raw .rp-price-table td:last-child, .pagebody-raw .rp-price-table th:last-child{ text-align: right; font-weight: 600; color: var(--ink); }
.pagebody-raw .rp-note{ font-size: 12.5px; color: var(--text-soft); margin-top: 10px; }
.pagebody-raw .rp-issues{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pagebody-raw .rp-issue{ background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.pagebody-raw .rp-locate{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; background: var(--ink); color: rgb(255, 255, 255); border-radius: 20px; padding: 36px; }
.pagebody-raw .rp-locate h2{ color: rgb(255, 255, 255); }
.pagebody-raw .rp-locate p{ color: var(--ink-3); font-size: 14.5px; line-height: 1.65; }
.pagebody-raw .rp-locate .addr{ font-size: 14.5px; line-height: 1.7; margin-top: 14px; }
.pagebody-raw .rp-locate .addr b{ display: block; color: rgb(255, 255, 255); font-size: 13px; font-family: "IBM Plex Mono"; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.pagebody-raw .rp-faq{ border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.pagebody-raw .rp-faq summary{ padding: 16px 18px; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: rgb(255, 255, 255); }
.pagebody-raw .rp-faq summary::-webkit-details-marker{ display: none; }
.pagebody-raw .rp-faq summary::after{ content: "+"; font-size: 20px; color: var(--brand); font-weight: 400; }
.pagebody-raw .rp-faq[open] summary::after{ content: "–"; }
.pagebody-raw .rp-faq .a{ padding: 0px 18px 18px; font-size: 14px; color: var(--text-soft); line-height: 1.6; }
@media (max-width: 900px){.pagebody-raw .rp-grid3{ grid-template-columns: 1fr; }}
@media (max-width: 900px){.pagebody-raw .rp-process{ grid-template-columns: 1fr; }}
@media (max-width: 900px){.pagebody-raw .rp-issues{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 900px){.pagebody-raw .rp-locate{ grid-template-columns: 1fr; }}
.pagebody-raw .sec-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 38px; flex-wrap: wrap; }
.pagebody-raw .sec-head h2{ font-size: clamp(26px, 3.4vw, 40px); max-width: 18ch; margin: 12px 0px 0px; }
.pagebody-raw .sec-head p{ color: var(--text-soft); max-width: 52ch; margin: 10px 0px 0px; }
.pagebody-raw .idx{ font-family: "IBM Plex Mono"; font-size: 12px; color: var(--text-soft); letter-spacing: 0.1em; }
.pagebody-raw .ctaband{ background: var(--sky); color: var(--text-on-ink); border-radius: 22px; padding: 42px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.pagebody-raw .ctaband h2{ font-size: clamp(24px, 3vw, 34px); max-width: 20ch; }
.pagebody-raw .ctaband p{ margin: 10px 0px 0px; font-size: 15px; max-width: 46ch; color: var(--text-on-ink-soft); }
.pagebody-raw .ctaband .cb-actions{ display: flex; flex-direction: column; gap: 10px; }
.pagebody-raw .ctaband .btn{ justify-content: center; }
.pagebody-raw .ctaband .btn-ghost{ color: var(--brand); border-color: var(--brand); }
.pagebody-raw .ctaband .eyebrow{ color: var(--text-on-ink-soft); }
.pagebody-raw .ctaband .eyebrow::before{ background: var(--text-on-ink-soft); }
.pagebody-raw .btn-enquire-cta{ background: var(--ink); color: rgb(255, 255, 255); }
.pagebody-raw .btn-enquire-cta:hover{ background: var(--ink); box-shadow: rgba(0, 0, 0, 0.55) 0px 6px 20px -8px; }
@media (max-width: 980px){.pagebody-raw .ctaband{ grid-template-columns: 1fr; }}
.pagebody-raw .hb-rev-head{ margin-bottom: 20px; text-align: center; }
.pagebody-raw .hb-rev-head .idx2{ font-family: "Space Grotesk", monospace; font-size: 12px; color: var(--text-soft); letter-spacing: 0.1em; text-transform: uppercase; }
.pagebody-raw .hb-rev-head h2{ font-family: "Space Grotesk"; font-size: clamp(22px, 3vw, 30px); margin: 10px 0px 8px; color: var(--ink); }
.pagebody-raw .hb-rev-head p{ color: var(--text-soft); font-size: 14.5px; margin: 0px; }
.pagebody-raw .repair-quote-wrap{ max-width: 1120px; margin: 0px auto; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x; padding-bottom: 10px; }
.pagebody-raw .repair-quote{ background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; text-align: left; }
.pagebody-raw .repair-quote .star{ color: var(--brand); font-size: 14px; letter-spacing: 2px; }
.pagebody-raw .repair-quote p{ font-size: 15px; margin: 12px 0px 16px; }
.pagebody-raw .repair-quote .who{ display: flex; align-items: center; gap: 11px; }
.pagebody-raw .repair-quote .av{ width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 600; font-size: 14px; }
.pagebody-raw .repair-quote .who b{ font-size: 14px; display: block; }
.pagebody-raw .repair-quote .who span{ font-size: 12px; color: var(--text-soft); }
.pagebody-raw .quote p, .pagebody-raw .repair-quote p{ max-height: 100px; overflow: hidden; transition: max-height 0.25s; }
.pagebody-raw .quote.expanded p, .pagebody-raw .repair-quote.expanded p{ max-height: 260px; overflow-y: auto; padding-right: 4px; }
.pagebody-raw .read-full{ display: inline-block; margin: 0px 0px 14px; font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--brand); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pagebody-raw .read-full:hover{ opacity: 0.75; }
.pagebody-raw .quote, .pagebody-raw .repair-quote{ flex: 0 0 calc(33.3333% - 12px); scroll-snap-align: start; }
.pagebody-raw .tgrid::-webkit-scrollbar, .pagebody-raw .repair-quote-wrap::-webkit-scrollbar{ height: 6px; }
.pagebody-raw .tgrid::-webkit-scrollbar-thumb, .pagebody-raw .repair-quote-wrap::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
@media (max-width: 680px){.pagebody-raw .quote, .pagebody-raw .repair-quote{ flex: 0 0 100%; }}
@media (max-width: 480px){.pagebody-raw .modal-box{ padding: 24px 16px !important; }}
.pagebody-raw .ck-box{ max-width: 540px; width: 100%; background: rgb(255, 255, 255); border-radius: 18px; padding: 30px; position: relative; max-height: 92vh; overflow-y: auto; }
.pagebody-raw .ck-summary{ display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--paper-2); border-radius: 12px; margin-bottom: 22px; }
.pagebody-raw .ck-summary img{ width: 58px; height: 58px; object-fit: contain; background: rgb(255, 255, 255); border-radius: 9px; border: 1px solid var(--line); padding: 4px; box-sizing: border-box; }
.pagebody-raw .ck-sumname{ font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.pagebody-raw .ck-sumprice{ font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 17px; color: var(--brand-deep); margin-top: 2px; }
.pagebody-raw .ck-step h2{ font-family: "Space Grotesk", sans-serif; font-size: 21px; margin: 0px 0px 4px; color: var(--ink); }
.pagebody-raw .ck-sub{ font-size: 13.5px; color: var(--text-soft); margin: 0px 0px 20px; line-height: 1.5; }
.pagebody-raw .ck-options{ display: flex; flex-direction: column; gap: 12px; }
.pagebody-raw .ck-opt{ display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: rgb(255, 255, 255); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; transition: 0.16s; font-family: inherit; }
.pagebody-raw .ck-opt:hover{ border-color: var(--brand); background: var(--paper-2); transform: translateY(-1px); }
.pagebody-raw .ck-opt-ico{ font-size: 26px; width: 46px; height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--paper-2); border-radius: 11px; }
.pagebody-raw .ck-opt:hover .ck-opt-ico{ background: rgb(255, 255, 255); }
.pagebody-raw .ck-opt-body{ flex: 1 1 0%; min-width: 0px; }
.pagebody-raw .ck-opt-title{ font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.pagebody-raw .ck-opt-desc{ font-size: 12.5px; color: var(--text-soft); margin-top: 2px; line-height: 1.4; }
.pagebody-raw .ck-opt-arrow{ font-size: 18px; color: var(--brand); flex: 0 0 auto; }
.pagebody-raw .ck-back{ background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; color: var(--brand-deep); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0px; margin-bottom: 14px; font-family: inherit; }
.pagebody-raw .ck-back:hover{ text-decoration: underline; }
.pagebody-raw .ck-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.pagebody-raw .ck-grid .cf-field{ display: flex; flex-direction: column; gap: 5px; }
.pagebody-raw .cf-label{ font-size: 12px; font-weight: 600; color: var(--ink); }
.pagebody-raw .rq{ color: rgb(229, 57, 53); }
.pagebody-raw .cf-input{ font-family: "IBM Plex Sans", sans-serif; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--text); background: rgb(255, 255, 255); width: 100%; box-sizing: border-box; transition: 0.15s; }
.pagebody-raw .ck-err{ color: rgb(229, 57, 53); font-size: 12.5px; margin: 10px 0px 0px; display: none; }
.pagebody-raw .ck-submit{ width: 100%; height: 48px; margin-top: 18px; font-size: 15px; }
.pagebody-raw .ck-gst-summary{ background: rgb(247, 249, 252); border: 1px solid rgb(229, 231, 235); border-radius: 12px; padding: 12px 14px; margin: 14px 0px 4px; font-size: 13px; }
.pagebody-raw .ck-gst-row{ display: flex; justify-content: space-between; padding: 3px 0px; color: rgb(91, 100, 114); }
.pagebody-raw .ck-gst-row.ck-gst-total{ border-top: 1px solid rgb(229, 231, 235); margin-top: 6px; padding-top: 8px; font-weight: 700; color: rgb(17, 17, 17); font-size: 14px; }
.pagebody-raw .ck-done{ text-align: center; padding: 14px 0px 6px; }
.pagebody-raw .ck-done-ico{ width: 62px; height: 62px; border-radius: 50%; background: rgb(231, 246, 238); color: rgb(31, 138, 77); font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0px auto 16px; }
@media (max-width: 480px){.pagebody-raw .ck-box{ padding: 22px 16px; }}
@media (max-width: 480px){.pagebody-raw .ck-grid{ grid-template-columns: 1fr; }}
.pagebody-raw .hb-planner-pop{ position: fixed; inset: 0px; z-index: 999; display: none; align-items: center; justify-content: center; font-family: "IBM Plex Sans", Arial, sans-serif; }
.pagebody-raw .hb-planner-pop.show{ display: flex; }
.pagebody-raw .hb-planner-pop-backdrop{ position: absolute; inset: 0px; background: rgba(15, 44, 69, 0.55); opacity: 0; transition: opacity 0.35s; }
.pagebody-raw .hb-planner-pop.show .hb-planner-pop-backdrop{ opacity: 1; }
.pagebody-raw .hb-planner-pop-card{ position: relative; width: 380px; max-width: calc(-32px + 100vw); background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(15, 44, 69, 0.5) 0px 24px 60px -20px; padding: 28px 26px 24px; transform: translateY(16px) scale(0.97); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s; }
.pagebody-raw .hb-planner-pop.show .hb-planner-pop-card{ transform: translateY(0px) scale(1); opacity: 1; }
.pagebody-raw .hb-planner-pop-close{ position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: rgb(241, 245, 249); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: rgb(90, 107, 120); cursor: pointer; padding: 0px; }
.pagebody-raw .hb-planner-pop-close:hover{ color: rgb(17, 17, 17); }
.pagebody-raw .hb-planner-pop-ico{ width: 52px; height: 52px; border-radius: 12px; background: rgb(230, 241, 251); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pagebody-raw .hb-planner-pop-tags{ display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pagebody-raw .hb-planner-pop-tag{ font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.pagebody-raw .hb-planner-pop-tag-blue{ color: rgb(23, 106, 168); background: rgb(230, 241, 251); }
.pagebody-raw .hb-planner-pop-tag-green{ color: rgb(15, 110, 86); background: rgb(225, 245, 238); }
.pagebody-raw .hb-planner-pop-title{ font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: rgb(15, 44, 69); margin: 0px 0px 10px; }
.pagebody-raw .hb-planner-pop-text{ font-size: 13.5px; line-height: 1.6; color: rgb(90, 107, 120); margin: 0px 0px 20px; }
.pagebody-raw .hb-planner-pop-actions{ display: flex; align-items: center; gap: 10px; }
.pagebody-raw .hb-planner-pop-cta{ flex: 1 1 0%; background: rgb(23, 106, 168); color: rgb(255, 255, 255); font-size: 13.5px; font-weight: 600; text-align: center; padding: 11px 0px; border-radius: 8px; cursor: pointer; text-decoration: none; display: block; }
.pagebody-raw .hb-planner-pop-cta:hover{ background: rgb(18, 94, 148); }
.pagebody-raw .hb-planner-pop-later{ font-size: 13.5px; color: rgb(90, 107, 120); padding: 11px 4px; cursor: pointer; white-space: nowrap; }
@media (max-width: 480px){.pagebody-raw .hb-planner-pop-card{ width: 100%; padding: 24px 20px 20px; }}


/* ==========================================================================
   Round two — the nine pages that share this layout
   --------------------------------------------------------------------------
   drone-software, training and its six subject pages (ugcs, gpr, bathymetry,
   magnetometer, methane-detection, certification), and buy-sell-pre-owned-
   drones came across the same way as the first two: markup and behaviour, no
   stylesheet. Between them they name 40 classes that had no rule anywhere in
   the storefront's CSS, so those pages rendered as unstyled blocks.

   Lifted from hobitech.in the same way and on the same terms — every selector
   scoped under .pagebody-raw, so these rules can only reach an imported page
   body and never the storefront's own header, footer, menu or product grid.
   Sources: /training.html (the isx-* family), /drone-software.html (card,
   card-img, ctag, rp-final, sw-compare) and /buy-sell-pre-owned-drones.html
   (the bs-* family). The six training subject pages have no .html of their
   own on hobitech.in — they reuse training.html's stylesheet, which is why
   its rules cover them.

   Media queries are preserved as their own blocks at the end.
   ========================================================================== */

.pagebody-raw .isx-wrap{ --navy: #0F2C45; --navy-2: #123855; --cyan: #1e7ec6; --cyan-2: #4aa0e0; --ink: #16324a; --gray: #5b7185; --line: #e6edf3; --bg-soft: #f5f9fb; }
.pagebody-raw .isx-wrap *{ box-sizing: border-box; }
.pagebody-raw .isx-wrap h1, .pagebody-raw .isx-wrap h2, .pagebody-raw .isx-wrap h3{ font-family: Cambria, Georgia, serif; margin: 0px; color: var(--navy); }
.pagebody-raw .isx-wrap a{ text-decoration: none; color: inherit; }
.pagebody-raw .isx-wrap img{ max-width: 100%; display: block; }
.pagebody-raw .isx-breadcrumb{ font-size: 13px; color: var(--gray); padding: 16px 0px 0px; }
.pagebody-raw .isx-breadcrumb a{ color: var(--navy-2); font-weight: 600; }
.pagebody-raw .isx-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; border: 1px solid var(--line); border-radius: 12px; margin-top: -30px; position: relative; z-index: 2; background: rgb(255, 255, 255); box-shadow: rgba(15, 44, 69, 0.08) 0px 12px 30px; }
.pagebody-raw .isx-wrap.isx-stats-wrap{ max-width: 1180px; }
.pagebody-raw .isx-stat-item{ padding: 22px 18px; text-align: center; border-right: 1px solid var(--line); }
.pagebody-raw .isx-stat-item:last-child{ border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
.pagebody-raw .isx-stat-item .isx-num{ font-family: Cambria, Georgia, serif; font-size: 26px; font-weight: 700; color: var(--navy); }
.pagebody-raw .isx-stat-item .isx-lbl{ font-size: 12.5px; color: var(--gray); margin-top: 4px; }
.pagebody-raw .isx-section{ padding: 64px 0px 8px; }
.pagebody-raw .isx-section-head{ text-align: center; max-width: 640px; margin: 0px auto 40px; }
.pagebody-raw .isx-section-head .isx-eyebrow-dark{ color: var(--cyan); font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.pagebody-raw .isx-section-head h2{ font-size: 30px; margin: 10px 0px 12px; }
.pagebody-raw .isx-section-head p{ color: var(--gray); font-size: 15px; line-height: 1.6; }
.pagebody-raw .isx-cat-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-bottom: 56px; }
.pagebody-raw .isx-cat-card{ border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; text-align: left; transition: 0.15s; background: rgb(255, 255, 255); }
.pagebody-raw .isx-cat-card:hover{ border-color: var(--cyan); box-shadow: rgba(15, 44, 69, 0.08) 0px 10px 24px; transform: translateY(-2px); }
.pagebody-raw .isx-cat-icon{ width: 42px; height: 42px; border-radius: 10px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.pagebody-raw .isx-cat-card h3{ font-size: 15px; font-family: "Segoe UI", sans-serif; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pagebody-raw .isx-cat-card p{ font-size: 12.5px; color: var(--gray); line-height: 1.5; margin-bottom: 10px; }
.pagebody-raw .isx-cat-card .isx-link{ font-size: 12.5px; font-weight: 700; color: var(--cyan); }
.pagebody-raw .isx-prod-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 20px; }
.pagebody-raw .isx-prod-card{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgb(255, 255, 255); display: flex; flex-direction: column; }
.pagebody-raw .isx-prod-card:hover{ box-shadow: rgba(15, 44, 69, 0.1) 0px 16px 34px; }
.pagebody-raw .isx-prod-img{ height: 200px; background: var(--bg-soft); overflow: hidden; position: relative; }
.pagebody-raw .isx-prod-img img{ width: 100%; height: 100%; object-fit: cover; }
.pagebody-raw .isx-prod-body{ padding: 18px 20px 20px; flex: 1 1 0%; display: flex; flex-direction: column; }
.pagebody-raw .isx-prod-vendor{ font-size: 11.5px; color: var(--cyan); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
.pagebody-raw .isx-prod-body h3{ font-size: 16.5px; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.pagebody-raw .isx-prod-body p{ font-size: 13px; color: var(--gray); line-height: 1.55; margin-bottom: 14px; flex: 1 1 0%; }
.pagebody-raw .isx-prod-foot{ display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.pagebody-raw .isx-prod-price{ font-size: 13px; font-weight: 700; color: var(--navy); }
.pagebody-raw .isx-prod-btn{ font-size: 12.5px; font-weight: 700; color: rgb(255, 255, 255); background: var(--navy); padding: 8px 14px; border-radius: 6px; }
.pagebody-raw a.isx-prod-btn, .pagebody-raw a.isx-prod-btn:link, .pagebody-raw a.isx-prod-btn:visited, .pagebody-raw a.isx-prod-btn:hover, .pagebody-raw a.isx-prod-btn:active{ color: rgb(255, 255, 255) !important; }
.pagebody-raw .isx-cat-group{ margin-bottom: 44px; }
.pagebody-raw .isx-cat-group-title{ font-size: 17px; color: var(--navy); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: "Segoe UI", sans-serif; font-weight: 700; }
.pagebody-raw .isx-mini-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pagebody-raw .isx-mini-card{ display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; }
.pagebody-raw .isx-mini-name{ color: var(--ink); font-weight: 600; line-height: 1.35; }
.pagebody-raw .isx-mini-price{ color: var(--cyan); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pagebody-raw .isx-hero-full .isx-breadcrumb{ margin: 0px 0px 14px; padding: 0px; }
.pagebody-raw .isx-hero-full{ width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; overflow-x: clip; }
.pagebody-raw .isx-hero-full > .hero-grid{ max-width: 1200px; margin: 0px auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.pagebody-raw .card{ background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.16s, box-shadow 0.16s; }
.pagebody-raw .card:hover{ transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.4) 0px 16px 40px -22px; }
.pagebody-raw .card-img{ width: 100%; height: 230px; object-fit: contain; object-position: center center; display: block; padding: 6px; box-sizing: border-box; background: rgb(255, 255, 255); border-radius: 12px 12px 0px 0px; transition: 0.3s; }
.pagebody-raw .card:hover .card-img{ transform: scale(1.05); }
.pagebody-raw .card .ph{ position: relative; background: rgb(255, 255, 255); height: 230px; display: grid; place-items: center; border-bottom: 1px solid var(--line); overflow: hidden; }
.pagebody-raw .card .ph svg{ width: 64%; color: var(--ink); }
.pagebody-raw .card .body{ padding: 15px 15px 16px; display: flex; flex-direction: column; flex: 1 1 0%; }
.pagebody-raw .card .ctag{ font-family: "IBM Plex Mono"; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan); }
.pagebody-raw .card h3{ font-size: 16.5px; margin: 6px 0px 8px; }
.pagebody-raw .card a.media{ display: block; }
.pagebody-raw .card a.ptitle{ color: inherit; }
.pagebody-raw .card a.ptitle:hover h3{ color: var(--brand); }
.pagebody-raw .card .acts{ display: flex; gap: 8px; margin-top: auto; }
.pagebody-raw .card .acts .btn{ flex: 1 1 0%; justify-content: center; padding: 10px; font-size: 13px; }
.pagebody-raw .sw-compare{ background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 14px; box-shadow: rgba(15, 44, 69, 0.25) 0px 10px 30px -22px; }
.pagebody-raw .sw-compare table{ width: 100%; border-collapse: collapse; margin: 0px; font-size: 14.5px; }
.pagebody-raw .sw-compare thead tr{ background: var(--paper-2); }
.pagebody-raw .sw-compare th{ font-family: "IBM Plex Mono"; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); padding: 15px 20px; text-align: left; border-bottom: 2px solid var(--line); }
.pagebody-raw .sw-compare th:last-child, .pagebody-raw .sw-compare td:last-child{ text-align: left; }
.pagebody-raw .sw-compare td{ padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--text-soft); }
.pagebody-raw .sw-compare tbody tr{ transition: background 0.15s; }
.pagebody-raw .sw-compare tbody tr:last-child td{ border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.pagebody-raw .sw-compare tbody tr:hover{ background: var(--paper-2); }
.pagebody-raw .sw-compare td:first-child{ font-family: "Space Grotesk"; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pagebody-raw .sw-compare td:first-child::before{ content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-right: 11px; vertical-align: middle; }
.pagebody-raw .rp-final{ text-align: center; background: var(--sky); border-radius: 20px; padding: 44px 24px; margin-top: 10px; }
.pagebody-raw .rp-final h2{ margin: 0px 0px 10px; }
.pagebody-raw .bs-band{ padding: 46px 0px; }
.pagebody-raw .bs-wrap{ max-width: var(--maxw); margin: 0px auto; padding: 0px 22px; }
.pagebody-raw .bs-cards4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pagebody-raw .bs-cards2{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pagebody-raw .bs-compare-scroll{ overflow-x: auto; }
.pagebody-raw .bs-panel-row{ display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: 10px; gap: 12px; }
.pagebody-raw .bs-panel-row:last-child{ border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; }
@media (max-width: 980px){
.pagebody-raw .isx-stats{ grid-template-columns: repeat(2, 1fr); }
.pagebody-raw .isx-cat-grid{ grid-template-columns: repeat(2, 1fr); }
.pagebody-raw .isx-prod-grid{ grid-template-columns: 1fr; }
.pagebody-raw .isx-mini-grid{ grid-template-columns: 1fr 1fr; }
.pagebody-raw .bs-cards4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.pagebody-raw .isx-mini-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 700px){
.pagebody-raw .sw-compare{ overflow-x: auto; }
.pagebody-raw .sw-compare table{ min-width: 640px; }
}
@media (max-width: 600px){
.pagebody-raw .bs-cards4{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
.pagebody-raw .bs-cards2{ grid-template-columns: 1fr; }
.pagebody-raw .bs-compare-scroll table{ min-width: 560px; }
}
@media (max-width: 420px){
.pagebody-raw .bs-panel-row{ flex-wrap: wrap; }
}