:root {  --white: 0,0%,100%;  --white-bg-text: 0,0%,0%;  --black: 0,0%,0%;  --default-font-family: "Inter", sans-serif;  --header-font-family: "Red Hat Display", sans-serif;  --logo-max-width: 300px;  --primary: 240, 3%, 12%;  --primary-rgb: 240, 3%, 12%;  --primary-bg-hover-focus: 240, 3%, 7%;  --primary-bg-active: 240, 3%, 5%;  --primary-bg-text: 0, 0%, 100%;  --primary-bg-title: 0, 0%, 100%;  --primary-dark: 240, 3%, -2%;  --primary-light: 240, 3%, 32%;  --secondary: 344, 100%, 55%;  --secondary-rgb: 344, 100%, 55%;  --secondary-bg-hover-focus: 344, 100%, 50%;  --secondary-bg-active: 344, 100%, 45%;  --secondary-bg-text: 0, 0%, 100%;  --secondary-bg-title: 0, 0%, 100%;  --secondary-dark: 344, 100%, 35%;  --secondary-light: 344, 100%, 75%;  --accent: 344, 100%, 55%;  --accent-rgb: 344, 100%, 55%;  --accent-bg-hover-focus: 344, 100%, 50%;  --accent-bg-text: 0, 0%, 100%;  --accent-bg-title: 0, 0%, 100%;  --shade: 0, 0%, 97%;  --shade-rgb: 0, 0%, 97%;  --shade-bg-hover-focus: 0, 0%, 92%;  --shade-bg-text: 0, 0%, 0%;  --shade-bg-title: 0, 0%, 0%;  --dark: 240, 3%, 12%;  --dark-bg-text: 0, 0%, 100%;  --dark-bg-title: 0, 0%, 100%;  --dark-bg-hover-focus: 240, 3%, 7%;  --accentbar-height:10px;  --accentbar-color:hsl(var(--accent));  --default-font-color: hsl(var(--black));  --white-bg-title:0,0%,0%;  }  .row-columns+ .row-columns { border-top: none !important; }  .type>a, .type>:not(div) a { border-bottom: 1px solid hsl(var(--secondary)) !important; }  .section_widget_highlight-grid .grid__item_fill .card__screen {  opacity: -1.8 !important; }  .options-grid{ --max-width: 1200px; --container-padding: 20px; --gap: 20px; --color-bg: #ffffff; --color-foreground: #0b1220; --color-muted: #6b7280; --color-accent: hsl(var(--accent)); --color-accent-2: hsl(var(--accent)); --color-card-bg: #fbfdff; --radius: 12px; --shadow-soft: 0 6px 20px rgba(11,18,32,0.06); --shadow-strong: 0 10px 30px rgba(11,18,32,0.12); } /* --- Options grid (e.g., Dr. Treat One vs Pay-as-you-go) --- */ .options-grid{ margin-top: clamp(18px, 3vw, 36px); display: grid; grid-template-columns: repeat(1, 2fr); gap: var(--gap); align-items:start; }  /* card */ .options-grid .card{ background: var(--color-card-bg); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-soft); border: 2px solid hsl(var(--primary)); display:flex; flex-direction: column; gap:12px; }  /* card header row */ .options-grid .card .card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .options-grid .card .card-title{ margin:0; font-size: 1.125rem; font-weight:600; color: hsl(var(--primary)) !important; text-shadow: none !important; } .options-grid .card .card-sub{ display:block; font-size:0.95rem; color:var(--color-muted); margin-top:4px; text-align: left !important; }  /* price */ .options-grid .card .price{ font-size:1.125rem; font-weight:700; color:var(--color-foreground); } .options-grid .card .price .small{ display:block; font-size:0.9rem; font-weight:500; color:var(--color-muted); }  /* features list */ .options-grid .card ul.features{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:0.95rem; color:var(--color-muted); text-align: left !important; } .options-grid .card ul.features li::before{ content: "•"; display:inline-block; width:18px; color: hsl(var(--accent)); margin-right:6px; font-weight:700; }  /* CTA button */ .options-grid .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 16px; border-radius: 10px; border: none; cursor:pointer; font-weight:700; text-decoration:none; user-select:none; transition: transform .08s ease, box-shadow .08s ease; } .options-grid .btn:active{ transform: translateY(1px); } .options-grid .btn:focus{ outline: 3px solid rgba(31,142,241,0.18); outline-offset: 4px; }  /* primary / secondary */ .options-grid .btn-primary{ background: linear-gradient(180deg,var(--color-accent), color-mix(in srgb, var(--color-accent) 75%, black 10%)); color: white !important; box-shadow: var(--shadow-strong); }  /* --- Responsive layout changes --- */ @media (min-width:720px){ .options-grid{ grid-template-columns: repeat(1, 2fr); } .options-grid .card{ padding: 22px; }  @media (min-width:1000px){ .options-grid .card{ border-radius: 16px; } }  .type>blockquote { border: none !important; }