/*
 * Visual-only contract for the static presentation. A future art direction
 * changes this file and its declared assets, not templates, copy or routing.
 */
:root {
  --presentation-theme-id: "direction-three-desktop";
  --presentation-font-sans: "DM Sans", Arial, sans-serif;
  --presentation-font-display: "DM Serif Display", Georgia, serif;

  --ink: #18191b;
  --muted: #62666b;
  --paper: #faf9f6;
  --card: #fff;
  --surface-strong: #fffefa;
  --line: #e8e5de;
  --deep: #18191b;
  --deep-strong: #121315;
  --link: #2d6497;
  --soft: #e9f0f6;
  --coral: #ffb800;
  --coral-soft: #ffe39a;
  --notice-surface: #fff3ef;
  --notice-ink: #5d504a;
  --lead-ink: #485249;
  --article-ink: #475149;
  --chip-line: #c9d8e7;
  --chip-ink: #245983;
  --hero-placeholder: #f3efe8;
  --preview-soft: #e9f0f6;
  --card-shadow: color-mix(in srgb, var(--ink) 4%, transparent);

  /* Direction 3 is intentionally a replaceable desktop art direction.
     Every presentation-only visual decision for the approved home route
     lives here; templates only select the route and the hero asset. */
  --d3-canvas: #fdfbf7;
  --d3-ink: #171719;
  --d3-brand-ink: #19191b;
  --d3-brand-mark: #ffb800;
  --d3-brand-accent: #3775ad;
  --d3-nav-ink: #1d1d20;
  --d3-action: #ffb900;
  --d3-surface: #fff;
  --d3-heading: #151517;
  --d3-copy: #252529;
  --d3-control-line: #e8e5df;
  --d3-control-muted: #7c7d82;
  --d3-filter-line: #e9e5de;
  --d3-filter-surface: #fffdfa;
  --d3-note: #6d6d72;
  --d3-neutral-surface: #eee9df;
  --d3-neutral-ink: #444;
  --d3-section-line: #ebe8e2;
  --d3-card-line: #ece8e1;
  --d3-section-muted: #77777b;
  --d3-icon-muted: #8a8a8d;
  --d3-card-muted: #636368;
  --d3-pay-surface: #fff5df;
  --d3-pay-ink: #d98d00;
  --d3-meta: #4e4e53;
  --d3-action-shadow: 0 7px 16px rgba(255, 185, 0, .18);
  --d3-search-shadow: 0 7px 20px rgba(29, 32, 36, .09);
  --d3-media-shadow: 0 11px 25px rgba(23, 55, 93, .26);
  --d3-card-shadow: 0 4px 16px rgba(40, 39, 35, .035);

  --d3-header-min-height: 74px;
  --d3-header-padding-block: 16px;
  --d3-header-padding-inline: clamp(28px, 4.5vw, 74px);
  --d3-brand-font-size: 29px;
  --d3-brand-letter-spacing: -.07em;
  --d3-brand-mark-size: 32px;
  --d3-brand-mark-gap: 10px;
  --d3-brand-mark-font-size: 17px;
  --d3-brand-mark-letter-spacing: -4px;
  --d3-navigation-gap: 37px;
  --d3-navigation-font-size: 14px;
  --d3-header-actions-gap: 22px;
  --d3-saved-font-size: 29px;
  --d3-saved-count-size: 15px;
  --d3-saved-count-top: -4px;
  --d3-saved-count-right: -7px;
  --d3-saved-count-font-size: 9px;
  --d3-action-padding: 12px 20px;
  --d3-action-radius: 8px;
  --d3-control-border-width: 1px;
  --d3-pill-radius: 99px;
  --d3-page-max-width: 1586px;
  --d3-hero-columns: minmax(460px, .95fr) minmax(600px, 1.05fr);
  --d3-hero-gap: 44px;
  --d3-page-padding-inline: clamp(40px, 4.5vw, 72px);
  --d3-hero-padding: 28px var(--d3-page-padding-inline) 32px;
  --d3-copy-padding-top: 43px;
  --d3-eyebrow-font-size: 10px;
  --d3-heading-margin-top: 9px;
  --d3-heading-font-size: clamp(74px, 6vw, 104px);
  --d3-heading-line-height: .91;
  --d3-heading-letter-spacing: -.06em;
  --d3-underline-width: 385px;
  --d3-underline-height: 8px;
  --d3-underline-margin: 17px 0;
  --d3-underline-radius: 99px;
  --d3-underline-rotation: 1.3deg;
  --d3-lead-max-width: 485px;
  --d3-lead-font-size: 17px;
  --d3-lead-line-height: 1.45;
  --d3-search-columns: minmax(0, 1.25fr) minmax(150px, .85fr) 103px;
  --d3-search-margin-top: 23px;
  --d3-search-padding: 6px;
  --d3-search-radius: 13px;
  --d3-search-item-padding: 9px 17px;
  --d3-search-label-gap: 8px;
  --d3-search-font-size: 14px;
  --d3-search-button-padding: 12px 10px;
  --d3-filter-gap: 10px;
  --d3-filter-margin-top: 20px;
  --d3-filter-padding: 8px 15px;
  --d3-filter-radius: 99px;
  --d3-filter-font-size: 12px;
  --d3-note-margin-top: 17px;
  --d3-note-font-size: 11px;
  --d3-benefit-gap: 22px;
  --d3-benefit-margin-top: 29px;
  --d3-benefit-item-gap: 12px;
  --d3-benefit-font-size: 11px;
  --d3-benefit-icon-size: 34px;
  --d3-benefit-heading-font-size: 12px;
  --d3-media-radius: 17px;
  --d3-media-callout-right: 20px;
  --d3-media-callout-bottom: 18px;
  --d3-media-callout-gap: 0 10px;
  --d3-media-callout-padding: 13px 20px;
  --d3-media-callout-radius: 25px;
  --d3-media-caption-font-size: 10px;
  --d3-media-value-font-size: 27px;
  --d3-category-columns: 150px 1fr;
  --d3-category-gap: 26px;
  --d3-category-padding: 22px var(--d3-page-padding-inline) 38px;
  --d3-section-heading-font-size: 20px;
  --d3-section-link-margin-top: 7px;
  --d3-category-list-columns: repeat(6, minmax(132px, 1fr));
  --d3-category-list-gap: 12px;
  --d3-category-card-gap: 11px;
  --d3-category-card-min-height: 78px;
  --d3-category-card-padding: 12px 14px;
  --d3-category-card-radius: 14px;
  --d3-category-icon-size: 40px;
  --d3-category-icon-radius: 8px;
  --d3-category-icon-font-size: 18px;
  --d3-category-font-size: 11px;
  --d3-offers-padding: 0 var(--d3-page-padding-inline) 54px;
  --d3-offer-heading-gap: 20px;
  --d3-offer-heading-padding-bottom: 13px;
  --d3-offer-grid-columns: repeat(5, minmax(0, 1fr));
  --d3-offer-grid-gap: 14px;
  --d3-offer-grid-padding-top: 24px;
  --d3-offer-card-padding: 20px;
  --d3-offer-card-radius: 13px;
  --d3-offer-save-inset: 17px;
  --d3-offer-save-font-size: 22px;
  --d3-offer-title-max-width: 85%;
  --d3-offer-title-font-size: 14px;
  --d3-offer-copy-margin: 9px 0 19px;
  --d3-offer-copy-font-size: 11px;
  --d3-offer-pay-padding: 6px 8px;
  --d3-offer-pay-radius: 5px;
  --d3-offer-pay-font-size: 15px;
  --d3-offer-meta-gap: 6px;
  --d3-offer-meta-font-size: 10px;
  --d3-desktop-compact-padding-inline: 28px;
  --d3-desktop-media-max-width: 860px;
}

