/* Conttsy site, version 3: the layout and moving parts of version 2 dressed in the app's own design system.
   Colors, radii, buttons, glass and type come from conttsy/src/app/globals.css: paper and ink in light mode,
   the app's dark palette in dark mode, Inter for text, Instrument Serif for titles and Geist Mono for small
   labels. Light or dark follows the visitor's computer; the app prints have a mode of their own
   (html[data-prints]), switched by the Claro/Escuro/Automático control under the hero. */

:root {
  --bg: #f5f4f1;
  --bg-1: #fcfcfb;
  --card: #ffffff;
  --well: #f1f0ec;
  --elevated: #ebeae6;
  --ink: #1b1b19;
  --ink-2: #45443f;
  --ink-3: #7d7b75;
  --ink-4: #a8a6a0;
  --line: #e6e4df;
  --line-strong: #d6d4ce;
  --hair: #eceae6;
  --tr: rgb(0 0 0 / 0.04);
  --tr-strong: rgb(0 0 0 / 0.07);
  --dot: rgb(0 0 0 / 0.08);
  --accent: #1b1b19;
  --accent-hover: #000000;
  --accent-text: #ffffff;
  --btn-bg: #ffffff;
  --btn-hover: #f1f0ec;
  --btn-border: #e6e4df;
  --glass: rgb(255 255 255 / 0.66);
  --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 160px);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --glass-filter: blur(28px) saturate(1.8);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.07), 0 16px 48px rgb(0 0 0 / 0.14);
  --frame-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 30px 70px -30px rgb(0 0 0 / 0.28);
  --mark: rgb(76 126 243 / 0.14);
  --green: #3fa66b;
  --red: #e5484d;
  --blue: #4c7ef3;
  --select: #007aff;
  color-scheme: light;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --w-medium: 510;
  --w-semibold: 590;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The app's dark palette (globals.css, html[data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090a;
    --bg-1: #0f1011;
    --card: #141516;
    --well: #191a1b;
    --elevated: #232326;
    --ink: #f7f8f8;
    --ink-2: #d0d6e0;
    --ink-3: #8a8f98;
    --ink-4: #62666d;
    --line: #23252a;
    --line-strong: #34343a;
    --hair: #1d1e20;
    --tr: rgb(255 255 255 / 0.05);
    --tr-strong: rgb(255 255 255 / 0.08);
    --dot: rgb(255 255 255 / 0.07);
    --accent: #e5e5e6;
    --accent-hover: #ffffff;
    --accent-text: #08090a;
    --btn-bg: rgb(255 255 255 / 0.04);
    --btn-hover: rgb(255 255 255 / 0.08);
    --btn-border: rgb(255 255 255 / 0.08);
    --glass: rgb(30 31 36 / 0.6);
    --glass-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 160px);
    --glass-rim: inset 0 1px 0 rgb(255 255 255 / 0.08);
    --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.025);
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.5);
    --frame-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 30px 70px -30px rgb(0 0 0 / 0.8);
    --mark: rgb(76 126 243 / 0.28);
    --select: #0a84ff;
    color-scheme: dark;
  }
}

