/* ==============================================================
   MileIQ Privacy Policy -- Legal Design
   Scoped under .privacy-page so the bespoke legal-design styles
   cannot leak into the shared MileIQ site chrome.
   ============================================================== */
/* ==========================================================================
   MileIQ Privacy Policy — Legal Design
   ========================================================================== */

.privacy-page{
  --color-text: #000;
  --color-text-70: rgba(0, 0, 0, 0.7);
  --color-text-meta: #777675;
  --color-link-hover: #0070d7;
  --color-border: #e3e2e2;
  --color-bg: #fff;

  /* Brand icon colors */

  --color-orange: #ff7e00;
  --color-blue: #006fd7;
  --color-yellow: #af9109;
  --color-green: #00af31;
  --color-tan: #a58214;

  /* Card surface tints (icon backgrounds) */

  --tint-orange: #fff0d1;
  --tint-blue: #cff3ff;
  --tint-yellow: #fffad4;
  --tint-green: #e4faac;
  --tint-tan: #f9f3e6;

  /* Inner sub-card tints */

  --tint-orange-soft: rgba(255, 247, 230, 0.7);
  --tint-blue-soft: rgba(232, 250, 255, 0.7);
  --tint-yellow-soft: rgba(255, 251, 223, 0.7);
  --tint-green-soft: rgba(228, 250, 172, 0.5);
  --tint-tan-soft: #f9f3e6;

  /* Contents card */

  --contents-bg: #f9f7f5;

  --radius-card: 16px;
  --radius-icon: 7px;

  --font-size-sm: 14px;   /* labels / pills / chrome */
  --font-size-body: 16px; /* body copy — matches the site baseline (16px/24px) */
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;
  --font-size-display: 48px;

  /* Default icon stroke color (overridden by theme classes) */

  --icon-color: #56524e;}/* ==========================================================================
   Icon system
   Renders an SVG file as a CSS mask so its color is fully controllable
   via the `--icon-color` custom property (driven by the section theme).
   ========================================================================== */



.privacy-page .ic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--icon-color, currentColor);}
.privacy-page .ic > .ic-svg{
  width: 100%;
  height: 100%;
  display: block;
  fill: none;}

.privacy-page .ic--sm{ width: 16px; height: 16px;}
.privacy-page .ic--md{ width: 20px; height: 20px;}
.privacy-page .ic--lg{ width: 24px; height: 24px;}

/* ---------- Graphik (with sensible fallbacks) ---------- *//* ---------- Reset ---------- */


.privacy-page *, .privacy-page *::before, .privacy-page *::after{
  box-sizing: border-box;}


html{
  scroll-behavior: smooth;
  scroll-padding-top: 24px;}


.privacy-page{
  margin: 0;
  font-family: "Graphik", Arial, sans-serif;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;}


.privacy-page img{
  display: block;
  max-width: 100%;}

/* The shared site stylesheet sets global bare-element defaults (p { font-size:
   1rem; line-height: 150% }, ul/ol { color: #222; padding-left: 40px }, ...)
   that would otherwise leak into the design. Reset them to be inherited from
   the design's own rules. */
.privacy-page p,
.privacy-page ul,
.privacy-page ol,
.privacy-page li,
.privacy-page dd,
.privacy-page dl,
.privacy-page strong,
.privacy-page em,
.privacy-page blockquote{
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;}


.privacy-page button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;}


.privacy-page a{
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
  transition: color 120ms ease;}

.privacy-page a:hover, .privacy-page a:focus-visible{
  color: var(--color-link-hover);}

.privacy-page a:focus-visible{
  outline: 2px solid var(--color-link-hover);
  outline-offset: 2px;
  border-radius: 2px;}/* ---------- Page layout ---------- */



.privacy-page{
  max-width: 1201px;
  margin: 0 auto;
  padding: 81px 32px;
  display: flex;
  flex-direction: column;
  gap: 57px;}


@media (max-width: 768px){
  .privacy-page{
    padding: 40px 20px;
    gap: 40px;}}/* ==========================================================================
   Hero
   ========================================================================== */




.privacy-page .hero{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;}


.privacy-page .hero__title{
  font-family: "Graphik", sans-serif;
  font-weight: 700;
  font-size: var(--font-size-display);
  line-height: 1.1;
  margin: 0;}


.privacy-page .hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;}


.privacy-page .meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-meta);}

.privacy-page .meta-pill__icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;}

