/* ==========================================================================
   SHANTHA HI TECH — MARKETING & BUSINESS TOOLS
   marketing.css

   Register taken from the reference email-marketing page, and deliberately
   distinct from the site's other pages:

     · cool off-whites with soft gradient washes, not flat black/white
     · a single accent colour, used only on CTAs and live indicators
     · ROUNDED buttons (10px) — the other pages use 4px squares
     · product/UI mockups in device chrome instead of lifestyle photography
     · subtle card shadows, generous whitespace, clarity over decoration

   Eight anchored frames, one screen each, no two alike:

     1 #marketing-tools   centred hero + paired desktop/phone mockups
     2 #email-campaigns   copy left, email-builder mockup right
     3 #seo-tools         audit checklist + score dial
     4 #ai-visibility     dark atmospheric frame, glass panel
     5 #other-services    six-up service card grid
     6 #domain-search     centred search bar + availability results
     7 #domain-transfer   three-step horizontal timeline
     8 #business-email    inbox mockup + feature list

   Contents
     01. Tokens        02. Base            03. Frame scaffolding
     04. Type          05. Buttons/links   06. Device mockups & cards
     07-14. Frames 1-8 15. Footer          16. Responsive   17. Motion
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Neutral paper stack — pure white through to soft grey */
  --paper: #ffffff;
  --paper-2: #f6f6f6;
  --paper-3: #ececec;
  --wash-a: #f2f2f2;
  --wash-b: #f7f7f7;

  /* Ink */
  --ink: #111111;
  --body: #4a4a4a;
  --muted: #7a7a7a;
  --line: #e6e6e6;
  --line-strong: #d4d4d4;

  /* "Accent" is black — the page runs on contrast, not colour */
  --accent: #111111;
  --accent-hover: #000000;
  --accent-soft: #f0f0f0;
  --on-accent: #ffffff;

  /* Dark frame */
  --deep: #000000;
  --on-deep: #ffffff;
  --on-deep-muted: rgba(255, 255, 255, 0.64);
  --line-deep: rgba(255, 255, 255, 0.14);

  --font: "Clarkson", "Helvetica", Helvetica, Arial, sans-serif;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: clamp(17px, 0.35vw + 16px, 19px);
  --t-xl: clamp(20px, 0.9vw + 17px, 26px);
  --t-2xl: clamp(25px, 2vw + 17px, 38px);
  --t-3xl: clamp(30px, 3.4vw + 16px, 58px);
  --t-hero: clamp(38px, 5.2vw + 16px, 72px);
  --t-stat: clamp(32px, 3vw + 18px, 54px);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px;

  --gutter: 24px;
  --container: 1200px;

  /* Rounded — the signature that separates this page from the others */
  --r-btn: 10px;
  --r-card: 14px;
  --r-device: 14px;

  --shadow-card: 0 6px 22px rgba(0, 0, 0, 0.07);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12);

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 200ms;
  --mid: 380ms;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 56px; } }

/* ==========================================================================
   02. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; top: -80px; left: var(--s2); z-index: 300;
  padding: var(--s2) var(--s3);
  background: var(--ink); color: #fff;
  border-radius: var(--r-btn); font-size: var(--t-sm);
}
.skip-link:focus { top: var(--s2); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   03. FRAME SCAFFOLDING
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.frame {
  /* svh (mobile-toolbar-visible height) after vh: browsers that don't know
     svh discard that line and keep the vh above; browsers that do know it
     use the shorter, more accurate figure instead of the toolbar-hidden
     100vh, which otherwise overshoots the actually-visible area on mobile. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--s6);
  position: relative;
  overflow: hidden;
}

/* The masthead floats over this frame (body.header-overlay), so the frame
   takes the full viewport and pads its own content clear of the bar.
   height (not min-height) pins it to exactly one screen, and the mockup
   area below flexes into whatever space is left — so nothing spills past
   the fold into the next frame. */
.frame--first {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-top: calc(var(--header-h, 193px) + var(--s2));
  padding-bottom: var(--s5);
}

.frame--first > .container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Grounds — soft washes rather than flat fills */
.g-paper { background-color: var(--paper); }
.g-cool  { background-color: var(--paper-2); }
.g-tint  { background-color: var(--paper-3); }