/* The prints: light or dark like the computer, unless the visitor picks one under the hero. */
:root,
:root[data-prints="light"] {
  --shot-light: 1;
  --shot-dark: 0;
  --print-glass: rgb(255 255 255 / 0.3);
  --print-rim: rgb(255 255 255 / 0.55);
  --print-chip: rgb(255 255 255 / 0.55);
  --print-chip-text: #45443f;
  --print-dot: rgb(0 0 0 / 0.16);
  --print-solid: #f5f4f1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shot-light: 0;
    --shot-dark: 1;
    --print-glass: rgb(14 15 17 / 0.42);
    --print-rim: rgb(255 255 255 / 0.16);
    --print-chip: rgb(255 255 255 / 0.1);
    --print-chip-text: #d0d6e0;
    --print-dot: rgb(255 255 255 / 0.2);
    --print-solid: #08090a;
  }
}
:root[data-prints="dark"] {
  --shot-light: 0;
  --shot-dark: 1;
  --print-glass: rgb(14 15 17 / 0.42);
  --print-rim: rgb(255 255 255 / 0.16);
  --print-chip: rgb(255 255 255 / 0.1);
  --print-chip-text: #d0d6e0;
  --print-dot: rgb(255 255 255 / 0.2);
  --print-solid: #08090a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}
em {
  font-style: italic;
}
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
}
.skip:focus {
  top: 12px;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-wide {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The app's small mono label */
.mono-label {
  color: var(--ink-3);
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kbd {
  display: inline-block;
  min-width: 18px;
  margin-left: 2px;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  font: 500 11px/1 var(--mono);
  text-align: center;
}

/* ── Buttons, as in the app: pills with a hairline ring, the dark one for the main action ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  color: var(--ink);
  font-weight: var(--w-medium);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.16s,
    transform 0.16s,
    box-shadow 0.16s;
}
.btn:hover {
  background: var(--btn-hover);
}
.btn:active {
  transform: scale(0.97);
}
.btn-sm {
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}
.btn-lg {
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
}
.btn-xl {
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
}
.btn-primary {
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-text);
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}
.btn-light {
  background: #f4f4f2;
  box-shadow: none;
  color: #1b1b19;
}
.btn-light:hover {
  background: #fff;
}
.btn-glass {
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgb(255 255 255 / 0.2);
}
.i-dim {
  color: var(--ink-3);
}
.btn-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-mark svg {
  width: 13px;
  height: 13px;
}
.round-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  font-weight: var(--w-medium);
  font-size: 15px;
  transition:
    border-color 0.2s,
    gap 0.2s;
}
.link:hover {
  gap: 12px;
  border-color: var(--ink);
}

/* ── Brand ── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: var(--w-medium) 19px/1 var(--sans);
  letter-spacing: -0.03em;
}
.brand-mark {
  width: 20px;
  height: 20px;
}

/* ── Nav: two floating pills of the app's glass ── */

.nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}
.nav-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 52px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--glass-sheen), var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    var(--glass-rim),
    0 0 0 1px var(--tr-strong),
    0 10px 30px -14px rgb(0 0 0 / 0.2);
  pointer-events: auto;
}
.nav-left .brand {
  margin: 0 10px 0 12px;
}
.nav-links {
  display: flex;
  gap: 2px;
}
.nav-links a,
.nav-login {
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: var(--w-medium);
  font-size: 13.5px;
  transition:
    color 0.1s,
    background 0.1s;
}
.nav-links a:hover,
.nav-login:hover {
  background: var(--tr);
  color: var(--ink);
}
.nav-right {
  gap: 6px;
  padding: 0 9px 0 10px;
}
.nav-right .btn {
  height: 34px;
  padding: 0 15px;
}
.nav-toggle {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .i {
  width: 20px;
  height: 20px;
}
.nav-toggle .i-close,
.nav.is-open .nav-toggle .i-open {
  display: none;
}
.nav.is-open .nav-toggle .i-close {
  display: block;
}
.menu-mobile {
  display: none;
}

/* ── Hero ── */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: 150px;
}
/* A faint canvas of dots behind the title, fading out before the screen */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 760px;
  background: radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
  mask-image: linear-gradient(#000 30%, transparent);
}
.hero-copy {
  text-align: center;
}
.kicker {
  min-height: 18px;
  color: var(--ink-3);
  font: 500 12.5px/18px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.2em;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
h1 {
  margin-top: 24px;
  font: 400 clamp(52px, 7.6vw, 100px)/0.96 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.squiggle-word {
  position: relative;
  white-space: nowrap;
}
.squiggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  width: 100%;
  height: 0.22em;
  overflow: visible;
}
.squiggle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.2s 0.7s var(--ease) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.hero-sub {
  max-width: 640px;
  margin: 26px auto 0;
  color: var(--ink-2);
  font-size: 18.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.hero-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 64px;
  padding: 36px 36px 0;
  border-radius: 26px;
  background: #6f93a8 url("assets/fundos/neve-por-do-sol.webp") center 78% / cover no-repeat;
  box-shadow: var(--frame-shadow);
}
/* The screen shrinks on short windows so the whole frame, tabs included, fits under the nav. */
.hero-window {
  max-width: max(620px, calc((100vh - 264px) * 1.6 + 16px));
  max-width: max(620px, calc((100svh - 264px) * 1.6 + 16px));
  margin: 0 auto;
  padding: 0 8px 8px;
  border-radius: 18px;
}
.hero-window .shot {
  border-radius: 11px;
}
.window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 40px;
  padding: 0 4px;
}
.dots {
  display: flex;
  gap: 7px;
}
.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--print-dot);
}
.url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--print-chip);
  color: var(--print-chip-text);
  font-size: 12px;
  transition:
    background-color 0.45s,
    color 0.45s;
}
.url .i {
  width: 12px;
  height: 12px;
}
.phone.hero-phone {
  position: absolute;
  right: 44px;
  bottom: 96px;
  z-index: 2;
  width: 178px;
}
.hero-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 22px 0 26px;
}
.hero-tabs,
.theme-seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgb(20 20 20 / 0.42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.hero-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 0.76);
  font: 500 11.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.hero-tabs button:hover {
  color: #fff;
}
.hero-tabs button[aria-selected="true"] {
  background: rgb(10 10 10 / 0.6);
  color: #fff;
}
/* The ring on the open tab fills up while that screen is showing, then the next one opens. */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.ring {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgb(255 255 255 / 0.22) 0);
  -webkit-mask: radial-gradient(circle, transparent 3.4px, #000 3.9px);
  mask: radial-gradient(circle, transparent 3.4px, #000 3.9px);
}
.hero-tabs button[aria-selected="true"] .ring {
  display: block;
  animation: ring 6s linear forwards;
}
.hero-controls.is-paused .ring {
  animation-play-state: paused;
}
@keyframes ring {
  to {
    --p: 100;
  }
}
.hero-pause {
  background: rgb(20 20 20 / 0.42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
}
.hero-pause .i {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
.hero-pause .i-play,
.is-paused .hero-pause .i-pause {
  display: none;
}
.is-paused .hero-pause .i-play {
  display: block;
}
.theme-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 0.8);
  font-weight: var(--w-medium);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.theme-seg button:hover {
  color: #fff;
}
.theme-seg button[aria-checked="true"] {
  background: #fff;
  color: #1b1b19;
}
.theme-seg .i {
  width: 15px;
  height: 15px;
}
.stage-note {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
}

/* ── Phones ── */

.phone {
  position: relative;
  flex: none;
  border: 8px solid #0b0b0a;
  border-radius: 40px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.22),
    0 30px 70px -20px rgb(0 0 0 / 0.5);
}
.phone .shot {
  border-radius: 32px;
  background: var(--print-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  transition: background-color 0.45s;
}

/* ── The strip of what's inside ── */

.strip {
  margin-top: 96px;
  text-align: center;
}
.marquee {
  overflow: hidden;
  margin-top: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.marquee-track li {
  display: flex;
  align-items: center;
  color: var(--ink-3);
  font: 400 32px/1.2 var(--serif);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee-track li::after {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 28px;
  border-radius: 50%;
  background: var(--line-strong);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ── Sections ── */

.section {
  padding: 128px 0;
}
.section-tight {
  padding-top: 24px;
}
.head {
  max-width: 800px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
h2 {
  font: 400 clamp(40px, 5vw, 62px)/1 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.head h2 {
  margin-top: 16px;
}
.head > p:not(.eyebrow) {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--ink-2);
  font-size: 17.5px;
  text-wrap: pretty;
}
.head + .wrap,
.head + .wrap-wide {
  margin-top: 60px;
}
.band {
  background: linear-gradient(var(--bg), var(--well) 26%, var(--well) 74%, var(--bg));
}

/* ── Screenshots ──
   .shot holds the light and dark picture of the same screen, stacked; the one for the current mode shows.
   --l / --t crop from the left and top, --cw / --ch are the visible part (fractions of the whole picture). */

.shot {
  position: relative;
  display: block;
  overflow: hidden;
}
.shot img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--cw, 1));
  max-width: none;
  height: auto;
  transform: translate(calc(var(--l, 0) * -100%), calc(var(--t, 0) * -100%));
  transition: opacity 0.45s;
}
.shot .shot-light {
  opacity: var(--shot-light);
}
.shot .shot-dark {
  opacity: var(--shot-dark);
}
/* Away from the photos, the see-through prints sit on the app's own background. */
.shot.solid {
  background: var(--print-solid);
  transition: background-color 0.45s;
}
.shot.swap.is-out img {
  opacity: 0;
  transition-duration: 0.16s;
}
.glass {
  background: var(--print-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px var(--print-rim),
    0 30px 80px -20px rgb(0 0 0 / 0.45);
  transition: background-color 0.45s;
}

/* A full screen floating on a photo */
.photo-frame {
  isolation: isolate;
  overflow: hidden;
  padding: 44px 44px 0;
  border-radius: 26px;
  background: #8d9aa3 var(--photo) var(--photo-at, center) / cover no-repeat;
  box-shadow: var(--frame-shadow);
}
.photo-window {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 8px 0;
  border-radius: 18px 18px 0 0;
}
.photo-window .shot {
  border-radius: 11px 11px 0 0;
}

/* ── Why ── */

.why-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.why-top h2 {
  margin-top: 18px;
  font-size: clamp(44px, 5.6vw, 72px);
}
.lead {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
}
.why-turn {
  margin-top: 22px;
  font: italic 400 28px/1.15 var(--serif);
  letter-spacing: -0.015em;
}
.why-top + .wrap {
  margin-top: 64px;
}

/* One client on a board, like a canvas with the client picked in the middle */
.board-bezel {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--frame-shadow);
}
.board {
  position: relative;
  aspect-ratio: 16 / 9.2;
  overflow: hidden;
  border-radius: 15px;
  background: var(--well) radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 18px 18px;
}
.bcard {
  position: absolute;
  margin: 0;
}
.bcard-shot {
  position: relative;
  border-radius: 8px;
  background: var(--print-solid);
  box-shadow:
    0 0 0 1px var(--line),
    0 14px 34px -14px rgb(0 0 0 / 0.35);
  transition: background-color 0.45s;
}
.bcard-shot .shot {
  border-radius: 8px;
}
.bcard figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--ink-3);
  font: 500 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bcard figcaption i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--select);
}
.b-center figcaption {
  margin: 0 0 8px;
}
.sel {
  outline: 1px solid var(--select);
  outline-offset: 5px;
}
.sel .h {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--select);
  background: var(--card);
}
.sel .tl {
  top: -9px;
  left: -9px;
}
.sel .tr {
  top: -9px;
  right: -9px;
}
.sel .bl {
  bottom: -9px;
  left: -9px;
}
.sel .br {
  bottom: -9px;
  right: -9px;
}
.bcard-phone,
.bcard-phone .shot {
  border-radius: 16px 16px 0 0;
}
.bnote {
  position: absolute;
  color: var(--ink-3);
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.b-center {
  left: 31%;
  top: 19%;
  width: 38%;
}
.b-a {
  left: 4%;
  top: 7%;
  width: 21%;
}
.b-n1 {
  left: 15%;
  top: 46%;
}
.b-b {
  left: 3%;
  top: 60%;
  width: 23%;
}
.b-c {
  right: 5%;
  top: 6%;
  width: 13%;
}
.b-n2 {
  right: 20%;
  top: 8%;
  text-align: right;
}
.b-d {
  right: 3%;
  top: 52%;
  width: 24%;
}
.b-e {
  left: 35%;
  top: 74%;
  width: 30%;
}
.board-note {
  max-width: 640px;
  margin: 28px auto 0;
  color: var(--ink-2);
  font-size: 16px;
  text-align: center;
  text-wrap: pretty;
}

/* ── Features: tabs, then the copy beside a screen that peeks out of a photo ── */

.ftabs {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
  scrollbar-width: none;
}
.ftabs::-webkit-scrollbar {
  display: none;
}
.ftabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-weight: var(--w-medium);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.ftabs button:hover {
  color: var(--ink);
}
.ftabs button[aria-selected="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line),
    0 1px 3px rgb(0 0 0 / 0.08);
}
.ftabs .i {
  width: 15px;
  height: 15px;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 64px;
  align-items: center;
  margin-top: 52px;
}
.feature-copy {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-weight: var(--w-medium);
  font-size: 13px;
}
.tag .i {
  width: 15px;
  height: 15px;
}
.ftext h3 {
  margin: 20px 0 16px;
  font: 400 clamp(34px, 3.6vw, 46px)/1.03 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.ftext > p:not(.tag) {
  max-width: 470px;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.6;
}
.fcount {
  margin-top: 34px;
}
.fcount b {
  color: var(--ink);
  font-weight: 500;
}
.feature-panel {
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 0 56px;
  border-radius: 26px;
  background: #8d9aa3 var(--photo) center / cover no-repeat;
  box-shadow: var(--frame-shadow);
}
.feature-panel .frame {
  padding: 9px 0 0 9px;
  border-radius: 18px 0 0 0;
  background: var(--print-glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  box-shadow:
    inset 1px 1px 0 var(--print-rim),
    0 30px 80px -20px rgb(0 0 0 / 0.45);
  transition: background-color 0.45s;
}
.feature-panel .shot {
  border-radius: 11px 0 0 0;
}

/* ── Computer and phone ── */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.duo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.duo-copy {
  padding: 28px 30px;
}
.duo-copy h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 32px/1.1 var(--serif);
  letter-spacing: -0.02em;
}
.duo-copy h3 .i {
  width: 24px;
  height: 24px;
  color: var(--ink-3);
}
.duo-copy p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.duo-visual {
  position: relative;
  flex: 1;
  min-height: 520px;
  margin: 0 16px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--well) radial-gradient(var(--dot) 1px, transparent 1.4px) 0 0 / 18px 18px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.duo-card:first-child .duo-visual {
  margin-bottom: 16px;
}
.duo-card:last-child .duo-visual {
  margin-top: 16px;
}
.duo-desk .shot {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 640px;
  border-radius: 10px 0 0 0;
  box-shadow: 0 0 0 1px var(--line);
}
/* Two phones lined up on the snowy pines, as on version 1: the top one shows the bottom of the app (the menu
   bar), the one below shows the top. A third of the height for the first, two thirds for the second. */
.duo-phones {
  display: grid;
  grid-template-rows: 1fr 2fr;
  gap: 14px;
  background: #8d9aa3 url("assets/fundos/pinheiros.webp") center 40% / cover no-repeat;
}
.mini-cell {
  position: relative;
  overflow: hidden;
}
.duo-phones .phone {
  position: absolute;
  left: 50%;
  width: min(58%, 300px);
  border-width: 8px;
  border-radius: 46px;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 20px 50px rgb(0 0 0 / 0.3);
}
.mini-cell:first-child .phone {
  bottom: 0;
}
.mini-cell:last-child .phone {
  top: 0;
}
.duo-phones .phone .shot {
  border-radius: 38px;
}

/* ── Detail tiles ── */

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tile {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.tile-wide {
  grid-column: 1 / -1;
}
.tile header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.tile h3 {
  font: 400 26px/1.1 var(--serif);
  letter-spacing: -0.02em;
}
.tile header p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.tile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 13px;
}
.tile-meta .i {
  width: 14px;
  height: 14px;
}
.tile-meta b {
  color: var(--ink);
  font-weight: var(--w-medium);
}
.tile-visual {
  isolation: isolate;
  overflow: hidden;
  margin-top: 18px;
  padding: 30px 0 0 30px;
  border-radius: 14px 14px 0 0;
  background: #8d9aa3 var(--photo) center / cover no-repeat;
  cursor: zoom-in;
}
.tile-visual .glass {
  padding: 7px 0 0 7px;
  border-radius: 13px 0 0 0;
  box-shadow: inset 1px 1px 0 var(--print-rim);
}
.tile-visual .shot {
  border-radius: 8px 0 0 0;
}
.tile-plain {
  padding: 0;
  background: none;
  cursor: auto;
  box-shadow: inset 0 0 0 1px var(--line);
}
.compare {
  position: relative;
  --pos: 50%;
}
.compare .shot img {
  opacity: 1;
}
.compare .compare-light {
  background: #f5f4f1;
}
.compare .compare-dark {
  background: #08090a;
  clip-path: inset(0 0 0 var(--pos));
}
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
  pointer-events: none;
}
.compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #1b1b19;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
}
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare:has(.compare-range:focus-visible) .compare-knob {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Who it's for ── */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chips button {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-border);
  color: var(--ink-2);
  font-weight: var(--w-medium);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.chips button:hover {
  background: var(--btn-hover);
  color: var(--ink);
}
.chips button[aria-selected="true"] {
  background: var(--accent);
  box-shadow: none;
  color: var(--accent-text);
}
.chip-caption {
  min-height: 3.2em;
  max-width: 560px;
  margin: 22px auto 40px;
  color: var(--ink-2);
  font-size: 16.5px;
  text-align: center;
  text-wrap: balance;
}
#para-quem .head + .wrap {
  margin-top: 36px;
}