.privacy-page .meta-pill__icon.ic{
  /* Hero meta-pills (calendar / clock) — keep neutral icon color */

  --icon-color: var(--color-text-meta);}/* Contact pills under "Who we are" inherit the orange theme color */


.privacy-page .contact-pills .meta-pill__icon.ic{
  --icon-color: var(--color-orange);}


@media (max-width: 540px){
  .privacy-page .hero__title{
    font-size: 32px;
    word-break: break-word;
    hyphens: auto;}}


@media (max-width: 380px){
  .privacy-page .hero__title{
    font-size: 28px;}}/* ==========================================================================
   Intro
   ========================================================================== */




.privacy-page .intro{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 620px;}

.privacy-page .intro__title{
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: 1.2;
  margin: 0;}

.privacy-page .intro__text{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  margin: 0;
  line-height: 24px;}

@media (max-width: 540px){
  .privacy-page .intro__title{
    font-size: 26px;}}/* ==========================================================================
   Summary card grid
   ========================================================================== */




.privacy-page .summary{
  display: flex;
  flex-direction: column;
  gap: 14px;}


.privacy-page .card-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;}/* Left column of a card-row that stacks two cards (e.g. protect + how long) */



.privacy-page .card-col{
  display: flex;
  flex-direction: column;
  gap: 14px;}

/* Let stacked cards share the column height so a tall card on the right
   (e.g. "Who we share it with") lines up with the column on the left. */
.privacy-page .card-col > .card{
  flex: 1 1 auto;}/* Row where the left card is wider than the right one (e.g. "Why we use
   your data" 677 : "Your rights" 337) */



.privacy-page .card-row--2-1{
  grid-template-columns: 2fr 1fr;}


@media (max-width: 768px){
  .privacy-page .card-row{
    grid-template-columns: 1fr;}}



.privacy-page .card{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: #fff;}


.privacy-page .card--compact{
  gap: 12px;}


.privacy-page .card__head{
  display: flex;
  flex-direction: column;
  gap: 12px;}


.privacy-page .card__title-row{
  display: flex;
  align-items: center;
  gap: 10px;}


.privacy-page .card__title{
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;}


.privacy-page .card__sub{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  margin: 0;
  line-height: 24px;}/* Icon "chip" backgrounds */



.privacy-page .icon-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-icon);
  flex-shrink: 0;
  background: var(--chip-bg, transparent);}

.privacy-page .icon-chip--lg{
  width: 40px;
  height: 40px;
  padding: 6px 5px;}

.privacy-page .icon-chip--lg img, .privacy-page .icon-chip--lg .ic{
  width: 24px;
  height: 24px;}

.privacy-page .icon-chip--sm{
  width: 26px;
  height: 26px;
  padding: 6px 5px;}

.privacy-page .icon-chip--sm img, .privacy-page .icon-chip--sm .ic{
  width: 16px;
  height: 16px;}

.privacy-page .icon-chip--white{
  background: #fff;
  border: 1px solid var(--color-border);}/* Theme palettes — set both the chip tint background and the icon color so
   icons are tinted to match their containing section. */



.privacy-page .theme-orange{ --chip-bg: var(--tint-orange); --icon-color: var(--color-orange);}
.privacy-page .theme-blue{ --chip-bg: var(--tint-blue);   --icon-color: var(--color-blue);}
.privacy-page .theme-yellow{ --chip-bg: var(--tint-yellow); --icon-color: var(--color-yellow);}
.privacy-page .theme-green{ --chip-bg: var(--tint-green);  --icon-color: var(--color-green);}
.privacy-page .theme-tan{ --chip-bg: var(--tint-tan);    --icon-color: var(--color-tan);}

.privacy-page .theme-orange .sub-card{
  background: var(--tint-orange-soft);}

.privacy-page .theme-blue .sub-card{
  background: var(--tint-blue-soft);}

.privacy-page .theme-yellow .sub-card{
  background: var(--tint-yellow-soft);}

.privacy-page .theme-tan .sub-card{
  background: var(--tint-tan-soft);}/* What-data grid (4 sub-cards in 2-col layout) */



.privacy-page .data-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;}

.privacy-page .data-grid__col{
  display: flex;
  flex-direction: column;
  gap: 12px;}/* Let the sub-cards grow so both columns share the same height */


.privacy-page .data-grid__col .sub-card{
  flex: 1 1 auto;}

@media (max-width: 768px){
  .privacy-page .data-grid{
    grid-template-columns: 1fr;}}