.g-wash-a {
  background-image: linear-gradient(180deg, var(--wash-a) 0%, var(--paper) 62%);
}
.g-wash-b {
  background-image: linear-gradient(180deg, var(--wash-b) 0%, var(--paper) 58%);
}

/* The two radial gradients that used to sit here were this frame's only
   atmosphere. #ai-visibility (the sole user of .g-deep) now gets that from
   the WebGL contour-line canvas in .frame__media instead, so the flat
   gradient fill is gone rather than fighting the animation underneath it. */
.g-deep {
  background-color: var(--deep);
  color: var(--on-deep);
}
.g-deep h1, .g-deep h2, .g-deep h3 { color: var(--on-deep); }
.g-deep .sub, .g-deep .mini { color: var(--on-deep-muted); }
.g-deep .eyebrow { color: var(--on-deep-muted); }

/* ==========================================================================
   04. TYPE
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s2);
}

.f-title { font-size: var(--t-3xl); letter-spacing: -0.042em; max-width: 17ch; }
.f-title--hero { font-size: var(--t-hero); letter-spacing: -0.048em; max-width: 15ch; }

.sub {
  margin-top: var(--s3);
  font-size: var(--t-lg);
  color: var(--body);
  max-width: 48ch;
}

.mini { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   05. BUTTONS & LINKS — rounded, accent-filled
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  padding: 17px 30px;
  border-radius: var(--r-btn);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: background-color var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.btn--accent {
  background-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(17, 17, 17, 0.24);
}
.btn--accent:hover { background-color: var(--accent-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

.g-deep .btn--ghost { border-color: var(--line-deep); color: var(--on-deep); }
.g-deep .btn--ghost:hover { border-color: var(--on-deep); }

.arw { transition: transform var(--mid) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

/* ==========================================================================
   06. DEVICE MOCKUPS, CARDS, PLACEHOLDERS
   ========================================================================== */

.ph {
  display: grid;
  place-items: center;
  padding: var(--s3);
  background-color: var(--paper-3);
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.03) 0 10px, transparent 10px 20px);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

.g-deep .ph {
  background-color: rgba(255,255,255,0.07);
  background-image: repeating-linear-gradient(
    45deg, rgba(255,255,255,0.05) 0 10px, transparent 10px 20px);
  color: rgba(255,255,255,0.55);
}

.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--3x4  { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Full-bleed media ground, shared by a light frame (image + white veil) and
   a dark frame (WebGL canvas + black scrim). Same wrapper shape either way:
   .frame__media sits behind the content at inset:0, the content column
   rides above it at z-index:2.
   -------------------------------------------------------------------------- */

.frame--media,
.frame--gl { position: relative; }

.frame--media > .container,
.frame--gl > .container { position: relative; z-index: 2; }

.frame__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.frame__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.frame__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 82% white — enough that the shadow bands read as architecture rather than
   photography, and #7a7a7a note text still passes over them. */
.frame__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
}

.frame__scrim {
  position: absolute;
  inset: 0;
}

/* Vignette over the animated contour-line canvas — darkest through the
   middle where .f4__panel sits, lighter toward the top where the lines are
   most active, so the panel and headline stay legible over the motion. */
.frame__scrim--ai {
  background:
    radial-gradient(70% 60% at 50% 62%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 30%);
}

/* Browser chrome — carries the UI-screenshot look */
.device {
  border-radius: var(--r-device);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

.device__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.device__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong);
}

.device__url {
  margin-left: var(--s2);
  flex: 1;
  height: 20px;
  border-radius: 6px;
  background: var(--paper-3);
}

.device .ph { border-radius: 0; }

/* UI screenshots inside device chrome. The screen cell flexes with the
   viewport, so anchor to the top — a dashboard reads from its header down,
   and the header must survive even when the cell is a sliver. */
.device__shot,
.phone .device__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.f1__phone .device__shot {
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 768 / 1376;
  max-height: 100%;
  min-height: 0;
}

/* The desktop shot keeps its own 16:9 so nothing is cropped and no filler
   band appears — the device simply sizes to the artwork. When the frame is
   short, max-height clamps it and the top-anchored crop takes over. */
.f1__desktop .device__shot {
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 1376 / 768;
  max-height: 100%;
  min-height: 0;
}

/* Match the bezel's inner curve — the placeholder got this from `.phone .ph`,
   which the <img> doesn't carry. */
.phone .device__shot { border-radius: 18px; }

