/* ==========================================================================
   Arcadia Engagement Hub — v2
   Values taken from the Figma frames on page "Client Dashboard"
   (Dashboard Page (v2) = 159:48). Design frame is 1920x1080.
   Loaded ONLY by the rebuilt pages; v1 pages still use styles.css.
   ========================================================================== */

@font-face {
  font-family: "Bethany Elingston";
  src: url("fonts/bethanyelingston.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sharp Grotesk";
  src: url("fonts/sharpgrotesk-book20.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sharp Grotesk";
  src: url("fonts/sharpgrotesk-medium20.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --canvas: #efefef;
  --sidebar: #0b0c0c;
  --sidebar-active: rgba(217, 217, 217, .12);
  --card: #fff;
  --ink: #0a0a0c;
  --ink-mid: rgba(11, 12, 12, .58);
  --label: #848590;
  --unit: #bac3cd;
  --green: #2a6545;
  --red: #a33b3b;
  --axis: rgba(10, 10, 12, .54);
  --hairline: rgba(0, 0, 0, .07);
  --shadow: 8px 8px 21.8px rgba(0, 0, 0, .07);

  --r-card: 5px;
  --r-pill: 11px;
  --r-nav: 6px;
  --sidebar-w: 343px;
  --rail-w: minmax(300px, 27.8%);
  --gap: 19px;

  --chart-fill: #d6d6d6;
  --chart-line: #8f8f8f;

  --sans: "Sharp Grotesk", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --display: "Bethany Elingston", Georgia, serif;
}

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

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.46;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---------- Shell ------------------------------------------------------- */

.v2-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.v2-sidebar {
  background: var(--sidebar);
  color: #fff;
  border-radius: var(--r-nav);
  margin: 8px 0 9px 7px;
  padding: 38px 19px 30px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 8px;
  height: calc(100vh - 17px);
}

.v2-brand { padding-left: 43px; margin-bottom: 86px; }
.v2-brand img { height: 40px; width: auto; display: block; filter: brightness(0) invert(1); }

.v2-nav { display: flex; flex-direction: column; gap: 9px; }
.v2-nav a {
  display: flex; align-items: center;
  height: 40px;
  padding: 0 17px;
  border-radius: var(--r-nav);
  font-size: 14.357px;
  color: #fff;
  transition: background .15s ease;
}
.v2-nav a svg { width: 18px; height: 18px; flex: none; }
.v2-nav a span { margin-left: 26px; }
.v2-nav a:hover { background: rgba(217, 217, 217, .07); }
.v2-nav a[aria-current="page"] { background: var(--sidebar-active); }

.v2-foot { margin-top: auto; }
.v2-account {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 17px; margin-bottom: 52px;
}
.v2-account-name { font-size: 18.844px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.v2-account-mail {
  font-size: 11.383px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255, 255, 255, .56); margin-top: 2px;
}
.v2-actions { display: flex; gap: 38px; padding: 0 17px; }
.v2-actions button { background: none; border: 0; color: #fff; opacity: .9; }
.v2-actions button:hover { opacity: 1; }

.v2-main { padding: 42px 76px 12px 60px; min-width: 0; }
.v2-main > * { max-width: 1434px; }

/* ---------- Page head ---------------------------------------------------- */

.v2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 70px; }
.v2-col > .v2-head { margin-bottom: 48px; }

.v2-title {
  font-family: var(--display);
  font-size: 40.129px;
  line-height: 46.148px;
  font-weight: 400;
  margin-bottom: 14px;
}
.v2-sub { font-size: 16px; color: var(--ink-mid); }

.v2-range {
  height: 44px;
  min-width: 243px;
  background: var(--card);
  border: 0;
  border-radius: var(--r-card);
  padding: 0 46px 0 26px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a0a0c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 10 13l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 15px 15px;
}

/* ---------- Toggles ------------------------------------------------------ */

.v2-toggles { display: flex; gap: 17px; flex-wrap: wrap; }
.v2-toggle {
  border: 0; background: none;
  min-width: 101px; height: 32px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: #0b0907;
  padding: 0 14px;
}
.v2-toggle:hover { background: rgba(0, 0, 0, .04); }
.v2-toggle[aria-pressed="true"] {
  background: #000; color: #fff;
  border-radius: var(--r-nav);
  box-shadow: var(--shadow);
}
.v2-toggles.standalone { margin-bottom: 26px; }

/* ---------- Metric cards -------------------------------------------------- */

.v2-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18.72px; }
.v2-cards + .v2-cards { margin-top: 30px; }

/* Competitor page: one card per brand, however many brand.js configures.
   The fixed 4-column grid above assumed exactly four metrics. */
.v2-cards--brands { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }

/* Campaign detail carries four stats, or five once a budget is set. The fixed
   four-column grid above would drop the fifth onto a lonely second row. */
.v2-cards--auto { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
/* auto-fit packs as many cards per row as will fit, which on a wide screen left
   six cards as five and a lonely one. campaign.js sets --cols to a count that
   divides evenly, and this honours it once there is room for it. */
@media (min-width: 1080px) {
  .v2-cards--auto[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

.v2-card {
  background: var(--card);
  border-radius: var(--r-card);
  min-height: 158.481px;
  padding: 24.54px 26px 26px;
}
.v2-card-label {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label); line-height: 1.46;
}
.v2-card-value {
  --value-size: 34.813px;
  font-size: var(--value-size); line-height: 1.15; letter-spacing: 0;
  font-weight: 400; margin-top: 32px;
}
/* A rank is the longest thing these cards hold — "#206,655" is eight
   characters and ran past both edges of the card. Long values step down a
   size rather than overflowing; the step is a fraction of whatever size the
   breakpoint set, so it follows the responsive sizes too. The thresholds come
   from measuring the real values at the real card width: at 30px a digit is
   about 19.6px and the card gives the value 132px, so seven characters is
   already over. */
.v2-card-value.is-long    { font-size: calc(var(--value-size) * .84); }
.v2-card-value.is-longer  { font-size: calc(var(--value-size) * .72); }
.v2-card-value.is-longest { font-size: calc(var(--value-size) * .60); }
/* Belt and braces: whatever arrives, it stays inside the card. */
.v2-card-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* …except a budget, whose second line is meant to sit under the first. */
.v2-card-value:has(.v2-card-sub) { white-space: normal; overflow: visible; }
.v2-card-value .unit { color: var(--unit); }
/* Secondary half of a value, e.g. the "/ $10,000 spent" under a budget. */
.v2-card-value .v2-card-sub {
  display: block; margin-top: 4px;
  font-size: 17px; line-height: 22px; color: var(--unit); white-space: nowrap;
}
.v2-card-delta { margin-top: 6.9px; font-size: 12px; color: #0b0c0c; white-space: nowrap; }
.v2-card-delta .up { color: var(--green); }
.v2-card-delta .down { color: var(--red); }

/* ---------- Layout -------------------------------------------------------- */

.v2-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gap);
  align-items: stretch;
}
@supports not (grid-template-columns: minmax(300px, 27.8%)) {
  .v2-split { grid-template-columns: minmax(0, 1fr) 398px; }
}
.v2-split { grid-template-rows: auto auto; row-gap: 20px; }
.v2-col { display: flex; flex-direction: column; min-width: 0; }
.v2-cardblock { margin-top: auto; margin-bottom: 34px; }

/* still used by analytics + campaigns */
.v2-stack { display: flex; flex-direction: column; gap: 20px; }

.v2-panel { background: var(--card); border-radius: var(--r-card); padding: 30px 26px; }
.v2-panel--chart { min-height: 381px; padding: 30px 26px 34px; }
.v2-panel--rail { min-height: 381px; padding: 30px 32px 34px; display: flex; flex-direction: column; }
.v2-panel--rail .v2-profile { margin-top: auto; margin-bottom: auto; }

.v2-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.v2-panel-title { font-size: 16px; font-weight: 500; }

/* ---------- Chart --------------------------------------------------------- */

.v2-chart { width: 100%; height: 292px; display: block; overflow: visible; }
.v2-chart .axis { font-size: 14px; fill: var(--axis); font-family: var(--sans); font-weight: 500; }
.v2-chart .area { fill: var(--chart-fill); opacity: .85; }
.v2-chart .line { fill: none; stroke: var(--chart-line); stroke-width: 2; }
.v2-chart .marker { fill: var(--ink); }
.v2-chart .marker-stem { stroke: var(--ink); stroke-width: 1.5; }
.v2-chart .tip-box { fill: var(--ink); }
.v2-chart .tip-text { fill: #fff; font-size: 12.819px; font-family: var(--sans); }

/* ---------- Profile rail --------------------------------------------------- */

.v2-rail-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.v2-rail-head svg { width: 9px; height: 9px; opacity: .8; }

.v2-profile { text-align: center; }
.v2-avatar {
  width: 180px; height: 180px; border-radius: var(--r-pill);
  object-fit: cover; margin: 0 auto; display: block; background: #1b2340;
}
.v2-handle { font-size: 25.956px; font-weight: 500; line-height: 1.3; margin-top: 36px; }
.v2-geo { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--label); margin-top: 6px; }
.v2-count { font-size: 42.728px; line-height: 49.137px; font-weight: 400; margin-top: 26px; }
.v2-count-label { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--label); margin-top: 6px; }

.v2-btn-outline {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: 100%; height: 52px; margin-top: 45px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--shadow);
  font-size: 16px; color: #0b0907;
}
.v2-btn-outline svg { width: 9px; height: 9px; position: absolute; right: 24px; }
.v2-btn-outline:hover { background: #fbfbfb; }

.v2-btn-wide {
  width: 100%; height: 32px; margin-top: 26px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--card); box-shadow: var(--shadow);
  font-size: 14px; color: #0b0907;
}
.v2-btn-wide:hover { background: #fbfbfb; }

/* ---------- Follower insight ------------------------------------------------ */

/* One grid for the whole rail rather than one per row. Each row used to size
   its own label column, so "Average Comments" pushed its value further right
   than "Media Count" did and the figures never lined up. Sharing the tracks
   puts every label, meter and value in the same column.

   Label column sizes to its own text, so the words are ALWAYS shown in full.
   The meter is the only thing allowed to shrink when the rail is narrow, and
   the value column takes the rest so the figures sit flush right. */
.v2-insight {
  margin-top: 32px;
  display: grid;
  grid-template-columns: max-content minmax(0, 91px) 1fr;
  align-items: center;
  column-gap: 16px;
  row-gap: 21px;
}
.v2-insight-row { display: contents; }
.v2-insight-label { min-height: 28px; display: flex; align-items: center; }
.v2-insight-label {
  font-size: 16px;
  line-height: 28.318px;
  white-space: nowrap;
}
.v2-meter { height: 7px; border-radius: 10px; background: rgba(42, 101, 69, .16); overflow: hidden; }
.v2-meter i { display: block; height: 100%; background: var(--green); border-radius: 10px; }
.v2-insight-pct { font-size: 12px; font-weight: 500; color: var(--green); text-align: right; white-space: nowrap; justify-self: end; }
.v2-insight-num { grid-column: 2 / 4; font-size: 16px; text-align: right; white-space: nowrap; justify-self: end; }

/* ---------- Tables ----------------------------------------------------------- */

.v2-table { width: 100%; border-collapse: collapse; }
.v2-table th {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--label); font-weight: 400; text-align: right; padding-bottom: 16px;
}
.v2-table th:first-child, .v2-table td:first-child { text-align: left; }
.v2-table td { padding: 13px 0; font-size: 15px; text-align: right; }
.v2-table tbody tr + tr td { border-top: 1px solid #f4f4f4; }
.v2-muted { color: var(--label); font-size: 14px; }

/* ---------- Login (frame 159:3, 1920x1080) --------------------------------------
   Two panels, each 916x1025 at top 27 => 47.7% wide, radius 11, 24px gutter.
   Left  rgba(217,217,217,.78) on the #efefef canvas.
   Right the glass render under a 129deg black-to-transparent gradient.
   -------------------------------------------------------------------------- */

.v2-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 27px 32px;
  align-items: stretch;
}

.v2-login-form {
  background: rgba(217, 217, 217, .78);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  padding: 40px;
}

/* 543/916 of the panel = the field width in the frame. */
.v2-login-inner { width: 100%; max-width: 543px; text-align: center; }

.v2-login-mark { width: 63px; height: auto; margin: 0 auto 46px; display: block; }

.v2-login-title {
  font-family: var(--display);
  font-size: clamp(34px, 2.7vw, 51.931px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 22px;
}
.v2-login-sub {
  font-size: clamp(16px, 1.07vw, 20.525px);
  line-height: 1.46;
  color: rgba(0, 0, 0, .74);
  margin: 0 auto 74px;
}

/* Field: 543x67, radius 11, divider at 65px leaving room for the icon. */
.v2-field {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--r-pill);
  height: 67px;
  margin-bottom: 29px;
  overflow: hidden;
}
.v2-field-icon {
  width: 65px;
  flex: none;
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .45);
}
.v2-field-icon svg { width: 20px; height: 20px; }
.v2-field input {
  flex: 1;
  border: 0;
  padding: 0 21px;
  font-size: 18px;
  font-family: inherit;
  background: none;
  color: var(--ink);
  min-width: 0;
}
.v2-field input::placeholder { color: rgba(0, 0, 0, .2); }
.v2-field input:focus { outline: none; }
.v2-field:focus-within { box-shadow: 0 0 0 2px var(--ink); }

