/* ============================================================
   WTC Page Design System — based on Semrush staging site
   Extracted from wtc.html / wtc_files/
   ============================================================ */


/* ============================================================
   CUSTOM FONTS
   ============================================================ */

/* Lazzer — primary brand font (used in header, footer, body) */
@font-face {
  font-family: 'Lazzer';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/thin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/light.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lazzer';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('wtc_files/heavy.woff2') format('woff2');
}


/* ============================================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
  /* --- Color palette --- */
  --color-black:          #181e15;   /* near-black primary text */
  --color-white:          #ffffff;
  --color-lavender:       #c190ff;   /* primary brand accent / CTA */
  --color-lavender-dark:  #b072ff;   /* hover state for lavender */
  --color-mint:           #dceeeb;   /* light green-teal background */
  --color-mint-dark:      #bfddda;
  --color-dark-grey:      #6c6e79;   /* secondary text / icons */
  --color-mid-grey:       #2d2e33;   /* body copy on white */
  --color-light-grey:     #d1d2d5;   /* borders, dividers */
  --color-bg-subtle:      #f4f5f9;   /* hover backgrounds */
  --color-blue-link:      #0071bc;   /* in-text links */
  --color-focus-ring:     #008ff880; /* keyboard focus outline */
  --color-green-cta:      #4fae33;   /* legacy green CTA button */
  --color-green-cta-dark: #1d9c00;

  /* --- Typography --- */
  --font-primary:   'Lazzer', 'Inter', sans-serif;
  --font-fallback:  'Inter', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  48px;

  --leading-tight:  1;
  --leading-snug:   1.2;
  --leading-normal: 1.4;
  --leading-relaxed:1.5;

  --tracking-tight:   -0.32px;  /* used on 16px semibold */
  --tracking-tighter: -1.28px;  /* used on 32px headings */
  --tracking-wide:    0.28px;   /* used on uppercase labels */

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 60px;
  --space-10:80px;

  /* --- Border radius --- */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl:32px;
  --radius-pill:100px;

  /* --- Shadows --- */
  --shadow-dropdown: 0 0 30px 0 rgba(0, 0, 0, 0.20);
  --shadow-card:     0 1px 12px rgba(25, 27, 35, 0.15);
  --shadow-focus:    0 0 0 3px var(--color-focus-ring);

  /* --- Layout / Z-index --- */
  --z-header:   500;
  --z-dropdown: 600;
  --z-modal:    10010;
  --z-toast:    9999;

  /* --- Header --- */
  --header-height:        84px;
  --underheader-height:   calc(100vh - var(--header-height));

  /* --- Max widths --- */
  --container-outer: 1170px;
  --container-wide:  1440px;
}

@media (max-width: 1023px) {
  :root {
    --header-height: 70px;
  }
}


/* ============================================================
   RESET / BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--color-light-grey);
}

html {
  font-size: 12px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-fallback);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100%;
  min-width: 320px;
}

@media (max-width: 767px) {
  body {
    font-size: var(--text-base);
  }
}

a {
  color: var(--color-blue-link);
}

/* Common reset for interactive elements */
button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}


/* ============================================================


/* ============================================================
   SEMRUSH EXPERIMENTS — SHARED BASE
   Tokens above are inherited unchanged from the Semrush Free
   Tools design system (free-tools.css). Everything below is
   shared scaffolding for the experiments.semrush.com hub.
   Direction-specific components live in each page's <style>.
   ============================================================ */

body {
  font-family: var(--font-primary);
}

/* --- Accessibility utilities --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  z-index: 999999;
  background: var(--color-white);
  color: #006dca;
  font-size: var(--text-base);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 2px solid #006dca;
}
.skip-link:focus { top: var(--space-4); }

/* --- Footer branding block (shared with free tools) --- */
.footer-brand {
  background-color: var(--color-mint);
  background-image: repeating-linear-gradient(90deg, rgba(193,144,255,0.35) 0px, rgba(193,144,255,0.35) 1px, transparent 1px, transparent 12px);
  padding: 60px var(--space-6) 0;
  overflow: hidden;
  line-height: 0.85;
  text-align: center;
}
.footer-brand__text {
  font-family: var(--font-primary);
  font-size: clamp(120px, 18vw, 260px);
  font-weight: 900;
  letter-spacing: -4px;
  color: var(--color-black);
  text-transform: uppercase;
  display: block;
  white-space: nowrap;
  text-align: center;
}

/* ============================================================
   DESIGN NOTES APPENDIX
   Spec-only zone appended below each mockup. Not part of the
   live page — hidden when the page is embedded in a device
   frame (?embed=1).
   ============================================================ */

.spec {
  background: #101114;
  color: #e7e8ec;
  padding: var(--space-10) var(--space-6);
  font-family: var(--font-primary);
}
body.is-embed .spec,
body.is-embed .skip-link { display: none; }

.spec__inner { max-width: 1170px; margin: 0 auto; }

.spec__kicker {
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8f93a3;
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.spec__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.8px;
  margin: 0 0 var(--space-3);
  color: #fff;
}
.spec__lede {
  font-size: var(--text-base);
  line-height: 1.6;
  color: #a9adbd;
  max-width: 720px;
  margin: 0 0 var(--space-9);
}
.spec__block { margin-bottom: var(--space-10); }
.spec__block-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 0 0 var(--space-2);
  color: #fff;
}
.spec__block-note {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #8f93a3;
  max-width: 680px;
  margin: 0 0 var(--space-6);
}
.spec__stage {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  color: var(--color-black);
  overflow: hidden;
}
.spec__stage--flush { padding: 0; }

/* Device frame for the mobile rendering */
.spec__devices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}
.device {
  width: 410px; /* 390px inner viewport + 2 x 10px bezel */
  max-width: 100%;
  flex: 0 0 auto;
}
.device__screen {
  border: 10px solid #2b2d36;
  border-radius: 36px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 56px rgba(0,0,0,0.45);
  height: 760px;
}
.device__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.device__label {
  font-size: var(--text-sm);
  color: #8f93a3;
  margin: var(--space-4) 0 0;
  text-align: center;
}

/* Status label reference row */
.spec__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Embedded/screenshot rendering: don't let the layout grid stretch the body
   area to the viewport height, which adds phantom whitespace above the footer
   in tall full-page captures. */
body.is-embed .srf-layout { min-height: 0; }

/* The Semrush 2026 header relies on its own JS to relocate the desktop menu
   into the burger drawer. These static mockups don't load that bundle, so the
   desktop nav would overlap the logo below 1024px. Hide it and let the native
   popover burger stand in. */
@media (max-width: 1023px) {
  srf-header-2026 #srf-header-desktop-menu-container,
  srf-header-2026 #srf-header-desktop-buttons-container { display: none; }
}
@media (max-width: 1023px) {
  srf-header-2026 .srf-header__burger { margin-left: auto; }
}