/* Phone chrome */
.phone {
  width: 190px;
  border-radius: 26px;
  padding: 9px;
  background: var(--ink);
  box-shadow: var(--shadow-lift);
}

.phone .ph { border-radius: 18px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--mid) var(--ease-out),
    box-shadow var(--mid) var(--ease-out);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-card);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ==========================================================================
   07. FRAME 1 — MARKETING TOOLS
   ========================================================================== */

.f1 { text-align: center; }
.f1 .f-title--hero, .f1 .sub { margin-inline: auto; }

.f1__actions {
  margin-top: var(--s5);
  display: flex; gap: var(--s2);
  justify-content: center; flex-wrap: wrap;
}

/* Left-aligned hero over the atelier photo.
   The photo is only clean in its upper-left quadrant — the oak panel — while
   the tool ledge and hanging chisels run through the middle of the frame.
   Centred copy sat straight on those dark walnut handles (measured 2.9:1).
   Left-aligning walks the copy onto the flat oak, and object-position keeps
   that panel in shot at every width, since `cover` otherwise crops it away
   on narrow viewports. Widths are held tight so no line reaches the tools.
   Only applied where there is room; below this the layout re-centres and the
   image is positioned to put plain plaster behind the copy instead. */
@media (min-width: 992px) {
  .f1 { text-align: left; }
  .f1 .f-title--hero, .f1 .sub { margin-inline: 0; }
  .f1 .f-title--hero { max-width: 11ch; }
  .f1 .sub { max-width: 30ch; }
  .f1__actions { justify-content: flex-start; }
}

/* --body grey is tuned for flat paper; on honey oak it only reaches ~4.6:1.
   The hero sub takes full ink here instead, which lifts it to ~10:1 without
   touching the photo. */
#marketing-tools .sub { color: var(--ink); }

/* The photo's far-left edge is deep shadow, and the black masthead logo was
   landing on it (38% of the mark below 4.5:1). Shifting the crop right walks
   the logo onto lit oak. It is a genuine trade — pushing further right also
   drags the tool ledge toward the headline — so 80% is the measured optimum
   across logo, nav, headline, sub and buttons rather than a round number. */
#marketing-tools .frame__image { object-position: 80% center; }

.f1__devices {
  /* takes all remaining height in the frame, never forces the frame taller */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--s4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s3);
}

.f1__desktop {
  flex: 0 1 640px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Screens fill the space they are given rather than dictating a ratio */
.f1__desktop .ph,
.f1__phone .ph {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.f1__phone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Below this the remaining space is too small for a legible mockup. Hiding
   the mockup alone isn't enough, though — measured, the copy column (eyebrow
   + hero title + sub + actions) alone needs ~693px, so a fixed 100vh hero
   under ~700px tall clips the CTAs entirely under `overflow: hidden`
   (.frame, above). Releasing the fixed height here lets the section grow
   and the page scroll instead, on any short viewport — a landscape phone,
   a small laptop window — while normal-height viewports keep the pinned
   single-screen hero untouched. */
@media (max-height: 700px) {
  .f1__devices { display: none; }
  .frame--first { height: auto; min-height: 100vh; }
}

/* ==========================================================================
   08. FRAME 2 — EMAIL CAMPAIGNS
   ========================================================================== */

.f2__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s7);
  align-items: center;
}

.f2__points { margin-top: var(--s4); display: grid; gap: var(--s3); }

.f2__point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s2);
  align-items: start;
}

.f2__num {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.f2__point h3 { font-size: var(--t-base); font-weight: 500; letter-spacing: -0.015em; }
.f2__point p { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   09. FRAME 3 — SEO TOOLS
   ========================================================================== */

.f3__head { text-align: center; margin-bottom: var(--s6); }
.f3__head .f-title, .f3__head .sub { margin-inline: auto; }

.f3__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s5);
  align-items: center;
}

.f3__audit { padding: var(--s4); }

.f3__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
}
.f3__row:last-child { border-bottom: 0; }

.f3__tick {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
}

.f3__row span:nth-child(2) { color: var(--ink); flex: 1; }

/* Score dial drawn with conic-gradient — no image needed */
.f3__dial {
  width: min(240px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) 0turn 0.87turn, var(--paper-3) 0.87turn 1turn);
}

.f3__dial-inner {
  width: 74%; height: 74%;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 0 0 1px var(--line);
}