.privacy-page .sub-card{
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;}

.privacy-page .sub-card__head{
  display: flex;
  align-items: center;
  gap: 11px;}

.privacy-page .sub-card__title{
  font-size: var(--font-size-body);
  font-weight: 700;
  margin: 0;}

.privacy-page .sub-card__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;}

.privacy-page .sub-card__list li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;}

.privacy-page .sub-card__list li::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-70);
  flex-shrink: 0;}/* "Why we use" / "Your rights" pill cards */



.privacy-page .pill-card{
  border-radius: var(--radius-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;}

.privacy-page .pill-card__title{
  font-size: var(--font-size-body);
  font-weight: 700;
  margin: 0;}

.privacy-page .pill-card__body{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  margin: 0;
  line-height: 24px;}


.privacy-page .rights-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;}

.privacy-page .rights-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-card);
  background: var(--tint-yellow-soft);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);}

.privacy-page .rights-list li img, .privacy-page .rights-list li .ic{
  width: 16px;
  height: 16px;}


.privacy-page .share-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-card);
  background: var(--tint-tan);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-70);}

.privacy-page .share-pill img, .privacy-page .share-pill .ic{
  width: 16px;
  height: 16px;}

.privacy-page .share-pill strong{
  font-weight: 700;}/* "Who we are" card contact pills */



.privacy-page .contact-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;}

.privacy-page .contact-pills .meta-pill{
  background: var(--tint-orange-soft);
  border-color: transparent;
  color: var(--color-text-70);}

.privacy-page .contact-pills .meta-pill strong{
  font-weight: 700;
  color: var(--color-text-70);}

.privacy-page .contact-pills .meta-pill a{
  color: var(--color-text);}/* Learn more links */



.privacy-page .learn-more{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;}

.privacy-page .learn-more .ic{
  width: 14px;
  height: 14px;
  color: currentColor;}

.privacy-page .learn-more--block{
  margin-top: 14px;}/* Pin the "Learn more" link to the bottom of its card so it lines up
   across cards in the same row. */



.privacy-page .card > .learn-more{
  margin-top: auto;}/* ==========================================================================
   Two-column policy section (Contents + expandable sections)
   ========================================================================== */



.privacy-page .full-policy{
  display: grid;
  grid-template-columns: 292px 1fr;
  gap: 27px;
  align-items: start;}


.privacy-page .full-policy__main{
  display: flex;
  flex-direction: column;
  gap: 33px;
  min-width: 0;}


@media (max-width: 900px){
  .privacy-page .full-policy{
    grid-template-columns: 1fr;}}/* Contents nav */




.privacy-page .contents-nav{
  background: var(--contents-bg);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  position: sticky;
  top: 24px;}


.privacy-page .contents-nav__label{
  font-weight: 700;
  color: var(--color-text-meta);
  text-transform: uppercase;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;}


.privacy-page .contents-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;}


.privacy-page .contents-nav__item{
  display: flex;
  gap: 10px;}


.privacy-page .contents-nav__num{
  font-weight: 700;
  color: var(--color-text-meta);
  width: 24px;
  flex-shrink: 0;
  line-height: 1.4;}


.privacy-page .contents-nav__link{
  font-weight: 500;
  color: var(--color-text-70);
  text-decoration: none;
  flex: 1;
  line-height: 1.4;
  transition: color 120ms ease, font-weight 120ms ease;}


.privacy-page .contents-nav__link:hover, .privacy-page .contents-nav__link:focus-visible{
  color: var(--color-link-hover);}/* Active item — current expanded/in-view section.
   Use text-shadow to fake the "bold" emphasis so the line wrap doesn't
   change when an item becomes active. */



.privacy-page .contents-nav__item.is-active .contents-nav__link{
  color: var(--color-text);
  font-weight: 500;
  text-shadow: 0 0 0.65px currentColor;}

.privacy-page .contents-nav__item.is-active .contents-nav__num{
  color: var(--color-text);
  font-weight: 500;
  text-shadow: 0 0 0.65px currentColor;}


@media (max-width: 900px){
  .privacy-page .contents-nav{
    position: static;}}

/* On mobile the contents nav stops being a compact sidebar and becomes the
   primary, stacked navigation, so make it comfortably readable and tappable. */