.v2-btn-primary {
  width: 100%;
  height: 68px;
  border: 0;
  border-radius: var(--r-pill);
  background: #000;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-top: 29px;
  box-shadow: var(--shadow);
}
.v2-btn-primary:hover { background: #1c1c1c; }
.v2-btn-primary:disabled { opacity: .6; cursor: default; }

.v2-error { color: #c0392b; font-size: 14px; margin-top: 18px; min-height: 20px; }

/* ---------- Login artwork ------------------------------------------------- */

.v2-login-art {
  position: relative;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: #000 url("img/login-art.png") center / cover no-repeat;
  min-height: 480px;
}
/* Frame gradient: black at 23% to transparent at 70%, 129deg. */
.v2-login-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .92) 6%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(129.24deg, #000 23.27%, rgba(0, 0, 0, 0) 70.1%);
}

/* Headline sits ~70% down the panel, logo below it at ~85%. */
.v2-login-copy {
  position: absolute;
  left: 7.75%;
  right: 7.75%;
  bottom: 8%;
  z-index: 1;
}
.v2-login-headline {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 48px);
  line-height: 1.208;
  max-width: 62%;
  background-image:
    linear-gradient(116.97deg, rgba(38, 71, 82, .56) 20.8%, rgba(255, 255, 255, .56) 62.91%),
    linear-gradient(90deg, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-login-mark-brand {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-top: 44px;
}

/* ---------- Campaigns index ------------------------------------------------------- */

.v2-railbar { display: flex; align-items: center; gap: 26px; margin: 0 0 22px; }
.v2-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.v2-arrows { display: flex; gap: 18px; }
.v2-arrows button { background: none; border: 0; padding: 4px 0; color: var(--ink); }
.v2-arrows svg { width: 44px; height: 12px; }
.v2-arrows button:hover { opacity: .6; }
.v2-arrows button[disabled] { opacity: .22; cursor: default; }
.v2-arrows button[disabled]:hover { opacity: .22; }

.v2-carousel {
  display: flex; gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 8px;
}
.v2-carousel::-webkit-scrollbar { display: none; }

/* Cards hold their width and the row scrolls under the arrows.
   This was a grid with `minmax(0, 50%)` tracks, and that zero minimum let grid
   shrink every card to fit the viewport — fine at two campaigns, but at five
   they were crushed onto one screen and the arrows had nothing to scroll. */
.v2-campaign {
  flex: 0 0 calc((100% - 28px) / 2);
  min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
@media (max-width: 1240px) { .v2-campaign { flex-basis: calc((100% - 28px) / 1.55); } }
@media (max-width: 820px)  { .v2-campaign { flex-basis: 100%; } }

.v2-campaign-media {
  display: block; position: relative;
  border-radius: var(--r-card); overflow: hidden;
  /* 16:9 matches the supplied artwork, so nothing is cropped away. The old
     16:10 cut into the title set along the bottom of each cover. */
  aspect-ratio: 16 / 9; background: #1a1338;
}
.v2-campaign-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-campaign-cta {
  position: absolute; bottom: 22px; right: 22px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(20, 16, 45, .72); backdrop-filter: blur(6px);
  color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill); padding: 14px 20px; font-size: 15px;
}
.v2-campaign-cta svg { width: 9px; height: 9px; }
.v2-campaign-media:hover .v2-campaign-cta,
.v2-campaign-media:focus-visible .v2-campaign-cta { opacity: 1; transform: none; }

.v2-campaign-eyebrow {
  font-family: var(--display); font-style: italic; font-size: 22px;
  color: #a9b0b8; margin: 26px 0 10px;
}
.v2-campaign-title { font-family: var(--display); font-size: 40px; font-weight: 400; line-height: 1.1; }
.v2-campaign-title a:hover { opacity: .65; }

.v2-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.v2-pill { background: #e2e2e2; border-radius: var(--r-card); padding: 9px 14px; font-size: 13px; color: #3a3a3a; }

/* ---------- Campaign detail --------------------------------------------------------- */

.v2-panel--table { margin-top: 20px; padding: 30px 32px; min-height: 620px; }
.v2-tablewrap { overflow-x: auto; }
.v2-table--posts { min-width: 1080px; }
.v2-table--posts th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); padding-bottom: 22px; }
.v2-table--posts th:not(:first-child), .v2-table--posts td:not(:first-child) { text-align: center; }
.v2-table--posts td { padding: 20px 0; color: #4a4a4a; vertical-align: middle; }

/* Columns need a gutter of their own. The table was drawn for four or five
   wide columns; a roster brings nine, and narrow ones like likes, comments and
   reposts then sit right against each other — in the header the words run
   together into "likescommentsreposts". */
.v2-table--posts th, .v2-table--posts td { padding-left: 18px; padding-right: 18px; }
.v2-table--posts th:first-child, .v2-table--posts td:first-child { padding-left: 0; }
.v2-table--posts th:last-child, .v2-table--posts td:last-child { padding-right: 0; }

/* Numbers read down a column, so they align right and share one digit width.
   Each gets a floor so a two-digit count still holds a column open. */
.v2-table--posts th.v2-col--num, .v2-table--posts td.v2-col--num {
  text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 104px;
}
/* The long ones: a TikTok post id is nineteen digits and a deliverable is a
   sentence. Cap one, hold the other open. */
.v2-table--posts .v2-col--post { max-width: 230px; }
.v2-table--posts td.v2-col--post a {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.v2-table--posts .v2-col--deliverables { min-width: 180px; }
.v2-table--posts .v2-col--eta, .v2-table--posts .v2-col--platform { white-space: nowrap; }
.v2-table--posts tbody tr + tr td { border-top: 0; }
.v2-table--posts td a:hover { text-decoration: underline; }

.v2-creator { display: flex; align-items: center; gap: 16px; }
.v2-creator img, .v2-avatar-blank {
  width: 46px; height: 46px; border-radius: var(--r-card);
  object-fit: cover; background: #ddd; flex: none; display: block;
}
.v2-creator span, .v2-creator a { color: var(--ink); }
.v2-creator a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Responsive ---------------------------------------------------------------- */

@media (max-width: 1700px) {
  :root { --sidebar-w: 290px; --gap: 16px; }
  .v2-main { padding: 34px 30px 12px 34px; }
  .v2-brand { padding-left: 18px; margin-bottom: 58px; }
  .v2-title { font-size: 34px; line-height: 1.15; }
  .v2-cards { gap: 14px; }
  .v2-card { padding: 20px 20px 22px; min-height: 140px; }
  .v2-card-value { --value-size: 30px; margin-top: 22px; }
  .v2-head { margin-bottom: 40px; }
  .v2-avatar { width: 140px; height: 140px; margin-top: 30px; }
  .v2-handle { font-size: 22px; margin-top: 24px; }
  .v2-count { font-size: 34px; line-height: 40px; margin-top: 18px; }
  .v2-btn-outline { margin-top: 26px; height: 46px; }
  .v2-panel { padding: 24px 22px; }
  .v2-insight { margin-top: 20px; }
  .v2-insight-row { min-height: 42px; column-gap: 12px; }
  .v2-insight-label { font-size: 15px; }
  .v2-table--rank td { padding: 12px 0; font-size: 15px; }
  .v2-table--rank th { padding-bottom: 14px; }
  .v2-rail-head { font-size: 15px; }
  .v2-panel-title { font-size: 15px; }
  .v2-toggle { min-width: 88px; height: 30px; font-size: 13.5px; }
  .v2-toggles { gap: 10px; }
  .v2-range { height: 40px; min-width: 200px; font-size: 13.5px; padding: 0 40px 0 20px; }
  .v2-card-label { font-size: 11.5px; }
}
@media (max-width: 1400px) {
  .v2-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .v2-panel--rail .v2-profile { margin: 0; }
  .v2-cardblock { margin-top: 24px; }
  .v2-carousel { grid-auto-columns: minmax(0, 86%); }
}
@media (max-width: 1100px) { .v2-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .v2-app { grid-template-columns: 1fr; }
  .v2-sidebar { position: static; height: auto; border-radius: 0; margin: 0; padding: 20px; }
  .v2-brand { margin-bottom: 22px; padding-left: 0; }
  .v2-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .v2-account { margin: 22px 0 0; padding: 0; }
  .v2-actions { display: none; }
  .v2-main { padding: 24px 20px 40px; }
  .v2-head { flex-direction: column; margin-bottom: 30px; }
  .v2-title { font-size: 32px; line-height: 1.1; }
  .v2-login { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .v2-login-art { min-height: 320px; }
  .v2-login-copy { top: auto; bottom: 34px; }
  .v2-login-headline { max-width: 100%; }
  .v2-login-mark-brand { width: 56px; height: 56px; margin-top: 26px; }
  .v2-login-sub { margin-bottom: 40px; }
  .v2-field { height: 58px; margin-bottom: 18px; }
  .v2-btn-primary { height: 58px; margin-top: 18px; }
  .v2-carousel { grid-auto-columns: minmax(0, 94%); gap: 18px; }
  .v2-campaign-title { font-size: 30px; }
  .v2-panel--table { padding: 20px; min-height: 0; }
}
@media (max-width: 620px) { .v2-cards { grid-template-columns: 1fr; } }


/* ---------- Growth Hacking (frame 181:1010) --------------------------------- */

/* Chart 959 / table 451 of a 1434 content area = 31.5% rail. */
/* Measured from 181:1010 (1920x1080):
   toggles y160 -> cards y228.11 (h158.481) -> panels y417.2 (h632)
   cards 338.706 wide, 25.3 gap | chart 959 + 24 gap + table 451        */
.v2-split--growth {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 31.5%);
  grid-template-rows: none;
  gap: 24px;
  margin-top: 30px;              /* 417.2 - 386.6 */
}
.v2-page--growth .v2-cards { gap: 25px; }
.v2-page--growth .v2-toggles.standalone { margin-bottom: 32px; }  /* 228.11 - 192 */
.v2-page--growth .v2-head { margin-bottom: 33px; }                /* 160 - 127 */
/* The growth chart uses the SAME element and height as every other page.
   The Figma frame draws it taller only because that page has no card rail;
   matching the other charts matters more than matching that one frame. */

.v2-select {
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow);
  padding: 0 34px 0 16px;
  font-family: inherit;
  font-size: 14px;
  color: #0b0907;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b0907' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 10 13l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px 13px;
}

.v2-table--rank { margin-top: 27px; }
.v2-table--rank th { text-align: left; padding-bottom: 18px; }
.v2-table--rank td { text-align: left; font-size: 16px; height: auto; padding: 17px 0; }
.v2-table--rank tbody tr + tr td { border-top: 0; }
.v2-table--rank .v2-rank { font-weight: 500; width: 22%; }
.v2-table--rank .v2-keyword { font-weight: 500; width: 45%; }

@media (max-width: 1400px) {
  .v2-split--growth { grid-template-columns: minmax(0, 1fr); }
  .v2-table--rank td { padding: 12px 0; }
}


/* ---------- Wrapped (159:567 / 632 / 700 / 769 / 183:1300) ------------------
   Slide panel: left 357, top 8, 1554x1063, radius 6, border #c8cdd4.
   Type: eyebrow 28/1.73 tracking 1.4 uppercase | title 82.618/95.011
         figure 174.678/200.88 | caption 16 Book, 380 wide
   Themes are the flat colour laid over the panel art in Figma.
   -------------------------------------------------------------------------- */

.v2-app--wrapped { min-height: 100vh; }
.v2-wrapmain { padding: 8px 9px 9px 7px; min-width: 0; display: flex; }

.v2-slide {
  position: relative;
  flex: 1;
  border-radius: var(--r-nav);
  border: 1px solid #c8cdd4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 17px);
  color: #fff;
  text-align: center;
}

.v2-slide--green   { background: #1a3c34; }
.v2-slide--plum    { background: #3b1a2e; }
.v2-slide--navy    { background: #1c2340; }
.v2-slide--terrain { background: #000 url("img/wrapped-terrain.png") top center / 100% auto no-repeat; }
.v2-slide--light   { background: #efefef; color: #0a0a0c; }

/* The faint diagonals that run across every wrapped frame. */
.v2-slide-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(107deg, transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(73deg,  transparent calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 62% 100%, 55% 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, .16);
}
.v2-slide--light .v2-slide-lines { color: rgba(0, 0, 0, .07); }

.v2-slide-inner { position: relative; z-index: 1; width: min(1199px, 88%); padding: 0 20px; }

.v2-slide-eyebrow {
  font-family: var(--display);
  font-size: clamp(18px, 1.46vw, 28px);
  line-height: 1.73;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.v2-slide-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(42px, 4.3vw, 82.618px);
  line-height: 1.15;
  margin-top: 34px;
}
.v2-slide-week {
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: 18px;
}
.v2-slide-caption {
  font-size: 16px;
  line-height: 1.46;
  max-width: 380px;
  margin: 22px auto 0;
}
.v2-slide-lead { font-weight: 500; font-size: 16px; margin-top: 26px; }
.v2-slide-lead + .v2-slide-week {
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: 18px;
}
.v2-slide-caption { margin-top: 18px; }

/* Big figure, with the near-invisible offset duplicate behind it. */
.v2-figure-wrap { position: relative; }
.v2-figure {
  font-family: var(--display);
  font-size: clamp(72px, 9.1vw, 174.678px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.v2-figure--ghost {
  position: absolute;
  left: 0; right: 0; top: 52%;
  color: rgba(255, 255, 255, .045);
  pointer-events: none;
}

.v2-slide-btn {
  margin-top: 44px;
  min-width: 125px;
  height: 39px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 500;
}
.v2-slide-btn--light { background: #fff; color: #000; }
.v2-slide-btn--dark  { background: #000; color: #fff; }
.v2-slide-btn:hover { opacity: .88; }

.v2-slide-nav {
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}
.v2-slide-nav[hidden] { display: none; }
.v2-slide-nav button { background: none; border: 0; padding: 6px; color: currentColor; opacity: .85; }
.v2-slide-nav button:hover { opacity: 1; }
.v2-slide-nav svg { width: 68px; height: 12px; display: block; }

@media (max-width: 900px) {
  .v2-wrapmain { padding: 0; }
  .v2-slide { min-height: 78vh; border-radius: 0; border-left: 0; border-right: 0; }
  .v2-slide--terrain { background-size: cover; }
  .v2-slide-title { margin-top: 22px; }
  .v2-slide-btn { margin-top: 30px; }
  .v2-slide-nav svg { width: 46px; }
}


/* ---------- Wrapped animations (ported from v1) ------------------------------ */

/* Children rise and fade in, staggered — v1's .wslide.show > * behaviour. */
.v2-slide-inner.is-in > * {
  opacity: 0;
  transform: translateY(24px);
  animation: wrise .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
.v2-slide-inner.is-in > *:nth-child(2) { animation-delay: .12s; }
.v2-slide-inner.is-in > *:nth-child(3) { animation-delay: .24s; }
.v2-slide-inner.is-in > *:nth-child(4) { animation-delay: .36s; }

@keyframes wrise { to { opacity: 1; transform: translateY(0); } }

/* Per-slide accents on the big figure. */
.v2-slide-inner.is-in > .anim-pop {
  animation: wpop .8s cubic-bezier(.2, .9, .2, 1) forwards;
}
@keyframes wpop {
  0%   { opacity: 0; transform: scale(.8) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.v2-slide-inner.is-in > .anim-blur {
  animation: wblur .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes wblur {
  0%   { opacity: 0; filter: blur(18px); transform: translateY(16px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* The ghost duplicate fades in late so it reads as a shadow, not a second number. */
.v2-figure--ghost { opacity: 0; animation: wghost 1.1s ease .5s forwards; }
@keyframes wghost { to { opacity: 1; } }

/* Slide background colour eases between slides rather than snapping. */
.v2-slide { transition: background-color .55s ease, color .55s ease; }

@media (prefers-reduced-motion: reduce) {
  .v2-slide-inner.is-in > *,
  .v2-slide-inner.is-in > .anim-pop,
  .v2-slide-inner.is-in > .anim-blur,
  .v2-figure--ghost { animation: none; opacity: 1; transform: none; filter: none; }
}


/* ---------- Sortable table headers ------------------------------------------ */

.v2-sort {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.v2-sort:hover { opacity: .6; }
.v2-sort.is-active { font-weight: 500; }


/* ---------- Metric definition tooltips --------------------------------------- */

.v2-card-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Two lines' worth of room for every label, so "Average Comments" wrapping
   doesn't push its value below the values either side of it. flex-start keeps
   a single-line label exactly where it was. */
.v2-card-label { min-height: 2.92em; align-items: flex-start; }


.v2-info {
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
  flex: none;
  line-height: 0;
  color: var(--label);
  vertical-align: middle;
  position: relative;
}
.v2-info svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  display: inline-block;
}
.v2-info:hover { color: var(--ink); }

.v2-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 20;
  pointer-events: none;
}
/* Little arrow pointing back down at the icon. */
.v2-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.v2-info:hover .v2-tip,
.v2-info:focus-visible .v2-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* First card in a row: keep the tooltip inside the viewport. */
.v2-cards > .v2-card:first-child .v2-tip { left: 0; transform: translateY(4px); }
.v2-cards > .v2-card:first-child .v2-info:hover .v2-tip,
.v2-cards > .v2-card:first-child .v2-info:focus-visible .v2-tip { transform: translateY(0); }
.v2-cards > .v2-card:first-child .v2-tip::after { left: 16px; }

/* Last card in a row: same, anchored to the right edge. */
.v2-cards > .v2-card:last-child .v2-tip { left: auto; right: 0; transform: translateY(4px); }
.v2-cards > .v2-card:last-child .v2-info:hover .v2-tip,
.v2-cards > .v2-card:last-child .v2-info:focus-visible .v2-tip { transform: translateY(0); }
.v2-cards > .v2-card:last-child .v2-tip::after { left: auto; right: 12px; }

@media (max-width: 900px) { .v2-tip { max-width: 200px; } }


/* ---------- Metric drill-down modal ------------------------------------------ */

.v2-card--clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.v2-card--clickable:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.v2-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, .42);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: 32px;
  z-index: 100;
  animation: v2fade .16s ease;
}
@keyframes v2fade { from { opacity: 0; } }

.v2-modal-panel {
  background: var(--card);
  border-radius: var(--r-card);
  width: min(920px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 30px 32px 34px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

.v2-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.v2-modal-title { font-size: 18px; font-weight: 500; }
.v2-modal-sub {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label);
  margin-top: 6px;
}
.v2-modal-close { background: none; border: 0; padding: 4px; color: var(--label); line-height: 0; }
.v2-modal-close svg { width: 20px; height: 20px; }
.v2-modal-close:hover { color: var(--ink); }

.v2-modal-value {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 18px;
}
.v2-modal-note { font-size: 13px; color: var(--ink-mid); margin-top: 10px; max-width: 60ch; }
.v2-modal-chart { height: 320px; margin-top: 26px; }

@media (max-width: 900px) {
  .v2-modal { padding: 14px; }
  .v2-modal-panel { padding: 20px; }
  .v2-modal-chart { height: 240px; }
}


.v2-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.v2-modal-stat { background: var(--canvas); border-radius: var(--r-card); padding: 16px 18px; }
.v2-modal-stat-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--label);
}
.v2-modal-stat-value { font-size: 24px; margin-top: 10px; }

.v2-row--clickable { cursor: pointer; }
.v2-row--clickable:hover td { background: rgba(0, 0, 0, .025); }

@media (max-width: 700px) { .v2-modal-stats { grid-template-columns: repeat(2, 1fr); } }


/* ---------- Data freshness stamp --------------------------------------------- */

.v2-freshness {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--label);
  margin-top: 10px;
}
/* Amber, not red — the numbers are still real, just behind. */
.v2-freshness.is-stale { color: #9a6b18; font-weight: 500; }


/* ---------- Country rows with flags ---------------------------------------- */

.v2-country { display: flex; align-items: center; gap: 10px; }
/* Fixed width so names line up whether or not a flag was matched. */
.v2-flag {
  width: 20px;
  flex: none;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}


/* ---------- Analytics view cards ---------------------------------------------
   Same shape as the campaign cards, sized down so they sit above the metric
   toggles without dominating the page.
   -------------------------------------------------------------------------- */

/* Placeholder art until the real images arrive. */
.v2-campaign-media--placeholder {
  background: repeating-linear-gradient(
    45deg, #e6e6e6, #e6e6e6 10px, #ededed 10px, #ededed 20px);
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
}
.v2-placeholder-note {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}

@media (max-width: 900px) {
  .v2-carousel--analytics { grid-auto-columns: minmax(0, 88%); }
  .v2-carousel--analytics .v2-campaign-title { font-size: 24px; }
}


/* Placeholder cards are links now — keep the CTA visible on hover only. */
.v2-campaign-media--placeholder { position: relative; }
.v2-campaign-media--placeholder .v2-campaign-cta {
  background: rgba(11, 12, 12, .82);
  padding: 10px 16px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .15s ease;
}
.v2-campaign-media--placeholder:hover .v2-campaign-cta { opacity: 1; }


/* ---------- Segmented toggle (rail header) ---------------------------------- */

.v2-rail-head--split { justify-content: space-between; }

/* Compact dropdown in the rail header. */
.v2-railselect {
  appearance: none;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  /* Arrow only — the panel heading already names what's shown. */
  width: 22px;
  color: transparent;
  text-indent: -100px;
  padding: 4px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a0a0c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 10 13l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.v2-railselect:hover { opacity: .6; }
/* The open menu still needs readable options. */
.v2-railselect option { color: var(--ink); text-indent: 0; }


/* ---------- Sidebar nav groups ------------------------------------------------ */

.v2-navgroup { display: flex; flex-direction: column; }

.v2-navparent {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--r-nav);
  background: none;
  font-family: inherit;
  font-size: 14.357px;
  color: #fff;
  text-align: left;
  transition: background .15s ease;
}
.v2-navparent svg { width: 18px; height: 18px; flex: none; }
.v2-navparent > span:not(.v2-navchev) { margin-left: 26px; }
.v2-navparent:hover { background: rgba(217, 217, 217, .07); }

.v2-navchev {
  margin-left: auto;
  line-height: 0;
  opacity: .6;
  transition: transform .18s ease;
}
.v2-navgroup.is-open .v2-navchev { transform: rotate(180deg); }

/* Collapsed by default; expands when the group is open. */
.v2-navchildren {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease;
}
.v2-navchildren a {
  display: block;
  padding: 9px 17px 9px 61px;   /* aligns with the parent label */
  border-radius: var(--r-nav);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}
.v2-navchildren a:hover { background: rgba(217, 217, 217, .07); color: #fff; }
.v2-navchildren a[aria-current="page"] {
  background: var(--sidebar-active);
  color: #fff;
}

.v2-navgroup.is-open .v2-navchildren { max-height: 200px; padding-top: 2px; }


/* ---------- Compare switch + competitor lines -------------------------------- */

.v2-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  cursor: pointer;
  user-select: none;
  flex: none;
}
.v2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.v2-switch-track {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #d6d6d8;
  position: relative;
  transition: background .15s ease;
  flex: none;
}
.v2-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.v2-switch input:checked + .v2-switch-track { background: var(--ink); }
.v2-switch input:checked + .v2-switch-track .v2-switch-knob { transform: translateX(12px); }
.v2-switch input:focus-visible + .v2-switch-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.v2-switch-label { font-size: 12px; color: var(--ink-mid); white-space: nowrap; }

/* Competitor lines: dashed so they read as reference, not as our data. */
.line--compare { fill: none; stroke-width: 1.8; stroke-dasharray: 5 4; opacity: .85; }

.v2-legend { display: flex; gap: 18px; margin: 4px 0 10px; flex-wrap: wrap; }
.v2-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-mid); }
.v2-key-dot { width: 12px; height: 3px; background: var(--ink); border-radius: 2px; flex: none; }


/* Chart header: metric toggles and the compare switch share one row. */
.v2-panel-head { flex-wrap: nowrap; }
.v2-panel-head .v2-toggles { flex-wrap: nowrap; min-width: 0; }
.v2-panel-head .v2-toggle { white-space: nowrap; }

@media (max-width: 1200px) {
  .v2-panel-head .v2-toggle { padding: 7px 11px; font-size: 13px; }
}

/* Multi-brand tooltip rows. */
.tip-text--head { font-size: 11px; opacity: .62; }
.tip-text--row { font-size: 12.5px; }


.v2-key.is-empty { opacity: .45; }
.v2-key-note { font-size: 11px; opacity: .7; }

/* Operator disclosure under the sign-in form. Deliberately quiet, but real
   text in the page rather than an image, so it is read by both people and
   Google's reviewers. */
.v2-login-operator {
  margin: 34px auto 0; max-width: 460px;
  font-size: 13px; line-height: 1.55; color: rgba(0, 0, 0, .5);
}
.v2-login-operator a { color: rgba(0, 0, 0, .68); text-decoration: underline; }

/* Wrapped: a name instead of a number (top country, top creator). */
.v2-figure--word { font-size: clamp(48px, 6.4vw, 120px); word-break: break-word; }