.f3__score { font-size: var(--t-stat); color: var(--ink); letter-spacing: -0.04em; line-height: 1; }

/* ==========================================================================
   10. FRAME 4 — AI VISIBILITY (dark)
   ========================================================================== */

.f4__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.f4__inner .f-title, .f4__inner .sub { margin-inline: auto; }

.f4__panel {
  margin-top: var(--s6);
  width: min(900px, 100%);
  padding: var(--s5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  text-align: left;
}

.f4__metric b {
  display: block;
  font-size: var(--t-stat);
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--on-deep);
  line-height: 1;
}

.f4__metric span { font-size: var(--t-sm); color: var(--on-deep-muted); }

.f4__pulse {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-deep-muted);
  margin-bottom: var(--s4);
}

.f4__pulse i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.20);
}

/* ==========================================================================
   11. FRAME 5 — FREE TOOLS
   ========================================================================== */

.f5__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s6);
}

.f5__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

.f5__card { padding: var(--s4); display: grid; gap: var(--s1); align-content: start; }

/* Photo card variant — the image is the whole card, not a strip on top of
   it. Add f5__card--media alongside f5__card to opt a card into this once
   it has artwork; cards without it keep the plain flat-white look above
   untouched. */
.f5__card--media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  color: var(--on-deep);
  /* Base .f5__card packs content to the top (align-content: start) — here
     the text needs to rest on the darkest part of the scrim at the bottom
     of the card instead. */
  align-content: end;
}

.f5__card--media .f5__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* True opaque black behind the caption, not translucent. Even 94% opacity
   black still let a high-contrast photo (dense serif text on white paper)
   ghost through — the residual is small in absolute terms but sRGB's gamma
   makes low-end contrast read as more visible than the raw percentage
   suggests, so any degree of translucency here is a gamble against
   whatever a given photo happens to show. Solid #000 removes the gamble;
   kept tight to just behind the caption block so most of the photo above
   it stays visible instead of being buried under black. */
.f5__card--media .f5__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    #000 0%, #000 22%, transparent 48%);
}

.f5__card--media .f5__tag,
.f5__card--media h3,
.f5__card--media p {
  position: relative;
  z-index: 2;
}

.f5__card--media .f5__tag {
  background: rgba(255,255,255,0.14);
  color: var(--on-deep);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.f5__card--media h3 { color: var(--on-deep); }
.f5__card--media p { color: var(--on-deep-muted); }

.f5__card h3 { font-size: var(--t-base); font-weight: 500; letter-spacing: -0.015em; }
.f5__card p { font-size: var(--t-sm); color: var(--muted); }

.f5__tag {
  justify-self: start;
  margin-bottom: var(--s2);
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   12. FRAME 6 — DOMAIN SEARCH
   ========================================================================== */

.f6 { text-align: right; }

/* The photo runs at full strength here — no veil over it — so the heading
   text sits directly on the dark green panelling and has to invert. The
   search bar and result rows below already carry their own solid --paper
   background, so they stay as they are. */
.f6 .eyebrow { color: #ffffff; }
.f6 .f-title { color: #ffffff; }
.f6 .sub { color: rgba(255, 255, 255, 0.82); }

.f6__search {
  margin: var(--s6) 0 0 auto;
  width: min(680px, 100%);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px 10px 10px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.f6__search span { flex: 1; color: var(--muted); font-size: var(--t-lg); }

.f6__results {
  margin: var(--s4) 0 0 auto;
  width: min(680px, 100%);
  display: grid;
  gap: var(--s1);
  text-align: left;
}

.f6__result {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-size: var(--t-base);
}

.f6__name { color: var(--ink); font-weight: 500; }
.f6__avail { font-size: var(--t-sm); color: var(--accent); }
.f6__taken { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   13. FRAME 7 — DOMAIN TRANSFER
   ========================================================================== */

.f7__head { margin-bottom: var(--s7); max-width: 46ch; }

.f7__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  position: relative;
}

/* Connecting rule behind the step markers */
.f7__steps::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: var(--line-strong);
}

.f7__step { position: relative; }

.f7__marker {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--s3);
  position: relative;
  box-shadow: 0 0 0 6px var(--paper-2);
}

.f7__step h3 { font-size: var(--t-xl); margin-bottom: var(--s1); }
.f7__step p { font-size: var(--t-sm); color: var(--muted); max-width: 30ch; }

/* ==========================================================================
   14. FRAME 8 — BUSINESS EMAIL
   ========================================================================== */

.f8__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s7);
  align-items: center;
}

.f8__inbox { overflow: hidden; }

.f8__mail {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
}
.f8__mail:last-child { border-bottom: 0; }

.f8__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper-3);
}