@media (max-width: 900px){
  .privacy-page .contents-nav{
    font-size: 15px;}
  .privacy-page .contents-nav__label{
    font-size: 13px;}
  .privacy-page .contents-nav__list{
    gap: 4px;}
  .privacy-page .contents-nav__item{
    gap: 12px;
    align-items: flex-start;}
  .privacy-page .contents-nav__num{
    font-size: 15px;
    padding-top: 10px;
    text-align: center;}
  .privacy-page .contents-nav__link{
    font-size: 15px;
    padding: 10px 0;}
}
/* ---------- Section heading ---------- */




.privacy-page .full-policy__intro{
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 550px;}

.privacy-page .full-policy__intro h2{
  font-weight: 700;
  font-size: var(--font-size-xl);
  margin: 0;
  line-height: 1.2;}

.privacy-page .full-policy__intro p{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  margin: 0;}

@media (max-width: 540px){
  .privacy-page .full-policy__intro h2{
    font-size: 26px;}}/* ---------- Section list ---------- */




.privacy-page .sections-list{
  display: flex;
  flex-direction: column;
  gap: 14px;}/* details-based collapsible */



.privacy-page .section{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px;
  background: #fff;}/* Make the marker a custom icon */



.privacy-page .section > summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  outline: none;}

.privacy-page .section > summary::-webkit-details-marker{
  display: none;}


.privacy-page .section__title{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;}

.privacy-page .section__title h3{
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  line-height: 1.25;}


@media (max-width: 540px){
  .privacy-page .section__title h3{
    font-size: 17px;}}



.privacy-page .section__toggle{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 200ms ease;
  transform-origin: center;
  pointer-events: none;
  --icon-color: var(--color-text);}

.privacy-page .section[open] > summary .section__toggle{
  transform: rotate(45deg);}/* Body */



.privacy-page .section__body{
  padding: 12px 0 0 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;}


.privacy-page .section__body p{
  margin: 0;
  line-height: 24px;}


.privacy-page .section__body ul{
  margin: 0;
  padding-left: 21px;}

.privacy-page .section__body ul li{
  margin-bottom: 4px;}


.privacy-page .section__body strong{
  color: var(--color-text-70);
  font-weight: 700;}


@media (max-width: 540px){
  .privacy-page .section__body{
    padding-left: 0;}}/* Static (always-shown) section variant */




.privacy-page .section--static{
  display: flex;
  flex-direction: column;
  gap: 12px;}

.privacy-page .section--static .section__title h3{
  font-size: var(--font-size-lg);}

.privacy-page .section--static .section__static-body{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;}

.privacy-page .section--static .section__static-body p{
  margin: 0;
  line-height: 24px;}/* Inline contact pills inside section 1 */



.privacy-page .contact-row{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;}

.privacy-page .contact-row .share-pill{
  align-self: flex-start;
  background: var(--tint-orange-soft);
  color: var(--color-text-70);}/* Info callout */



.privacy-page .info-callout{
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--tint-yellow-soft);
  color: var(--color-text);
  font-weight: 400;
  align-items: flex-start;
  margin: 4px 0;}

.privacy-page .info-callout img, .privacy-page .info-callout .ic{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;}

.privacy-page .info-callout p{
  margin: 0;}/* Sub-section title row (with optional inline icon) */



.privacy-page .subsection-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;}

.privacy-page .subsection-head img, .privacy-page .subsection-head .ic{
  width: 20px;
  height: 20px;
  flex-shrink: 0;}

.privacy-page .subsection-head h4{
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;}/* Data table */



.privacy-page .data-table{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  width: 100%;
  font-size: var(--font-size-body);}

.privacy-page .data-table-row{
  display: grid;
  grid-template-columns: 1fr 1fr;}

.privacy-page .data-table-row + .data-table-row{
  border-top: 1px solid var(--color-border);}

.privacy-page .data-table-cell{
  padding: 10px 12px;
  color: var(--color-text-70);
  font-weight: 400;
  line-height: 24px;}

.privacy-page .data-table-cell + .data-table-cell{
  border-left: 1px solid var(--color-border);}

.privacy-page .data-table-row--head .data-table-cell{
  background: var(--tint-blue-soft);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: var(--font-size-sm);}

.privacy-page .data-table-row strong{
  font-weight: 700;
  color: var(--color-text-70);}


@media (max-width: 540px){/* On narrow screens, let the table scroll horizontally instead of
     collapsing into a single column. Keeps the side-by-side
     Category / Purpose layout readable. */

  .privacy-page .data-table{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;}

  .privacy-page .data-table-row{
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr);
    min-width: 460px;}}/* Nested expandable groups inside section 2 */




