:root {
  --ink: #14284c;
  --muted: #425978;
  --green: #075290;
  --cream: #f8faff;
  --line: #d8e3f0;
  --mint: #dcf9ee;
  --accent: #def589;
}
body {background:var(--cream)}
header {background:#f8fafff5; backdrop-filter:blur(14px)}
.nav {min-height:78px}
.nav nav a {white-space:nowrap}
.nav nav a[aria-current=page] {text-decoration:underline;text-underline-offset:6px}
.brand strong {color:#163661}
.brand strong span {color:#2782e0}
.brand .brand-logo {width:100px}
a.lang {display:inline-flex;align-items:center}
.btn.primary {background:#154fb1;color:#fff}
.btn.primary:hover {background:#0b357f}
.btn.outline {border-color:#91a9ca}
.btn.outline:hover {background:#e4efff}
.hero {background:#132f72;color:#fff;grid-template-columns:1.05fr .95fr;border:none;border-radius:32px;min-height:535px;box-shadow:0 24px 64px -42px #08377eaa}
.hero-copy {padding:clamp(31px,6vw,90px)}
.hero .eyebrow {color:#c8e0ff}
.hero .eyebrow::before {background:#d6f678}
.hero h1 {line-height:1.05}
[lang=ar] .hero h1 {line-height:1.15}
.hero h1 em {color:#dff594}
.hero-copy>p:not(.eyebrow) {color:#e3edff;font-size:16px}
.hero .btn.primary {background:#dff594;color:#17325d}
.hero .btn.primary:hover {background:#f1ffc5}
.hero .btn.outline {color:#fff;border-color:#b4cbf5}
.hero .btn.outline:hover {background:#244991}
.hero-visual {background:radial-gradient(ellipse at 62% 32%,#e6fcff 0%,#85e1f2 30%,#338de2 62%,#1856b8 100%);min-height:420px}
.hero-visual::after {background:#063e787d}
.hero-visual>img {transform:rotate(-12deg);filter:drop-shadow(16px 19px 21px #1c57927d);height:85%;inset-block-start:5%}
.hero-visual .photo-label {background:#eff7ff;color:#173d71}
.hero-spec {position:absolute;inset-inline-end:22px;inset-block-start:22px;background:#eff7ffed;color:#143568;border-radius:16px;padding:10px 15px;display:grid;line-height:1.32}
.hero-spec strong {font-size:23px;justify-self:start}
.hero-spec span {font-size:12px;font-weight:800}
.trust {background:#eff4ff;border:1px solid var(--line);border-radius:15px}
.trust span {color:#215ac1}
.card {background:#fff;box-shadow:0 14px 40px -33px #284a84a3}
#models .card:nth-child(1) {border-top:5px solid #3184dc}
#models .card:nth-child(2) {border-top:5px solid #48be8c}
#models .card:nth-child(3) {border-top:5px solid #dc7ea5}
#models .card-media {aspect-ratio:1.42}
#models .card-media.elite {background:#e4eff8}
#models .card-media.mint {background:#e7f8ef}
#models .card-media.pink {background:#fcecf4}
#models .card-media img {mix-blend-mode:multiply}
.browse-more,.help {background:#edf3ff;border-color:#dbe6fc}
.compare-scroll caption {background:#e2edff;color:#153971}
.compare-scroll thead th {background:#f0f5ff}
.compare-scroll tbody tr:nth-child(even) {background:#f8faff}
.compare-note {background:#eef9f3;border-color:#4caf8c}
.match-card {background:#fff}
.match-card:nth-child(3n+1) {border-top:3px solid #6fa5ee}
.match-card:nth-child(3n+2) {border-top:3px solid #7bc9a7}
.match-card:nth-child(3n+3) {border-top:3px solid #e6a0bd}
.subhero {background:linear-gradient(115deg,#dfedff,#e3faef);border-color:#d2e3f7}
.catalog-grid .text-card {min-height:164px;border-top:4px solid #8bb7f7}
.catalog-grid .text-card .card-body {padding:20px}
.photo-grid figure {background:#fff;border-color:#d8e3f0}
.photo-open {background:#edf4fe}
.about-hero {display:grid;grid-template-columns:1.25fr .75fr;gap:24px;padding:clamp(25px,5vw,70px);align-items:center;background:linear-gradient(120deg,#dceaff,#e3f9ed);border:1px solid var(--line);border-radius:30px;margin-top:25px!important}
.about-hero h1 {font-size:clamp(37px,5.1vw,75px);line-height:1.12}
[lang=ar] .about-hero h1 {line-height:1.22}
.about-hero p:not(.eyebrow),.about-detail p {font-size:17px;color:var(--muted);max-width:67ch;line-height:1.85}
.about-product {display:grid;place-items:center;border-radius:23px;background:radial-gradient(ellipse at 65% 40%,#cafff2,#84d6ee 58%,#5394e4);min-height:295px}
.about-product img {height:270px;width:auto;transform:rotate(-10deg);filter:drop-shadow(14px 15px 13px #24579770)}
.about-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.about-tile {padding:24px;border-radius:20px;background:#e6efff;color:#16356a}
.about-tile:nth-child(2) {background:#e1f7eb;color:#164e40}
.about-tile:nth-child(3) {background:#fbe8f2;color:#632c4b}
.about-tile p {margin:0 0 7px;font-size:clamp(23px,3vw,36px);font-weight:850}
.about-tile h2 {font-size:19px;line-height:1.35;letter-spacing:0}
.about-tile div {line-height:1.65}
.about-detail {display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start}
.about-detail aside {background:#fff;border:1px solid var(--line);padding:25px;border-radius:19px}
.about-detail aside img {width:145px;height:auto;margin-bottom:15px}
.about-detail aside h2 {font-size:26px}
@media(max-width:900px){
  .hero-copy {padding:35px}
  .hero-spec {inset-inline-end:14px;inset-block-start:14px}
}
@media(max-width:680px){
  html {scroll-padding-top:111px}
  header .wrap.nav {display:grid;grid-template-columns:1fr auto;gap:0 12px;height:auto;min-height:0;padding-top:8px}
  header .nav .actions {grid-column:2;grid-row:1}
  header .nav nav {grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:10px;overflow-x:auto;padding-block:8px;font-size:12px}
  .nav .shop-top {display:none}
  .hero {grid-template-columns:1fr;border-radius:23px}
  .hero-copy {padding:25px 19px}
  .hero-visual {min-height:300px;aspect-ratio:1.18}
  .hero h1 {font-size:clamp(36px,9vw,57px)}
  .hero-spec {padding:7px 10px}
  .hero-spec strong {font-size:18px}
  .hero-spec span {font-size:10px}
  .catalog-grid .text-card .card-body {padding:12px}
  .about-hero,.about-detail {grid-template-columns:1fr}
  .about-tiles {grid-template-columns:1fr}
  .about-product {min-height:240px}
  .about-product img {height:218px}
}

/* Headings and product names */
.brand strong span {color:#075bb1}
.subhero h1,
.about-hero h1 {color:#17458a}
#models h2,
#compare h2,
#flossers > h2,
#devices > h2 {color:#17458a}
#attachments h2,
#tips > h2,
#accessories > h2,
.about-detail > div h2 {color:#09634e}
#chooser h2,
#bundles > h2,
#support > h2,
.about-detail aside h2 {color:#85315f}
.card-body h3,
.match-card h3 {color:#17458a}
#models .card:nth-child(2) h3,
#flossers .card:has(.card-media.mint) h3,
.match-card:nth-child(3n+2) h3 {color:#09634e}
#models .card:nth-child(3) h3,
#flossers .card:has(.card-media.pink) h3,
.match-card:nth-child(3n+3) h3 {color:#85315f}