/* Direction 3 is the approved shared desktop system. Route layouts remain
   intentionally distinct, while its shell, type, colours and controls stay
   identical across the whole static presentation. */
.direction-three { background: var(--d3-canvas); color: var(--d3-ink); }
.direction-three header { position: relative; z-index: 1; min-height: var(--d3-header-min-height); padding: var(--d3-header-padding-block) var(--d3-header-padding-inline); border: 0; background: var(--d3-canvas); }
.direction-three .brand { display: inline-flex; align-items: center; color: var(--d3-brand-ink); font-family: var(--presentation-font-sans); font-size: var(--d3-brand-font-size); font-weight: 850; letter-spacing: var(--d3-brand-letter-spacing); }
.direction-three .brand::before { display: grid; place-items: center; width: var(--d3-brand-mark-size); height: var(--d3-brand-mark-size); margin-right: var(--d3-brand-mark-gap); clip-path: polygon(50% 0, 100% 32%, 77% 100%, 50% 75%, 23% 100%, 0 32%); background: var(--d3-brand-mark); color: var(--d3-surface); content: "N"; font-family: var(--presentation-font-sans); font-size: var(--d3-brand-mark-font-size); font-weight: 900; letter-spacing: var(--d3-brand-mark-letter-spacing); }
.direction-three .brand span { color: var(--d3-brand-accent); }
.direction-three nav { gap: var(--d3-navigation-gap); color: var(--d3-nav-ink); font-size: var(--d3-navigation-font-size); font-weight: 650; }
.direction-three nav a[aria-current="page"] { border: 0; color: var(--d3-nav-ink); }
.header-actions { display: flex; align-items: center; gap: var(--d3-header-actions-gap); font-size: var(--d3-navigation-font-size); font-weight: 750; }
.saved-mark { position: relative; font-size: var(--d3-saved-font-size); font-weight: 400; line-height: 1; }
.saved-mark small { position: absolute; top: var(--d3-saved-count-top); right: var(--d3-saved-count-right); display: grid; place-items: center; width: var(--d3-saved-count-size); height: var(--d3-saved-count-size); border-radius: var(--d3-pill-radius); background: var(--d3-brand-mark); font-size: var(--d3-saved-count-font-size); }
.header-login { color: inherit; text-decoration: none; }
.header-cv { padding: var(--d3-action-padding); border-radius: var(--d3-action-radius); background: var(--d3-action); box-shadow: var(--d3-action-shadow); font-weight: 800; }
.direction-three .header-account { border-color: var(--d3-brand-ink); border-radius: var(--d3-action-radius); color: var(--d3-brand-ink); }
.direction-three main { min-height: 72vh; background: linear-gradient(180deg, var(--d3-canvas), #fff 34%, var(--d3-canvas)); }
.direction-three .context-nav { max-width: var(--d3-page-max-width); padding: 16px var(--d3-page-padding-inline) 0; color: var(--d3-section-muted); }
.direction-three .context-nav a { color: var(--d3-brand-accent); }
.direction-three .context-nav a[aria-current="page"] { border-color: var(--d3-action); }
.direction-three .hero, .direction-three .solo, .direction-three .grid-section, .direction-three .band, .direction-three .article { max-width: var(--d3-page-max-width); }
.direction-three .hero h1, .direction-three .solo h1, .direction-three .article h1, .direction-three h2, .direction-three h3 { color: var(--d3-heading); }
.direction-three .hero h1 em, .direction-three .solo h1 em { color: var(--d3-brand-accent); }
.direction-three .lead, .direction-three .article p { color: var(--d3-copy); }
.direction-three .eyebrow { color: var(--d3-brand-accent); }
.direction-three .notice { border-color: var(--d3-action); background: var(--d3-pay-surface); color: var(--d3-copy); }
.direction-three .card, .direction-three .chips li { border-color: var(--d3-card-line); background: var(--d3-surface); box-shadow: var(--d3-card-shadow); }
.direction-three .number, .direction-three .button { background: var(--d3-action); color: var(--d3-ink); }
.direction-three .number { background: transparent; }
.direction-three .text-link, .direction-three .chips li { color: var(--d3-brand-accent); }
.direction-three footer { border-color: var(--d3-section-line); background: var(--d3-canvas); }
.offer-presentation { max-width: var(--d3-page-max-width); margin: 0 auto; padding: clamp(64px, 8vw, 130px) var(--d3-page-padding-inline) 72px; }
.offer-presentation__intro { max-width: 950px; }
.offer-presentation h1 { max-width: 900px; margin: 12px 0 24px; color: var(--d3-heading); font: 400 clamp(58px, 6vw, 100px)/.92 var(--presentation-font-display); letter-spacing: -.07em; }
.offer-presentation__intro .lead { max-width: 650px; margin: 0; }
.offer-presentation__preview { max-width: 1080px; margin-top: 42px; padding: 10px; border: 1px solid var(--d3-control-line); border-radius: 16px; background: var(--d3-surface); box-shadow: var(--d3-search-shadow); }
.offer-presentation__search { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(170px, .8fr) 110px; align-items: center; }
.offer-presentation__search span { min-width: 0; padding: 14px 18px; color: var(--d3-control-muted); font-size: 14px; }
.offer-presentation__search span + span { border-left: 1px solid var(--d3-control-line); }
.offer-presentation__search b { margin-left: 8px; font-weight: 500; }
.offer-presentation__search span:last-child { border: 0; border-radius: var(--d3-action-radius); background: var(--d3-action); color: var(--d3-ink); text-align: center; font-weight: 800; }
.offer-presentation__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 8px 8px; padding: 0; list-style: none; }
.offer-presentation__filters li { padding: 8px 14px; border: 1px solid var(--d3-filter-line); border-radius: var(--d3-pill-radius); background: var(--d3-filter-surface); color: var(--d3-copy); font-size: 12px; }
.offer-presentation__status { margin: 22px 8px 12px; padding: 14px 16px; border-left: 3px solid var(--d3-action); background: var(--d3-pay-surface); color: var(--d3-copy); font-size: 13px; }
.offer-presentation__status strong { display: block; margin-bottom: 2px; color: var(--d3-ink); }
.offer-presentation__standards { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 46px; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--d3-section-line); }
.offer-presentation__standards h2 { max-width: 420px; margin: 12px 0 0; color: var(--d3-heading); font: 400 clamp(38px, 3.5vw, 56px)/.96 var(--presentation-font-display); letter-spacing: -.055em; }
.offer-presentation__standard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.offer-presentation__standard-grid article { min-width: 0; padding: 24px; border: 1px solid var(--d3-card-line); border-radius: 14px; background: var(--d3-surface); box-shadow: var(--d3-card-shadow); }
.offer-presentation__standard-grid span { color: var(--d3-brand-accent); font-size: 12px; font-weight: 850; }
.offer-presentation__standard-grid h3 { margin: 28px 0 8px; color: var(--d3-brand-ink); font-family: var(--presentation-font-sans); font-size: 17px; line-height: 1.12; letter-spacing: -.035em; }
.offer-presentation__standard-grid p { margin: 0; color: var(--d3-card-muted); font-size: 13px; line-height: 1.45; }
.offer-presentation > .notice { max-width: 720px; margin-top: 50px; }
.offer-presentation__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.offer-presentation__actions .button, .offer-presentation__actions .text-link { margin-top: 22px; }
.d3-hero { display: grid; grid-template-columns: var(--d3-hero-columns); gap: var(--d3-hero-gap); max-width: var(--d3-page-max-width); margin: 0 auto; padding: var(--d3-hero-padding); overflow: hidden; }
.d3-copy { padding-top: var(--d3-copy-padding-top); }
.d3-copy .eyebrow { color: var(--d3-brand-accent); font-size: var(--d3-eyebrow-font-size); }
.d3-copy h1 { margin: var(--d3-heading-margin-top) 0 0; color: var(--d3-heading); font-family: var(--presentation-font-display); font-size: var(--d3-heading-font-size); line-height: var(--d3-heading-line-height); letter-spacing: var(--d3-heading-letter-spacing); }
.d3-underline { display: block; width: var(--d3-underline-width); height: var(--d3-underline-height); margin: var(--d3-underline-margin); border-radius: var(--d3-underline-radius); background: var(--d3-action); transform: rotate(var(--d3-underline-rotation)); }
.d3-copy .lead { max-width: var(--d3-lead-max-width); margin: 0; color: var(--d3-copy); font-size: var(--d3-lead-font-size); line-height: var(--d3-lead-line-height); }
.d3-search { display: grid; grid-template-columns: var(--d3-search-columns); align-items: center; margin-top: var(--d3-search-margin-top); padding: var(--d3-search-padding); border: var(--d3-control-border-width) solid var(--d3-control-line); border-radius: var(--d3-search-radius); background: var(--d3-surface); box-shadow: var(--d3-search-shadow); }
.d3-search span { min-width: 0; padding: var(--d3-search-item-padding); color: var(--d3-control-muted); font-size: var(--d3-search-font-size); }
.d3-search span + span { border-left: var(--d3-control-border-width) solid var(--d3-control-line); }
.d3-search b { margin-left: var(--d3-search-label-gap); font-weight: 500; }
.d3-search-button { padding: var(--d3-search-button-padding); border-radius: var(--d3-action-radius); background: var(--d3-action); color: var(--d3-ink); text-align: center; text-decoration: none; font-size: var(--d3-search-font-size); font-weight: 800; }
.d3-filters, .d3-benefits, .d3-categories ul { margin: 0; padding: 0; list-style: none; }
.d3-filters { display: flex; flex-wrap: wrap; gap: var(--d3-filter-gap); margin-top: var(--d3-filter-margin-top); }
.d3-filters li { padding: var(--d3-filter-padding); border: var(--d3-control-border-width) solid var(--d3-filter-line); border-radius: var(--d3-filter-radius); background: var(--d3-filter-surface); font-size: var(--d3-filter-font-size); }
.d3-note { margin: var(--d3-note-margin-top) 0 0; color: var(--d3-note); font-size: var(--d3-note-font-size); }
.d3-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--d3-benefit-gap); margin-top: var(--d3-benefit-margin-top); }
.d3-benefits li { display: flex; align-items: center; gap: var(--d3-benefit-item-gap); font-size: var(--d3-benefit-font-size); line-height: 1.38; }
.d3-benefits b { display: grid; place-items: center; flex: 0 0 var(--d3-benefit-icon-size); height: var(--d3-benefit-icon-size); border-radius: 50%; background: var(--d3-action); color: var(--d3-surface); }
.d3-benefits li:nth-child(2) b { background: var(--d3-brand-accent); }
.d3-benefits li:nth-child(3) b { background: var(--d3-neutral-surface); color: var(--d3-neutral-ink); }
.d3-benefits strong, .d3-categories strong { display: block; font-size: var(--d3-benefit-heading-font-size); }
.d3-media { position: relative; align-self: start; overflow: hidden; border-radius: var(--d3-media-radius); }
.d3-media img { display: block; width: 100%; height: auto; }
.d3-media p { position: absolute; right: var(--d3-media-callout-right); bottom: var(--d3-media-callout-bottom); display: grid; grid-template-columns: auto auto; align-items: end; gap: var(--d3-media-callout-gap); margin: 0; padding: var(--d3-media-callout-padding); border-radius: var(--d3-media-callout-radius); background: var(--d3-brand-accent); color: var(--d3-surface); box-shadow: var(--d3-media-shadow); }
.d3-media p span { font-size: var(--d3-media-caption-font-size); text-align: right; }
.d3-media p strong { font-size: var(--d3-media-value-font-size); line-height: 1; }
.d3-media p small { grid-column: 2; font-size: var(--d3-media-caption-font-size); }
.d3-categories { display: grid; grid-template-columns: var(--d3-category-columns); gap: var(--d3-category-gap); max-width: var(--d3-page-max-width); margin: 0 auto; padding: var(--d3-category-padding); border-top: var(--d3-control-border-width) solid var(--d3-section-line); }
.d3-categories h2, .d3-offers h2 { margin: 0; color: var(--d3-brand-ink); font-family: var(--presentation-font-sans); font-size: var(--d3-section-heading-font-size); font-weight: 850; letter-spacing: -.045em; }
.d3-categories .text-link { margin-top: var(--d3-section-link-margin-top); color: var(--d3-brand-accent); font-size: var(--d3-filter-font-size); }
.d3-categories ul { display: grid; grid-template-columns: var(--d3-category-list-columns); gap: var(--d3-category-list-gap); }
.d3-categories li { display: flex; align-items: center; gap: var(--d3-category-card-gap); min-height: var(--d3-category-card-min-height); padding: var(--d3-category-card-padding); border: var(--d3-control-border-width) solid var(--d3-card-line); border-radius: var(--d3-category-card-radius); background: var(--d3-surface); }
.d3-categories li > b { display: grid; place-items: center; flex: 0 0 var(--d3-category-icon-size); height: var(--d3-category-icon-size); border-radius: var(--d3-category-icon-radius); background: var(--d3-brand-accent); color: var(--d3-surface); font-size: var(--d3-category-icon-font-size); }
.d3-categories li:nth-child(2n) > b { background: var(--d3-action); }
.d3-categories li span { font-size: var(--d3-category-font-size); line-height: 1.3; }
.d3-offers { max-width: var(--d3-page-max-width); margin: 0 auto; padding: var(--d3-offers-padding); }
.d3-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--d3-offer-heading-gap); padding: 0 0 var(--d3-offer-heading-padding-bottom); border-bottom: var(--d3-control-border-width) solid var(--d3-control-line); }
.d3-section-heading p { margin: 0; color: var(--d3-section-muted); font-size: var(--d3-note-font-size); }
.d3-offer-grid { display: grid; grid-template-columns: var(--d3-offer-grid-columns); gap: var(--d3-offer-grid-gap); padding-top: var(--d3-offer-grid-padding-top); }
.d3-offer-grid article { position: relative; min-width: 0; padding: var(--d3-offer-card-padding); border: var(--d3-control-border-width) solid var(--d3-card-line); border-radius: var(--d3-offer-card-radius); background: var(--d3-surface); box-shadow: var(--d3-card-shadow); }
.d3-offer-grid article > span { position: absolute; top: var(--d3-offer-save-inset); right: var(--d3-offer-save-inset); color: var(--d3-icon-muted); font-size: var(--d3-offer-save-font-size); }
.d3-offer-grid h3 { max-width: var(--d3-offer-title-max-width); margin: 0; color: var(--d3-brand-ink); font-family: var(--presentation-font-sans); font-size: var(--d3-offer-title-font-size); font-weight: 850; letter-spacing: -.03em; }
.d3-offer-grid p { margin: var(--d3-offer-copy-margin); color: var(--d3-card-muted); font-size: var(--d3-offer-copy-font-size); }
.d3-offer-grid strong { display: inline-block; padding: var(--d3-offer-pay-padding); border-radius: var(--d3-offer-pay-radius); background: var(--d3-pay-surface); color: var(--d3-pay-ink); font-size: var(--d3-offer-pay-font-size); }
.d3-offer-grid small { margin-left: var(--d3-offer-meta-gap); color: var(--d3-meta); font-size: var(--d3-offer-meta-font-size); }
.direction-three-home footer { display: none; }

/* Custom properties cannot safely drive media-query conditions in all
   target browsers. This breakpoint is the only intentional dimensional
   literal in the direction-three selector layer. */
@media (max-width: 1120px) {
  .d3-hero { grid-template-columns: 1fr; padding-left: var(--d3-desktop-compact-padding-inline); padding-right: var(--d3-desktop-compact-padding-inline); }
  .d3-media { max-width: var(--d3-desktop-media-max-width); }
  .d3-categories { grid-template-columns: 1fr; padding-left: var(--d3-desktop-compact-padding-inline); padding-right: var(--d3-desktop-compact-padding-inline); }
  .d3-categories ul { grid-template-columns: repeat(3, 1fr); }
  .d3-offers { padding-left: var(--d3-desktop-compact-padding-inline); padding-right: var(--d3-desktop-compact-padding-inline); }
  .d3-offer-grid { grid-template-columns: repeat(3, 1fr); }
}