.privacy-page .nested-group{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px;
  background: #fff;
  margin-top: 4px;}

.privacy-page .nested-group > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;}

.privacy-page .nested-group > summary::-webkit-details-marker{
  display: none;}

.privacy-page .nested-group__title{
  flex: 1;
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;}

.privacy-page .nested-group__toggle{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 200ms ease;
  --icon-color: var(--color-text);}

.privacy-page .nested-group[open] > summary .nested-group__toggle{
  transform: rotate(45deg);}/* Purposes — always-open block (no border, no toggle).
   Wraps the inner Operational / Potential / Other expandables.
   Visually matches the .subsection-head pattern. */



.privacy-page .purposes{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;}

.privacy-page .purposes__head{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;}

.privacy-page .purposes__head .ic{
  width: 20px;
  height: 20px;}

.privacy-page .purposes__title{
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;}

.privacy-page .purposes__body{
  display: flex;
  flex-direction: column;
  gap: 12px;}


.privacy-page .nested-group__body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;}

.privacy-page .nested-group__intro{
  margin: 0;
  padding-left: 10px;
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;}


.privacy-page .nested-cards{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;}

.privacy-page .nested-card{
  background: var(--tint-blue-soft);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;}

.privacy-page .nested-card h5{
  font-size: var(--font-size-body);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);}

.privacy-page .nested-card ul{
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 4px;}

.privacy-page .nested-card ul ul{
  margin-top: 4px;}

.privacy-page .nested-card li{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;}

.privacy-page .nested-card li strong{
  font-weight: 700;}


@media (max-width: 540px){
  .privacy-page .nested-cards{
    padding: 0;}}/* Glossary list */




.privacy-page .glossary-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;}

.privacy-page .glossary-list p{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  margin: 0;
  line-height: 24px;}

.privacy-page .glossary-list p strong{
  color: var(--color-text);
  font-weight: 700;}

.privacy-page .glossary-list .glossary-heading{
  font-size: var(--font-size-md);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);}

.privacy-page .glossary-list ul{
  list-style: disc;
  margin: 0;
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  gap: 12px;}

.privacy-page .glossary-list ul li{
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text-70);
  line-height: 24px;}

.privacy-page .glossary-list ul li strong{
  color: var(--color-text);
  font-weight: 700;}

.privacy-page .glossary-list ul li p{
  margin: 0;
  line-height: 24px;}/* Smooth expand / collapse for the accordions.
   `interpolate-size` lets block-size animate to/from `auto`; `::details-content`
   animates the panel that <details> reveals. In older browsers this is ignored
   and the section simply opens as before. */



.privacy-page{
  interpolate-size: allow-keywords;}


.privacy-page .section::details-content, .privacy-page .nested-group::details-content{
  block-size: 0;
  overflow: hidden;
  transition: block-size 260ms cubic-bezier(0.4, 0, 0.2, 1),
    content-visibility 260ms allow-discrete;}


.privacy-page .section[open]::details-content, .privacy-page .nested-group[open]::details-content{
  block-size: auto;}/* Reduce-motion support */



@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;}

  .privacy-page .section__toggle, .privacy-page .nested-group__toggle{
    transition: none;}

  .privacy-page .section::details-content, .privacy-page .nested-group::details-content{
    transition: none;}}

/* ------------------------------------------------------------------
   Site integration: the shared MileIQ header is 80px tall and sits
   `position:absolute` on this page, so push the design content below
   it (the standalone design had no site header).
   ------------------------------------------------------------------ */
.privacy-page {
  padding-top: 160px;
}
@media (max-width: 768px) {
  .privacy-page {
    padding-top: 120px;
  }
}

/* Neutralize legacy site rules inside the design (legacy `ul li::marker`
   paints markers blue; the design draws its own bullet markers). */
.privacy-page .section__body ul li::marker,
.privacy-page .nested-card ul li::marker,
.privacy-page .glossary-list ul li::marker {
  color: inherit;
}

/* Defensive: the shared site CSS defines a global `.hero { height:100vh;
   max-height:700px }` and `.section { padding-left/right:10px }`. The design
   reuses those class names but never constrains height, so reset the leaked
   properties (design loads after the site CSS; scoped selector wins). */
.privacy-page .hero {
  height: auto;
  max-height: none;
}
.privacy-page .section {
  position: static;
}