.f8__mail b { display: block; font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
.f8__mail p { font-size: var(--t-sm); color: var(--muted); }
.f8__time { font-size: var(--t-xs); color: var(--muted); }

.f8__unread { background: var(--accent); width: 7px; height: 7px; border-radius: 50%; }

.f8__list { margin-top: var(--s4); display: grid; gap: var(--s2); }

.f8__item {
  display: flex; gap: var(--s2); align-items: baseline;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
}
.f8__item b { color: var(--ink); font-weight: 500; min-width: 8em; flex-shrink: 0; }

/* The photo behind this frame runs unveiled, so the right-hand copy column
   sits directly on the near-black panelling and inverts. The inbox card on
   the left keeps its own solid --paper background and is untouched. */
#business-email .eyebrow { color: #ffffff; }
#business-email .f-title { color: #ffffff; }
#business-email .sub { color: rgba(255,255,255,0.82); }
#business-email .f8__item { color: rgba(255,255,255,0.72); border-top-color: rgba(255,255,255,0.18); }
#business-email .f8__item b { color: #ffffff; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.foot { background: var(--ink); color: #fff; padding-block: var(--s4) var(--s3); }

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s3);
  padding-bottom: 36px;
}

.foot__logo { height: 46px; width: auto; }
.foot__tag { font-size: var(--t-sm); color: rgba(255,255,255,0.6); margin-top: var(--s2); }

/* Footer column labels. These are <p>, not headings — they label a list of
   links, they don't open a section, and marking them up as <h2> diluted the
   page's heading outline for crawlers. font-weight/line-height are stated
   explicitly here (rather than inherited from the h1-h4 rule as before) so
   the styling is self-contained and the element type can't change the look. */
.foot__t {
  font-size: var(--t-xs); font-weight: 500; line-height: 1.08;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 36px;
}

.foot__list { display: grid; gap: 0; }
.foot__list a { font-size: var(--t-sm); opacity: 0.78; transition: opacity var(--fast) var(--ease); display: inline-flex; align-items: center; min-height: 32px; }
.foot__list a:hover { opacity: 1; }

.foot__base {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center;
  padding-top: var(--s1);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--t-xs);
  color: rgba(255,255,255,0.6);
}
.foot__base p { margin-right: auto; }
.foot__base a {
  /* WCAG 2.2 SC 2.5.8 wants 24px; min-height (not padding) so font metrics
     can't leave it a pixel short — matches .foot__list a's treatment. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .f2__grid, .f3__grid, .f8__grid { grid-template-columns: 1fr; gap: var(--s5); }
  .f5__grid { grid-template-columns: repeat(2, 1fr); }
  .f4__panel { grid-template-columns: repeat(3, 1fr); gap: var(--s3); padding: var(--s4); }
  .f1__phone { display: none; }
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  /* Content decides height on phones — frames stop being hard screens */
  .frame, .frame--first { min-height: 0; padding-block: var(--s6); }

  .f1__actions .btn { width: 100%; }
  .f1__devices { margin-top: var(--s5); }

  .f3__grid { gap: var(--s4); }
  .f3__audit { padding: var(--s3); }

  .f4__panel { grid-template-columns: 1fr; gap: var(--s4); }

  .f5__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .f5__grid { grid-template-columns: 1fr; }

  .f6__search { flex-direction: column; align-items: stretch; padding: var(--s3); }
  .f6__search .btn { width: 100%; }

  /* Timeline goes vertical; the connecting rule would misalign */
  .f7__steps { grid-template-columns: 1fr; gap: var(--s4); }
  .f7__steps::before { display: none; }

  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .foot__base { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   17. MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SPACING / DISPLAY MODIFIERS
   Replaces style="" attributes that previously carried these one-off rules,
   so the CSP can drop 'unsafe-inline' from style-src.
   ========================================================================== */

.mini--block { display: block; }

.mini--note {
  text-align: center;
  margin-top: var(--s3);
}

.btn--gap { margin-top: var(--s5); }