/* ── Comparison ── */

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cmp {
  padding: 28px 30px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.cmp-us {
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--ink),
    0 30px 60px -30px rgb(0 0 0 / 0.3);
  border-color: transparent;
}
.cmp h3 {
  margin-bottom: 18px;
  font: var(--w-medium) 18px/1.2 var(--sans);
  letter-spacing: -0.015em;
}
.cmp-us h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.cmp li {
  position: relative;
  padding: 7px 0 7px 34px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.cmp li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 15%, transparent) var(--glyph) center / 11px no-repeat;
}
.cmp .yes {
  --c: var(--green);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fa66b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  color: var(--ink);
}
.cmp .no {
  --c: var(--red);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

/* ── Quote and numbers ── */

.quote {
  padding: 40px 44px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.quote blockquote {
  max-width: 960px;
  margin-top: 22px;
  font: 400 clamp(26px, 2.9vw, 38px)/1.18 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quote mark {
  padding: 0 4px;
  border-radius: 6px;
  background: var(--mark);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--ink-3);
  font-size: 13.5px;
}
.quote figcaption b {
  display: block;
  color: var(--ink);
  font-weight: var(--w-semibold);
  font-size: 14.5px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: var(--w-semibold);
  font-size: 13px;
}
/* The same cards as the numbers on the app's dashboard */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.kpi {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.kpi-label {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
}
.kpi-value {
  display: block;
  margin-top: 14px;
  font-weight: 450;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12px;
}

/* ── Plans ── */

.billing {
  display: flex;
  width: max-content;
  margin: 0 auto 36px;
  padding: 4px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
}
.billing button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-weight: var(--w-medium);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.billing button[aria-checked="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.billing span {
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
  font-size: 12px;
}
.pricing[data-billing="anual"] .only-mensal,
.pricing[data-billing="mensal"] .only-anual {
  display: none;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.plan.is-rec {
  border-color: transparent;
  box-shadow:
    0 0 0 1.5px var(--ink),
    0 30px 60px -30px rgb(0 0 0 / 0.35);
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.plan-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--w-medium) 19px/1 var(--sans);
  letter-spacing: -0.02em;
}
.plan-name em {
  padding: 4px 9px 5px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 500 10.5px var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-flag {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font: 500 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-tagline {
  min-height: 44px;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 26px;
}
.plan-price s {
  align-self: flex-start;
  margin-top: 6px;
  color: var(--ink-4);
  font-size: 16px;
}
.plan-price b {
  font: 400 56px/1 var(--serif);
  letter-spacing: -0.03em;
}
.plan-price small {
  color: var(--ink-3);
  font-size: 15px;
}
.plan-billed {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13px;
}
.plan-cta {
  width: 100%;
  margin-top: 24px;
}
.plan-feats {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.plan-feats li {
  display: flex;
  gap: 10px;
}
.plan-feats .i {
  margin-top: 2px;
  stroke-width: 2.2;
}
.plan-feats b {
  display: block;
  font-weight: var(--w-medium);
  font-size: 14.5px;
}
.plan-feats span {
  color: var(--ink-3);
  font-size: 13px;
}
/* Today's six tabs against one */
.tabs-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 24px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 22px;
}
.tabs-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tabs-strip li {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: 13px;
}
.tabs-count {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font: 400 28px/1 var(--serif);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tabs-count s {
  color: var(--ink-4);
}
.tabs-count b {
  font-weight: 400;
  font-style: italic;
}

/* ── How to start ── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.steps li {
  padding: 26px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.steps span {
  color: var(--ink-4);
  font: italic 400 34px/1 var(--serif);
}
.steps b {
  display: block;
  margin: 26px 0 8px;
  font-weight: var(--w-semibold);
  font-size: 17px;
}
.steps p {
  color: var(--ink-2);
  font-size: 15px;
}

/* ── Questions ── */

.faq {
  max-width: 780px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 21px 2px;
  font-weight: var(--w-medium);
  font-size: 16.5px;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .i {
  color: var(--ink-3);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary .i {
  transform: rotate(45deg);
}
.faq details p {
  max-width: 660px;
  padding: 0 2px 22px;
  color: var(--ink-2);
  font-size: 15.5px;
}

/* ── Last call and footer, in one card ── */

.end {
  display: block;
  padding-bottom: 24px;
}
.end-card {
  overflow: hidden;
  border-radius: 28px;
  background: #0f1011;
  color: #f7f8f8;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.end-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px 32px 104px;
  text-align: center;
}
/* The hero's snowy forest again, blurred and darkened so the text reads clearly. */
.end-photo {
  position: absolute;
  inset: -40px;
  z-index: -2;
  background: #3d5566 url("assets/fundos/neve-por-do-sol.webp") center 70% / cover no-repeat;
  filter: blur(22px) saturate(1.15);
}
.end-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 60% at 50% 45%, rgb(10 14 20 / 0.42), rgb(10 14 20 / 0.22) 70%), linear-gradient(180deg, rgb(10 14 20 / 0.1) 40%, #0f1011);
}
.end-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 26px;
}
.end-cta h2 {
  max-width: 820px;
  margin: 0 auto;
  font-size: clamp(42px, 6vw, 76px);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.25);
}
.end-cta p {
  margin-top: 16px;
  color: rgb(255 255 255 / 0.86);
  font-size: 17.5px;
}
.end-foot {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  padding: 48px 48px 40px;
}
.end-brand p {
  margin-top: 12px;
  color: #8a8f98;
  font-size: 14px;
}
.end-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.end-links div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.end-links b {
  margin-bottom: 4px;
  font-weight: var(--w-semibold);
  font-size: 13.5px;
}
.end-links a {
  width: fit-content;
  color: #8a8f98;
  font-size: 14px;
  transition: color 0.15s;
}
.end-links a:hover {
  color: #f7f8f8;
}
.end-bottom {
  margin: 0 48px;
  padding: 20px 0 26px;
  border-top: 1px solid #23252a;
  color: #62666d;
  font-size: 13px;
}
.end-bottom b {
  color: #8a8f98;
  font-weight: var(--w-medium);
}
.end-bottom a {
  color: #8a8f98;
  text-decoration: underline;
}

/* ── Lightbox ── */

.lightbox {
  width: min(1200px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 10px;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: var(--glass-sheen), var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
.lightbox::backdrop {
  background: rgb(8 9 10 / 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox .shot {
  border-radius: 12px;
}
.lightbox-caption {
  padding: 12px 6px 4px;
  color: var(--ink-2);
  font-size: 14px;
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
}

/* ── Motion ── */

.rise {
  animation: rise 0.9s var(--ease) both;
}
.hero-copy .rise:nth-child(2) {
  animation-delay: 0.05s;
}
.hero-copy .rise:nth-child(3) {
  animation-delay: 0.12s;
}
.hero-copy .rise:nth-child(4) {
  animation-delay: 0.19s;
}
.hero-frame.rise {
  animation-delay: 0.28s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rise,
  .marquee-track,
  .typing::after {
    animation: none;
  }
  .squiggle path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .shot img {
    transition: none;
  }
}

/* ══ Tablet ══ */

@media (max-width: 1100px) {
  .nav-links a {
    padding: 7px 8px;
  }
  .phone.hero-phone {
    display: none;
  }
  .bnote {
    display: none;
  }
  .feature {
    gap: 44px;
  }
}

@media (max-width: 960px) {
  .nav-links,
  .nav-login,
  .nav-right .btn {
    display: none;
  }
  .nav-right {
    padding: 0 6px;
  }
  .nav-toggle {
    display: grid;
  }
  .nav-pill {
    height: 50px;
  }
  .menu-mobile {
    position: absolute;
    top: 60px;
    left: 24px;
    right: 24px;
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    background: var(--glass-sheen), var(--glass);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-rim), var(--shadow-pop);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity 0.2s,
      transform 0.2s var(--ease);
  }
  .nav.is-open .menu-mobile {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .menu-mobile > a {
    padding: 12px;
    border-radius: 10px;
    font-weight: var(--w-medium);
  }
  .menu-mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .why-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .feature-copy {
    min-height: 0;
  }
  .duo,
  .tiles,
  .compare-grid {
    grid-template-columns: 1fr;
  }
  .duo-visual {
    min-height: 480px;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .plan.is-rec {
    order: -1;
  }
  .tabs-strip {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .end-foot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ══ Phone ══ */

@media (max-width: 640px) {
  .wrap,
  .wrap-wide,
  .nav-row {
    padding: 0 16px;
  }
  .nav {
    top: 12px;
  }
  .menu-mobile {
    left: 16px;
    right: 16px;
  }
  .hero {
    padding-top: 116px;
  }
  .kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  h1 {
    font-size: 44px;
  }
  h1 br {
    display: none;
  }
  .hero-sub {
    font-size: 16.5px;
  }
  .cta-row .btn {
    width: 100%;
  }
  .hero-frame {
    margin-top: 44px;
    padding: 14px 14px 0;
    border-radius: 20px;
  }
  .hero-window {
    max-width: none;
    padding: 0 5px 5px;
    border-radius: 13px;
  }
  .window-bar {
    height: 30px;
  }
  .dots i {
    width: 8px;
    height: 8px;
  }
  .dots {
    gap: 5px;
  }
  .url {
    height: 20px;
    padding: 0 10px;
    font-size: 10.5px;
  }
  .hero-window .shot {
    border-radius: 8px;
  }
  .hero-controls {
    gap: 8px;
    padding: 14px 0 16px;
  }
  .hero-tabs {
    max-width: 100%;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero-tabs button {
    gap: 6px;
    height: 32px;
    padding: 0 9px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
  .ring {
    width: 10px;
    height: 10px;
    -webkit-mask: radial-gradient(circle, transparent 2.8px, #000 3.3px);
    mask: radial-gradient(circle, transparent 2.8px, #000 3.3px);
  }
  .theme-seg button {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
  .strip {
    margin-top: 64px;
  }
  .marquee-track li {
    font-size: 26px;
  }
  .marquee-track li::after {
    margin: 0 18px;
  }
  .section {
    padding: 88px 0;
  }
  .section-tight {
    padding-top: 12px;
  }
  h2 {
    font-size: 40px;
  }
  .why-top h2 {
    font-size: 44px;
  }
  .head > p:not(.eyebrow) {
    font-size: 16px;
  }
  .head + .wrap,
  .head + .wrap-wide,
  .why-top + .wrap {
    margin-top: 40px;
  }
  .why-turn {
    font-size: 24px;
  }

  /* The board turns into a simple two-column pile */
  .board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 14px;
    aspect-ratio: auto;
    padding: 18px 14px;
  }
  .bcard {
    position: static;
    width: auto;
  }
  .b-center,
  .b-d,
  .b-e {
    grid-column: 1 / -1;
  }
  .b-center {
    padding: 0 6px;
  }
  .b-c {
    display: none;
  }
  .bcard figcaption {
    font-size: 9.5px;
    white-space: normal;
  }

  .ftabs {
    justify-content: flex-start;
  }
  .feature {
    margin-top: 32px;
  }
  .feature-panel {
    padding: 26px 0 0 26px;
    border-radius: 20px;
  }
  .duo-copy {
    padding: 24px 22px;
  }
  .duo-copy h3 {
    font-size: 28px;
  }
  .duo-visual {
    min-height: 440px;
    margin: 0 12px;
  }
  .duo-card:first-child .duo-visual {
    margin-bottom: 12px;
  }
  .duo-card:last-child .duo-visual {
    margin-top: 12px;
  }
  .duo-desk .shot {
    left: 20px;
    top: 20px;
    width: 520px;
  }
  .duo-phones .phone {
    width: min(72%, 260px);
    border-width: 7px;
    border-radius: 40px;
  }
  .duo-phones .phone .shot {
    border-radius: 33px;
  }
  .photo-frame {
    padding: 18px 18px 0;
    border-radius: 20px;
  }
  .photo-window {
    padding: 5px 5px 0;
    border-radius: 13px 13px 0 0;
  }
  .tile {
    padding: 18px 18px 0;
  }
  .tile h3 {
    font-size: 24px;
  }
  .tile-visual {
    padding: 22px 0 0 22px;
  }
  .tile-plain {
    padding: 0;
  }
  .chips button {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
  }
  .cmp {
    padding: 24px 20px 26px;
  }
  .quote {
    padding: 28px 22px 26px;
  }
  .quote blockquote {
    font-size: 25px;
  }
  .kpi-value {
    font-size: 30px;
  }
  .tabs-strip {
    padding: 20px;
  }
  .end-card {
    border-radius: 20px;
  }
  .end-cta {
    padding: 84px 22px 76px;
  }
  .end-foot {
    padding: 36px 22px 28px;
  }
  .end-links {
    grid-template-columns: 1fr 1fr;
  }
  .end-bottom {
    margin: 0 22px;
  }
}