/* ---------------------------------------------------------------------------
   The wireframe stylesheet.

   This file is the page, and only the page. Nothing about the Graphite UI —
   the brief form, the console, the toolbars — is in here, because the export
   inlines this file verbatim and ships it with the rendered blocks. What you
   see in the preview is what lands in the downloaded HTML, by construction
   rather than by diligence.

   Editing chrome (drag handles, selection outlines, the inspector) lives in
   index.html under .wf-edit, and is stripped from the export along with every
   contenteditable attribute.

   The palette is grey on purpose. A wireframe that looks half-designed gets
   discussed as a design; a wireframe that is obviously a wireframe gets
   discussed as a page. The single exception is the primary button, which is
   near-black — because "how many primary actions does this page have" is a
   question the wireframe exists to answer at a glance.
   --------------------------------------------------------------------------- */

.wf {
  --ink: #2B2B2B;
  --body: #8C8C8C;
  --faint: #B4B4B4;
  --fill: #E6E6E6;
  --tint: #F4F4F4;
  --rule: #DEDEDE;
  --btn: #2B2B2B;
  --gut: clamp(20px, 5vw, 64px);
  --gap: clamp(14px, 1.6vw, 22px);
  --pad: clamp(40px, 5.5vw, 84px);

  background: #fff;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.wf *, .wf *::before, .wf *::after { box-sizing: border-box; }
.wf p, .wf h1, .wf h2, .wf h3, .wf ul, .wf li { margin: 0; padding: 0; }
.wf ul { list-style: none; }

/* Every section sits in the same measure. One rule, so the page has a spine
   and a stakeholder never asks why that block is wider than this one. */
.wf-in { max-width: 1120px; margin: 0 auto; padding-inline: var(--gut); }
.wf-sec { padding-block: var(--pad); }
.wf-sec + .wf-sec { border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------------ chrome */

.wf-head {
  border-bottom: 1px solid var(--rule);
  padding-block: 22px;
}
.wf-head .wf-in { display: flex; align-items: center; gap: 10px; }
.wf-mark {
  width: 20px; height: 20px; background: var(--faint); flex: none;
}
/* The brand wordmark, set in grey. A landing page carries the mark and
   nothing else — no navigation, because every link that is not the action is
   an exit. That absence is the design, so it is drawn deliberately. */
.wf-word {
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--faint);
}
.wf-foot {
  border-top: 1px solid var(--rule);
  padding-block: 34px;
  color: var(--faint); font-size: 12px;
}
.wf-foot .wf-in { display: flex; flex-direction: column; gap: 22px; }
.wf-foot-zones { display: flex; flex-wrap: wrap; gap: 22px clamp(28px, 5vw, 64px); }
.wf-foot-zone { display: flex; flex-direction: column; gap: 10px; }
.wf-foot-links { display: flex; flex-wrap: wrap; gap: 14px; }
.wf-foot-links span { display: block; width: 62px; height: 8px; background: var(--fill); }
.wf-foot-logos { display: flex; gap: 8px; }
.wf-foot-logos i { display: block; width: 38px; height: 24px; background: var(--fill); }
.wf-foot-note { color: var(--faint); font-size: 12px; }

/* ------------------------------------------------------------------- type */

.wf-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
.wf-h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; }
.wf-h  { font-size: clamp(23px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.018em; line-height: 1.12; }
.wf-t  { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.wf-b  { font-size: 15px; color: var(--body); line-height: 1.55; }
.wf-l  { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wf-stat { font-size: clamp(38px, 5vw, 62px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.wf-h + .wf-b, .wf-h1 + .wf-b, .wf-t + .wf-b { margin-top: 12px; }
.wf-l + .wf-stat, .wf-stat + .wf-l { margin-top: 8px; }
.wf-sech { margin-bottom: clamp(26px, 3vw, 44px); max-width: 26ch; }

/* ---------------------------------------------------------------- buttons */

.wf-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 26px; }
.wf-act { display: flex; flex-direction: column; gap: 5px; }
.wf-btn {
  display: inline-block; padding: 14px 26px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--btn); white-space: nowrap;
}
.wf-btn-1 { background: var(--btn); color: #fff; }
.wf-btn-2 { background: transparent; color: var(--btn); }
/* Where the button goes, printed under it. In a briefing document this is
   half the value of the button: a wireframe that shows two buttons and not
   where they lead has not raised the question it was drawn to raise. */
.wf-target {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; color: var(--faint); letter-spacing: .02em;
}
.wf-target::before { content: "→ "; }

/* ------------------------------------------------------------------ media */

/* A box with a cross, at a stated ratio, captioned with what belongs in it.
   The caption is the brief to the photographer and is not decorative. */
.wf-media {
  position: relative; width: 100%; background: var(--fill);
  aspect-ratio: var(--r, 4 / 3);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.wf-media::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #C9C9C9 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #C9C9C9 50%, transparent calc(50% + 1px));
}
.wf-cap {
  position: relative; margin: 14px; padding: 7px 10px;
  background: rgba(255,255,255,.86); color: var(--body);
  font-size: 11.5px; line-height: 1.4; max-width: 32ch;
}
/* A play triangle, centred by inset:0 + margin:auto on a zero-sized box. */
.wf-media-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 22px solid rgba(255, 255, 255, .9);
  border-block: 14px solid transparent;
}

/* ------------------------------------------------------------------- hero */

.wf-hero .wf-in { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
.wf-hero[data-v="imageRight"] .wf-in,
.wf-hero[data-v="imageLeft"] .wf-in { grid-template-columns: 1fr 1fr; }
.wf-hero[data-v="imageLeft"] .wf-hero-copy { order: 2; }
.wf-hero[data-v="imageBelow"] .wf-hero-copy { max-width: 30ch; }
.wf-hero[data-v="imageBackground"] { position: relative; padding-block: clamp(70px, 9vw, 150px); }
.wf-hero[data-v="imageBackground"] .wf-media {
  position: absolute; inset: 0; aspect-ratio: auto; height: 100%; opacity: .6;
}
.wf-hero[data-v="imageBackground"] .wf-in { position: relative; grid-template-columns: minmax(0, 34rem); }
.wf-hero .wf-b { font-size: 17px; max-width: 46ch; }

/* ------------------------------------------------------------- statement */

.wf-statement .wf-in { max-width: 820px; }
.wf-statement[data-v="center"] .wf-in { text-align: center; }
.wf-statement[data-v="center"] .wf-sech,
.wf-statement[data-v="center"] .wf-b { margin-inline: auto; max-width: 30ch; }
.wf-statement .wf-h { font-size: clamp(26px, 3.4vw, 40px); }

/* ------------------------------------------------------------- mediaText */

.wf-mediaText .wf-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.wf-mediaText[data-v="imageLeft"] .wf-mt-copy { order: 2; }
.wf-bul { margin-top: 20px; display: grid; gap: 11px; }
.wf-bul li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.wf-bul li::before { content: ""; width: 9px; height: 9px; background: var(--faint); margin-top: 6px; flex: none; }

/* ------------------------------------------------------------ tile grids */

.wf-grid { display: grid; gap: var(--gap); }
.wf-grid[data-c="2"] { grid-template-columns: repeat(2, 1fr); }
.wf-grid[data-c="3"] { grid-template-columns: repeat(3, 1fr); }
.wf-grid[data-c="4"] { grid-template-columns: repeat(4, 1fr); }

.wf-tile { background: var(--tint); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.wf-tile .wf-media { margin: -22px -22px 4px; width: auto; }
/* The bento's first tile gets the space, which is the whole point of a bento:
   one feature leads and the rest support it. */
.wf-bento[data-v="featureLeft"] .wf-grid { grid-template-columns: repeat(3, 1fr); }
.wf-bento[data-v="featureLeft"] .wf-tile:first-child { grid-row: span 2; grid-column: span 2; }
.wf-bento[data-v="featureLeft"] .wf-tile:first-child .wf-t { font-size: 24px; }

/* Parked: `IconTextBlock` (AEM NOT READY) is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back wrong. */
.wf-icon { display: flex; flex-direction: column; gap: 12px; }
.wf-icon-mark { width: 34px; height: 34px; background: var(--fill); }

/* ------------------------------------------------------------------ steps */

/* Parked: UserReview-era `steps` is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back looking wrong. */
.wf-step { display: flex; flex-direction: column; gap: 10px; }
.wf-step-n {
  width: 34px; height: 34px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.wf-steps[data-v="vertical"] .wf-grid { grid-template-columns: minmax(0, 640px); }
.wf-steps[data-v="vertical"] .wf-step { flex-direction: row; gap: 18px; align-items: flex-start; }
.wf-steps[data-v="vertical"] .wf-step-n { flex: none; }

/* ------------------------------------------------------------------ stats */

/* Parked: `stats` is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back looking wrong. */
.wf-figure { border-top: 2px solid var(--ink); padding-top: 16px; }

/* ------------------------------------------------------------- comparison */

/* Parked: `Table` (not a DS360 landing-page component) is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back wrong. */
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table th, .wf-table td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.wf-table th { font-weight: 700; }
.wf-table thead th { border-bottom: 2px solid var(--ink); font-size: 15px; }
.wf-table thead th:first-child { width: 40%; }
.wf-table td:last-child { background: var(--tint); font-weight: 600; color: var(--ink); }
.wf-table tbody th { font-weight: 500; color: var(--body); }

/* ---------------------------------------------------------------- reviews */

/* Parked: `UserReview` is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back looking wrong. */
.wf-review { background: var(--tint); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.wf-stars { color: var(--ink); font-size: 14px; letter-spacing: .16em; }
.wf-review .wf-b { color: var(--ink); font-size: 15.5px; }
.wf-reviews[data-v="single"] .wf-grid { grid-template-columns: minmax(0, 720px); justify-content: center; }
.wf-reviews[data-v="single"] .wf-review { text-align: center; align-items: center; }

/* ---------------------------------------------------------------- gallery */

.wf-shot { display: flex; flex-direction: column; gap: 10px; }

/* ----------------------------------------------------------- productOffer */

.wf-productOffer .wf-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.wf-productOffer[data-v="imageRight"] .wf-offer-copy { order: 1; }
.wf-price { font-size: 22px; font-weight: 700; margin-top: 12px; }

/* --------------------------------------------------------------- leadForm */

.wf-leadForm { background: var(--tint); }
.wf-leadForm .wf-in { max-width: 720px; }
.wf-inputs { display: grid; gap: 12px; margin-top: 26px; }
.wf-input { background: #fff; border: 1px solid var(--rule); padding: 13px 14px; }
.wf-input span { font-size: 12px; color: var(--faint); }
.wf-consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; }
.wf-consent::before { content: ""; width: 16px; height: 16px; border: 1px solid var(--faint); flex: none; margin-top: 2px; background: #fff; }
.wf-consent .wf-b { font-size: 12.5px; }

/* ---------------------------------------------------------------- ctaBand */

/* Parked: `Banner` (not a DS360 landing-page component) is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back wrong. */
.wf-ctaBand[data-v="solid"] { background: var(--ink); }
.wf-ctaBand[data-v="solid"] .wf-h, .wf-ctaBand[data-v="solid"] .wf-b { color: #fff; }
.wf-ctaBand[data-v="solid"] .wf-b { opacity: .72; }
.wf-ctaBand[data-v="solid"] .wf-btn-1 { background: #fff; color: var(--ink); border-color: #fff; }
.wf-ctaBand[data-v="solid"] .wf-target { color: rgba(255,255,255,.5); }
.wf-ctaBand .wf-in { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.wf-ctaBand .wf-acts { margin-top: 0; }
.wf-ctaBand .wf-h { max-width: 20ch; }

/* -------------------------------------------------------------------- faq */

.wf-q { border-bottom: 1px solid var(--rule); padding-block: 20px; }
.wf-q:first-child { border-top: 1px solid var(--rule); }
.wf-q-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.wf-q-head::after { content: ""; flex: none; width: 13px; height: 13px; margin-top: 4px;
  background: linear-gradient(var(--faint) 0 0) center/100% 1px no-repeat,
              linear-gradient(var(--faint) 0 0) center/1px 100% no-repeat; }
.wf-q .wf-b { margin-top: 12px; max-width: 62ch; }

/* ----------------------------------------------------------------- logos */

/* Parked: `logoBar` is not ticked in components.md, so nothing draws this.
   Kept because a tick brings the block back, and re-deriving a layout's
   styling from scratch is how a re-granted block comes back looking wrong. */
.wf-logoBar { padding-block: clamp(26px, 3vw, 40px); }
.wf-logoBar .wf-in { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; }
.wf-logo {
  height: 34px; padding-inline: 16px; background: var(--fill); color: var(--faint);
  display: flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}

/* ----------------------------------------------------------------- legal */

.wf-legal { padding-block: clamp(24px, 3vw, 38px); }
.wf-legal .wf-b { font-size: 11.5px; line-height: 1.6; color: var(--faint); max-width: 90ch; }

/* ------------------------------------------------------------ owed facts */

/* A fact the page needs and nobody has supplied: [VERIFY: …] or [LEGAL: …].
   Marked on the canvas and in the export alike — a stakeholder should see at a
   glance what still has to arrive before the page can ship. Two tints, so a
   legal gap and a product gap are not mistaken for one another. Colours are
   set outright so a marker stays readable on the dark call-to-action band. */
.wf-owed {
  background: #FFF1B8; color: #6B5300; padding: 0 3px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82em; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.wf-owed-legal { background: #E8E4FF; color: #3A2FB8; }

/* Parked: `NewsletterSubscription` is not ticked in components.md, so nothing
   draws this. Kept because a tick brings the block back, and re-deriving a
   layout's styling from scratch is how a re-granted block comes back wrong. */
/* ----------------------------------------------------------------- signup */

.wf-signup .wf-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.wf-signup .wf-h { font-size: clamp(20px, 2.2vw, 26px); }
.wf-signup-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.wf-signup-form .wf-input { flex: 1 1 200px; }
.wf-signup-form .wf-acts { margin-top: 0; }
.wf-signup .wf-consent { grid-column: 1 / -1; margin-top: 0; }

/* ------------------------------------------------------------ narrow view */

@media (max-width: 860px) {
  .wf-hero .wf-in, .wf-mediaText .wf-in, .wf-productOffer .wf-in, .wf-signup .wf-in { grid-template-columns: 1fr !important; }
  .wf-hero[data-v="imageLeft"] .wf-hero-copy,
  .wf-mediaText[data-v="imageLeft"] .wf-mt-copy,
  .wf-productOffer[data-v="imageRight"] .wf-offer-copy { order: 0; }
  .wf-grid[data-c="3"], .wf-grid[data-c="4"] { grid-template-columns: repeat(2, 1fr); }
  .wf-bento[data-v="featureLeft"] .wf-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-bento[data-v="featureLeft"] .wf-tile:first-child { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 560px) {
  .wf-grid[data-c="2"], .wf-grid[data-c="3"], .wf-grid[data-c="4"] { grid-template-columns: 1fr; }
  .wf-bento[data-v="featureLeft"] .wf-tile:first-child { grid-column: auto; }
  .wf-table thead th:first-child { width: auto; }
}

/* --------------------------------------------- drawn to the published forms

   Each rule below answers to a storybook description rather than to taste.
   A block that carries a component's name and not its shape invents elements
   the component has no slot for, which is the failure the allowlist exists to
   prevent — in a quieter voice.
   -------------------------------------------------------------------------- */

/* BentoBoxTiles — "each tile can be styled differently, such as being larger
   than others". The lead tile spans two columns; the rest fill around it. */
.wf-tile-lead { grid-column: span 2; }
.wf-tile-icon { width: 30px; height: 30px; background: var(--fill); margin-bottom: 12px; }
.wf-bento[data-v="dark"] .wf-in { background: var(--ink); }
.wf-bento[data-v="dark"] .wf-t, .wf-bento[data-v="dark"] .wf-b { color: #fff; }

/* GalleryCarousel — "a desktop mosaic … and a single horizontal swipe track on
   mobile". One big image beside the others, its side set by bigImagePosLeft. */
.wf-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; align-items: start; }
.wf-mosaic[data-big="right"] { grid-template-columns: 1fr 1fr 2fr; }
.wf-mosaic[data-big="right"] .wf-shot-big { order: 9; }
.wf-shot-big { grid-row: span 2; }
.wf-swipe {
  margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}

/* List — bullet, numbered or check, from the component's listType. */
.wf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 70ch; }
.wf-list li { display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: var(--body); }
.wf-list li::before {
  content: "•"; flex: none; width: 22px; color: var(--ink); font-weight: 700;
}
.wf-list[data-t="numbered"] { counter-reset: wf-n; }
.wf-list[data-t="numbered"] li { counter-increment: wf-n; }
.wf-list[data-t="numbered"] li::before { content: counter(wf-n) "."; }
.wf-list[data-t="check"] li::before { content: "✓"; }

/* TextBlock — "a headline and body text in a two-column layout". */
.wf-legal .wf-in { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 56px); }
.wf-tb-head .wf-h { font-size: clamp(18px, 2vw, 24px); }
.wf-tb-body .wf-b { font-size: 13px; }

@media (max-width: 760px) {
  .wf-mosaic, .wf-mosaic[data-big="right"] { grid-template-columns: 1fr; }
  .wf-shot-big { grid-row: auto; }
  .wf-mosaic[data-big="right"] .wf-shot-big { order: 0; }
  .wf-tile-lead { grid-column: auto; }
  .wf-legal .wf-in { grid-template-columns: 1fr; }
}