/* Drive Safe uses the shared Play Best campaign and product-editorial layout.
   Keep photography and production artwork complete at every screen size. */
.drive-page { background-image: none; }
.drive-page .nav {
  --ink: #fff;
  --ink-2: #f7f6fb;
  --text: #141019;
  --text-dim: #615d6c;
  --line: #e7e4ef;
}
.ds-main {
  --campaign-color: #ffd000;
  --campaign-ink: #132d40;
  --ds-ink: #141019;
  --ds-muted: #615d6c;
  --ds-line: #e7e4ef;
  background: #fff;
  color: var(--ds-ink);
}
.ds-main h1, .ds-main h2, .ds-main h3 {
  font-family: "HWT Artz", Archivo, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .025em;
  line-height: 1.08;
}
.ds-main h2 { font-size: clamp(38px, 4.5vw, 66px); }
.ds-main h3 { font-size: clamp(30px, 3vw, 42px); }
.ds-main p { font-size: 18px; color: var(--ds-muted); line-height: 1.7; }
.ds-main .eyebrow, .ds-number {
  display: block;
  color: var(--ds-ink);
  font: 800 12px/1.6 "Hanken Grotesk", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ds-main a:focus-visible, .ds-main summary:focus-visible { outline: 3px solid #1674cf; outline-offset: 6px; }
.ds-section { padding-block: 96px; scroll-margin-top: 104px; }
.ds-hero .product-editorial-grid > * { min-width: 0; }
.ds-hero .hero__tag { color: var(--ds-muted); border-color: var(--ds-line); }
.ds-hero .product-editorial-copy .lead { font-size: 22px; max-width: 26ch; line-height: 1.55; }
.ds-hero__product {
  aspect-ratio: 4 / 3;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff4de;
}
.ds-hero__product img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ds-facts { gap: 18px 32px; }
.ds-story { padding-bottom: 0; }
.ds-story__intro { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.ds-story__intro .campaign-kicker { font-size: 12px; color: var(--ds-ink); margin-top: 0; }
.ds-story__intro h2 { margin-top: 16px; }
.ds-story__intro > p:last-child { font-size: 21px; margin: 24px auto 0; }
.ds-lifestyle { margin: 0; }
.ds-lifestyle img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ds-lifestyle figcaption { margin-top: 16px; color: var(--ds-muted); font-size: 13px; line-height: 1.6; }
.ds-heading { display: grid; grid-template-columns: 1.35fr .85fr; align-items: end; gap: 60px; margin-bottom: 44px; }
.ds-heading h2 { margin-bottom: 0; }
.ds-heading > p { max-width: 40ch; font-size: 19px; }
.ds-family { margin: 0 0 36px; }
.ds-family img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ds-edition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ds-edition { display: flex; flex-direction: column; padding: 36px; border: 1px solid var(--ds-line); border-top: 5px solid var(--campaign-color); border-radius: 12px; }
.ds-edition h3 { margin: 18px 0 22px; }
.ds-edition p { margin-bottom: 24px; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 28px; list-style: none; padding: 0; }
.ds-tags li { background: #f5f3f8; border-radius: 20px; padding: 7px 12px; font-size: 13px; line-height: 1.5; }
.ds-text-link { display: inline-block; color: var(--ds-ink); font-weight: 750; font-size: 16px; text-decoration: underline; text-underline-offset: 6px; line-height: 1.5; }
.ds-text-link:hover { color: #b71c68; }
.ds-edition .ds-text-link { align-self: flex-start; }
.ds-split { display: grid; grid-template-columns: 1.15fr .9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.ds-split > * { min-width: 0; }
.ds-board { background: var(--campaign-ink); color: #fff; }
.ds-board .eyebrow { color: var(--campaign-color); }
.ds-board p { color: #d7e2e9; }
.ds-board__image { display: block; }
.ds-board__image img { display: block; width: 100%; height: auto; box-shadow: 0 20px 45px #0003; }
.ds-board__copy h2 { margin-bottom: 26px; }
.ds-steps { padding: 0; list-style: none; counter-reset: turn; display: grid; gap: 25px; margin: 30px 0; }
.ds-steps li { display: grid; grid-template-columns: 30px 1fr; column-gap: 18px; counter-increment: turn; }
.ds-steps li::before { content: counter(turn, decimal-leading-zero); color: var(--campaign-color); font: 400 24px/1.3 "HWT Artz", sans-serif; grid-row: 1 / 3; }
.ds-steps strong { font: 400 25px/1.2 "HWT Artz", sans-serif; letter-spacing: .025em; margin-bottom: 8px; }
.ds-steps span { grid-column: 2; font-size: 16px; line-height: 1.65; color: #d7e2e9; }
.ds-main .ds-components { border-top: 1px solid #536573; padding-top: 24px; font-size: 15px; margin-bottom: 26px; }
.ds-board .ds-text-link { color: var(--campaign-color); }
.ds-board .ds-text-link:hover { color: #fff; }
.ds-questions { background: #f5f7f9; }
.ds-questions .ds-split, .ds-faq .ds-split { grid-template-columns: .85fr 1.15fr; }
.ds-questions p + p { margin-top: 20px; }
.ds-topic-list { display: grid; gap: 18px; margin-top: 30px; padding: 0; list-style: none; }
.ds-topic-list li { border-top: 1px solid #d9dfe4; padding-top: 16px; }
.ds-topic-list strong { display: block; font: 400 26px/1.2 "HWT Artz", sans-serif; letter-spacing: .025em; margin-bottom: 7px; }
.ds-topic-list span { display: block; font-size: 16px; color: var(--ds-muted); line-height: 1.6; }
.ds-sample-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ds-sample-cards figure { margin: 0; min-width: 0; }
.ds-sample-cards figure:nth-child(2) { padding-top: 48px; }
.ds-sample-cards img { display: block; width: 100%; height: auto; box-shadow: 0 16px 36px #14232c1a; border-radius: 12px; }
.ds-sample-cards figcaption { font-weight: 750; font-size: 14px; line-height: 1.5; padding-top: 20px; }
.ds-sample-cards figcaption span { display: block; font-weight: 400; color: var(--ds-muted); font-size: 13px; margin-top: 5px; }
.ds-company { background: #fff7d6; }
.ds-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ds-use-grid article { border-top: 3px solid var(--campaign-color); padding-top: 26px; }
.ds-use-grid article > span { font: 400 26px/1.2 "HWT Artz", sans-serif; }
.ds-use-grid h3 { font-size: 32px; margin: 22px 0 18px; }
.ds-use-grid p { font-size: 18px; }
.ds-company__action { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-top: 1px solid #ded4aa; padding-top: 34px; margin-top: 42px; }
.ds-company__action p { max-width: 44ch; }
.ds-faq .ds-split { align-items: start; }
.ds-faq details { border-bottom: 1px solid var(--ds-line); padding: 26px 0; }
.ds-faq details:first-child { padding-top: 0; }
.ds-faq summary { font-weight: 750; font-size: 20px; line-height: 1.45; cursor: pointer; padding-right: 10px; }
.ds-faq details p { margin-top: 18px; font-size: 17px; }
.ds-end { padding: 84px 24px; }
.ds-end h2 { font-size: clamp(42px, 5vw, 76px); }
.ds-end p { color: #302a14; max-width: 57ch; margin: 25px auto 32px; font-size: 20px; }
.ds-end small { color: #443b13; line-height: 1.6; }
@media (max-width: 1000px) {
  .ds-heading { gap: 32px; }
  .ds-split { gap: 36px; }
  .ds-edition { padding: 28px; }
  .ds-hero__product { aspect-ratio: 1; }
  .ds-use-grid { gap: 24px; }
}
@media (max-width: 900px) {
  .ds-split, .ds-questions .ds-split, .ds-faq .ds-split { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .ds-heading { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ds-heading > p { max-width: 60ch; }
  .ds-board__image { max-width: 680px; width: 100%; margin-inline: auto; }
  .ds-board__copy { max-width: 700px; }
  .ds-sample-cards { max-width: 640px; margin-inline: auto; width: 100%; }
  .ds-company__action { align-items: start; }
}
@media (max-width: 760px) {
  .ds-hero .product-editorial-copy .lead { font-size: 20px; max-width: 32ch; }
  .ds-hero .product-editorial-copy h1 { font-size: clamp(64px, 14vw, 92px); }
  .ds-hero .hero__actions { gap: 12px; }
  .ds-hero .btn { flex: 0 1 auto; }
  .ds-hero__product { aspect-ratio: 4 / 3; padding: 8px; }
  .ds-facts { padding: 22px 24px; gap: 18px 20px; }
}
@media (max-width: 600px) {
  .ds-section { padding-block: 60px; }
  .ds-main h2 { font-size: clamp(36px, 9vw, 48px); }
  .ds-main p { font-size: 17px; }
  .ds-main .eyebrow, .ds-number { font-size: 11px; letter-spacing: .1em; }
  .ds-story { padding-bottom: 0; }
  .ds-story__intro { margin-bottom: 34px; }
  .ds-story__intro .campaign-kicker { font-size: 11px; }
  .ds-story__intro > p:last-child { font-size: 19px; }
  .ds-lifestyle figcaption { font-size: 12px; }
  .ds-heading { margin-bottom: 28px; }
  .ds-family { margin-bottom: 26px; }
  .ds-edition-grid, .ds-use-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ds-edition { padding: 26px; }
  .ds-edition h3 { font-size: 34px; }
  .ds-tags li { font-size: 12px; }
  .ds-sample-cards { gap: 16px; }
  .ds-sample-cards img { border-radius: 8px; }
  .ds-sample-cards figure:nth-child(2) { padding-top: 28px; }
  .ds-sample-cards figcaption { font-size: 13px; padding-top: 15px; }
  .ds-sample-cards figcaption span { font-size: 12px; }
  .ds-company__action { display: block; margin-top: 32px; padding-top: 28px; }
  .ds-company__action a { margin-top: 22px; }
  .ds-faq summary { font-size: 18px; }
  .ds-end { padding: 60px 0; }
  .ds-main .ds-end h2 { font-size: clamp(42px, 10vw, 56px); }
}