/* =========================================================================
   Melea — marketing site
   The site speaks the product's visual language: the tokens below are the
   ones from "Tema Terrário" (the app's src/theme.css and
   src/KioskTerrario/terrario.js), copied verbatim so that a screenshot of a
   product screen and a section of this site read as one piece of design.

   File order: tokens · reset · type · backdrop · header · buttons ·
   sections · components · screen portraits · footer · motion · responsive.
   ========================================================================= */

/* ------------------------------------------------------------- fonts
   The latin subset of the variable files Google Fonts serves, kept here so
   the page needs one origin. `swap` draws the text in the fallback face
   until the file lands. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/fraunces.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(assets/fonts/fraunces-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/public-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(assets/fonts/public-sans-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- tokens */
:root {
    /* Surfaces — sun-baked sand */
    --paper:       #eae7da;
    --paper-2:     #e2dece;
    --paper-3:     #f2efe4;
    --card:        #fbfaf4;
    --card-2:      #f5f2e7;
    --glass:       rgba(251, 250, 244, .72);
    --inset:       rgba(234, 231, 218, .62);

    /* Ink — dark institutional green */
    --ink:         #3b4032;
    --ink-deep:    #2c3125;
    --ink-soft:    #5c6350;
    --ink-faint:   #646a53; /* was #7f856e: 3.1:1 on the darkest cream, under the 4.5 small text needs */
    --ink-ghost:   #90967e;
    --cream:       #f1efe3;
    --line:        rgba(59, 64, 50, .12);
    --line-strong: rgba(59, 64, 50, .22);

    /* Brand */
    --olive:       #9ba354;
    --olive-deep:  #7f8744;
    /* The olive as text on cream: --olive-deep reads 3.1:1 there, this 5.4:1.
       Backgrounds (plan flags, button hovers) keep --olive-deep. */
    --olive-ink:   #58602c;
    --sage:        #c8d2ab;
    --tan:         #ccd1ad;
    --tan-soft:    #aab189;
    --melea-green: #4b5335;

    /* States — moss · amber · clay · slate (the queue board's four columns) */
    --moss:      #c8d2ab;  --moss-ink:  #3d472e;  --moss-soft:  #5c6a48;
    --amber:     #e6c98f;  --amber-ink: #5a4520;  --amber-soft: #7a6337;
    --clay:      #eec6a8;  --clay-ink:  #7a4a2a;  --clay-soft:  #96613f;
    --slate:     #b8c4cf;  --slate-ink: #2f3c47;  --slate-soft: #51616e;

    --danger:    #a5411f;
    --warn:      #c9873c;
    --accent:    #a5541f;
    --green:     #5f7248;

    /* Type */
    /* Self-hosted (assets/fonts): the latin subset of the same variable
       files Google Fonts serves, so the drawing does not change. */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Public Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

    /* Radii */
    --r-xs: 8px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
    --r-shell: 34px; --r-pill: 999px;

    /* Shadows — warm, earthen */
    --shadow-xs: 0 1px 2px rgba(61, 51, 39, .07);
    --shadow-sm: 0 3px 10px rgba(61, 51, 39, .08);
    --shadow:    0 14px 36px rgba(61, 51, 39, .12);
    --shadow-lg: 0 28px 64px rgba(61, 51, 39, .18);
    --shadow-xl: 0 48px 110px rgba(40, 32, 22, .26);
    --ring:      0 0 0 4px rgba(155, 163, 84, .28);

    /* Layout */
    --wrap: 1200px;
    --gutter: clamp(20px, 5vw, 48px);
    --header-h: 76px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--sage); color: var(--ink); }

*  { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 0 .45em;
    color: var(--ink);
}

.h-display { font-size: clamp(40px, 6.4vw, 82px); line-height: .98; letter-spacing: -.035em; }
.h-1       { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.h-2       { font-size: clamp(26px, 3.2vw, 40px); }
.h-3       { font-size: clamp(20px, 2.2vw, 27px); }

h1 em, h2 em, .h-display em, .h-1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--olive-ink);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 18px;
}
.eyebrow::before {
    content: '';
    width: 22px; height: 1.5px;
    background: var(--olive);
    border-radius: 2px;
}

.lead    { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); line-height: 1.62; max-width: 62ch; }
.muted   { color: var(--ink-faint); }
.tiny    { font-size: 12.5px; color: var(--ink-faint); }
.serif   { font-family: var(--font-display); }
.num     { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- backdrop */
/* The same blobs, arches, leaf and seeds that sit behind every kiosk screen
   (the app's src/KioskTerrario/KioskBackdrop.js), here with a slow drift. */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.backdrop .blob { position: absolute; }
.b1 { left: -140px; top: -120px;  width: 460px; height: 420px; background: var(--sage);  opacity: .28; border-radius: 58% 42% 55% 45%/52% 60% 40% 48%; animation: drift 26s var(--ease-soft) infinite alternate; }
.b2 { right: -160px; bottom: -180px; width: 520px; height: 480px; background: var(--olive); opacity: .14; border-radius: 45% 55% 48% 52%/58% 44% 56% 42%; animation: drift 34s var(--ease-soft) infinite alternate-reverse; }
.b3 { right: 14%; top: -70px; width: 170px; height: 150px; background: var(--clay); opacity: .22; border-radius: 52% 48% 60% 40%/55% 50% 50% 45%; animation: drift 20s var(--ease-soft) infinite alternate; }
.o1 { left: -120px; top: -100px; width: 460px; height: 420px; border: 1.5px solid rgba(59,64,50,.13); border-radius: 58% 42% 55% 45%/52% 60% 40% 48%; animation: drift 26s var(--ease-soft) infinite alternate; animation-delay: -3s; }
.o2 { right: -140px; bottom: -200px; width: 520px; height: 480px; border: 1.5px solid rgba(59,64,50,.10); border-radius: 45% 55% 48% 52%/58% 44% 56% 42%; animation: drift 34s var(--ease-soft) infinite alternate-reverse; animation-delay: -5s; }
.a1 { left: 5%;  bottom: -110px; width: 260px; height: 340px; background: var(--olive); opacity: .12; border-radius: 130px 130px 0 0; }
.a2 { left: calc(5% + 48px); bottom: -110px; width: 164px; height: 230px; background: var(--paper); opacity: .9; border-radius: 82px 82px 0 0; }
.a3 { left: calc(5% + 86px); bottom: -110px; width: 88px;  height: 145px; background: var(--sage); opacity: .4; border-radius: 44px 44px 0 0; }

.backdrop .leaf  { position: absolute; right: 6%; bottom: 5%; width: 150px; height: 180px; opacity: .22; }
.backdrop .seeds { position: absolute; left: 24%; top: 6%;  width: 130px; height: 73px;  opacity: .28; }
.backdrop .flow  { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }

@keyframes drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    to   { transform: translate3d(26px, -22px, 0) rotate(7deg) scale(1.06); }
}

/* A soft band of "paper" behind dense content, so the text does not have to
   compete with the backdrop. */
.veil { position: relative; }
.veil::before {
    content: '';
    position: absolute;
    inset: -1px 0;
    background: linear-gradient(180deg, transparent, rgba(242,239,228,.72) 12%, rgba(242,239,228,.72) 88%, transparent);
    z-index: -1;
}

/* ---------------------------------------------------------------- header */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: height .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-stuck {
    height: 62px;
    background: rgba(234, 231, 218, .94);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(61,51,39,.06);
}
.nav {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand svg, .brand img { height: 30px; width: auto; transition: height .3s var(--ease); }
.site-header.is-stuck .brand svg, .site-header.is-stuck .brand img { height: 25px; }
.brand-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-left: 1px solid var(--line-strong);
    padding-left: 11px;
    line-height: 1.25;
    max-width: 92px;
}

.nav-links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-links a {
    position: relative;
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(59,64,50,.06); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--olive);
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.nav-toggle span { display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s var(--ease), background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* -------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 13px 24px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .22s var(--ease), box-shadow .28s var(--ease), background .24s, color .24s, border-color .24s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
    background: var(--ink);
    color: var(--cream);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(59,64,50,.24);
}
.btn-primary:hover { background: var(--ink-deep); box-shadow: 0 16px 34px rgba(59,64,50,.3); }

.btn-olive { background: var(--olive); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(155,163,84,.3); }
.btn-olive:hover { background: var(--olive-deep); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(59,64,50,.06); border-color: var(--ink-faint); }

.btn-cream { background: var(--cream); color: var(--ink); border-color: transparent; }
.btn-outline-cream { background: transparent; color: var(--cream); border-color: rgba(241,239,227,.34); }
.btn-outline-cream:hover { background: rgba(241,239,227,.1); border-color: rgba(241,239,227,.6); }

.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* The arrow that advances a step — the same one on the app's login button. */
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------- sections */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-wide { width: min(1400px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - var(--gutter) * 2); margin-inline: auto; }

section { position: relative; }
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section-tight { padding: clamp(48px, 6vw, 84px) 0; }

.section-head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }

.band-ink {
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--r-shell);
    overflow: hidden;
    position: relative;
}
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--cream); }
.band-ink .lead, .band-ink p { color: rgba(241,239,227,.76); }
.band-ink .eyebrow { color: rgba(241,239,227,.6); }
.band-ink .eyebrow::before { background: var(--sage); }

/* ---------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.split {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: center;
}
/* Reversed, the first child lands in the second column — so the widths swap
   with it, keeping the screen portrait in the wide column either way. */
.split.reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.split.reverse > *:first-child { order: 2; }

/* ----------------------------------------------------------- components */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(20px, 2.2vw, 28px);
    box-shadow: var(--shadow-xs);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card-quiet { background: var(--card-2); box-shadow: none; }
.card-glass { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.card h3 { margin-bottom: .35em; }
.card p  { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* Seal: a rounded square carrying the colour of its subject. */
.seal {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    flex: 0 0 auto;
    background: rgba(59,64,50,.07);
    color: var(--ink);
    transition: transform .35s var(--ease);
}
.card-hover:hover .seal { transform: rotate(-7deg) scale(1.08); }
.seal svg { width: 22px; height: 22px; }
.seal-moss  { background: rgba(200,210,171,.6);  color: var(--moss-ink); }
.seal-amber { background: rgba(230,201,143,.6);  color: var(--amber-ink); }
.seal-clay  { background: rgba(238,198,168,.6);  color: var(--clay-ink); }
.seal-slate { background: rgba(184,196,207,.55); color: var(--slate-ink); }
.seal-olive { background: rgba(155,163,84,.24);  color: #58602c; }

/* Small pill — the kiosk's own chip. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--r-pill);
    padding: 6px 13px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(59,64,50,.08);
    color: var(--ink);
    white-space: nowrap;
}
.chip-on    { background: var(--ink); color: var(--cream); }
.chip-moss  { background: rgba(200,210,171,.72); color: var(--moss-ink); }
.chip-amber { background: rgba(230,201,143,.72); color: var(--amber-ink); }
.chip-clay  { background: rgba(238,198,168,.72); color: var(--clay-ink); }
.chip-slate { background: rgba(184,196,207,.68); color: var(--slate-ink); }
.chip-olive { background: rgba(155,163,84,.2);   color: var(--olive-ink); }
.chip-cream { background: rgba(241,239,227,.14); color: var(--cream); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.dot-live { background: var(--green); animation: pulse 2s var(--ease-soft) infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(95,114,72,.5); }
    60%      { box-shadow: 0 0 0 7px rgba(95,114,72,0); }
}

/* List with a leaf-shaped marker */
.ticks { display: grid; gap: 11px; }
/* The marker is positioned, not a grid column: an <li> holding a <strong>
   followed by loose text becomes TWO grid items, and the second one lands in
   a 20px column — breaking one word per line. */
.ticks li {
    position: relative;
    padding-left: 27px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .38em;
    width: 16px; height: 16px;
    border-radius: 50% 0 50% 50%;
    background: rgba(155,163,84,.28);
    box-shadow: inset 0 0 0 1.5px rgba(155,163,84,.6);
}
.ticks li strong { color: var(--ink); font-weight: 700; }
.band-ink .ticks li { color: rgba(241,239,227,.78); }
.band-ink .ticks li strong { color: var(--cream); }
.band-ink .ticks li::before { background: rgba(200,210,171,.24); box-shadow: inset 0 0 0 1.5px rgba(200,210,171,.55); }

/* Large statistic */
.stat { text-align: left; }
.stat .stat-n {
    font-family: var(--font-display);
    font-size: clamp(38px, 4.6vw, 60px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1;
    display: block;
    font-variant-numeric: tabular-nums;
}
.stat .stat-l { font-size: 13.5px; color: var(--ink-soft); margin-top: 9px; display: block; line-height: 1.45; }
.band-ink .stat .stat-l { color: rgba(241,239,227,.65); }

/* Numbered step */
.step-n {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    background: var(--ink);
    color: var(--cream);
    flex: 0 0 auto;
}

/* Pull quote */
.quote {
    font-family: var(--font-display);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.42;
    letter-spacing: -.015em;
    color: var(--ink);
}
.band-ink .quote { color: var(--cream); }

.avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sage);
    color: var(--moss-ink);
    font-weight: 800;
    font-size: 14px;
    flex: 0 0 auto;
}

/* Accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item  { border-bottom: 1px solid var(--line); }
.acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ink);
    transition: color .2s;
}
.acc-btn:hover { color: var(--olive-ink); }
.acc-sign {
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: grid; place-items: center;
    position: relative;
    transition: background .3s var(--ease), border-color .3s, transform .4s var(--ease);
}
.acc-sign::before, .acc-sign::after {
    content: ''; position: absolute;
    background: var(--ink);
    border-radius: 2px;
    transition: opacity .3s var(--ease), background .3s;
}
.acc-sign::before { width: 11px; height: 1.6px; }
.acc-sign::after  { width: 1.6px; height: 11px; }
.acc-item.is-open .acc-sign { background: var(--ink); border-color: transparent; transform: rotate(180deg); }
.acc-item.is-open .acc-sign::before { background: var(--cream); }
.acc-item.is-open .acc-sign::after  { opacity: 0; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { margin: 0 0 22px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab {
    border: 1px solid var(--line-strong);
    background: var(--card);
    border-radius: var(--r-pill);
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.tab:hover { transform: translateY(-2px); color: var(--ink); }
.tab.is-on { background: var(--ink); color: var(--cream); border-color: transparent; }
.tab-panel { display: none; }
.tab-panel.is-on { display: block; animation: fadeUp .5s var(--ease) both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Marquee strip */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; gap: 14px; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee .chip { font-size: 13px; padding: 10px 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink-soft); }


/* --------------------------------------------- portraits of real screens */
/* Every `.shot` is the REAL screen: an iframe holding a page exported into
   telas/, rendered at the terminal width it was designed for (1600px) and
   scaled down by transform. Not an image, not a recreation — the same HTML
   and the same CSS the clinic's own device paints.

   The script writes --k (the scale factor) on every width change; the CSS
   derives the rest from it. With scripting off the screen shows at natural
   size and cropped, which is still honest. */
.shot {
    --sw: 1600;      /* source width, in px */
    --sh: 1000;      /* source height, in px */
    --sy: 0;         /* crop from the top, in source px */
    --k: 1;
    position: relative;
    width: 100%;
    /* The box is sized by ratio, not by --k. --k only arrives once scripting
       runs; deriving the height from it made the frame open at 1000px and
       then snap shut — a layout shift on every page that shows a screen. */
    aspect-ratio: var(--sw) / calc(var(--sh) - var(--sy));
    overflow: hidden;
    border-radius: var(--r-xl);
    border: 1px solid rgba(59, 64, 50, .16);
    box-shadow: var(--shadow-lg);
    background: var(--paper-3);
    margin: 0;
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.shot iframe {
    position: absolute;
    top: calc(var(--sy) * var(--k) * -1px);
    left: 0;
    width: calc(var(--sw) * 1px);
    height: calc(var(--sh) * 1px);
    border: 0;
    transform: scale(var(--k));
    transform-origin: 0 0;
    pointer-events: none;   /* it is a portrait: the site is not driven from it */
}
.shot-lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }

/* ------------------------------------------- reading a screen on a phone */
/* A screen drawn for a 1600px terminal, squeezed into a 350px column, keeps
   its shape and loses every word in it: 12px type lands under 3px. So on a
   narrow viewport the frame stops shrinking at `--kmin` and the column
   scrolls sideways instead — the gesture `.table-wrap` already asks of the
   reader for a wide table.

   The scrolling lives on this wrapper rather than on `.shot` itself: the
   iframe inside is absolutely positioned, so its 1600px layout box would set
   the scroll range no matter how far the transform shrank it. */
.shot-pan {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.shot-pan::-webkit-scrollbar { height: 6px; }
.shot-pan::-webkit-scrollbar-thumb { background: rgba(59, 64, 50, .22); border-radius: 99px; }
.shot-pan::-webkit-scrollbar-track { background: transparent; }

/* Caption: names the screen of the system it came from. */
.shot-cap {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--ink-faint);
}
.shot-cap b { color: var(--ink-soft); font-weight: 700; }
.shot-cap a {
    margin-left: auto;
    font-weight: 700;
    color: var(--olive-ink);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.shot-cap a:hover { border-color: currentColor; color: var(--ink); }
.shot-cap::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--olive);
    flex: 0 0 auto;
}

/* A screen inside a dark band needs a light edge, or it dissolves into it. */
.band-ink .shot { border-color: rgba(241, 239, 227, .18); }
.band-ink .shot-cap { color: rgba(241, 239, 227, .55); }
.band-ink .shot-cap b { color: rgba(241, 239, 227, .8); }


/* --------------------------------------------- a screen you can walk into */
/* The navigation is the product's own: the Gestão bar and the front desk's
   buttons inside the frame do the moving (see telas/navegacao.js). Nothing is
   bolted on above it — a second set of tabs would only be a drawing of the
   bar that is already right there.

   So this variant lets the pointer reach the frame. Scrolling still belongs
   to the page: the screens are exported at their full height and have nothing
   to scroll. */
.shot-live iframe { pointer-events: auto; }
.shot-live { cursor: default; }

/* The screen fades while the next one loads, so a step does not flash. */
.shots .shot iframe { transition: opacity .28s var(--ease); }
.shots.is-swapping .shot iframe { opacity: .3; }

/* ------------------------------------------------------------ screen field */
/* A field at rest, drawn the way the kiosk draws it: a tiny uppercase label
   over a recessed ground. Used by the sign-in screen reproduced on
   seguranca.html. */
.field {
    background: var(--inset);
    border-radius: 12px;
    padding: 9px 12px;
    display: grid;
    gap: 3px;
}
.field .f-lab { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.field .f-val { font-size: 12px; font-weight: 600; color: var(--ink); }

/* Pricing */
/* `stretch` iguala a altura dos cartões: com listas de tamanhos diferentes,
   `start` deixava cada um parar onde o conteúdo acabava e a linha ficava
   desalinhada. O botão desce sozinho para a base com o `margin-top: auto`
   abaixo, para que os três terminem no mesmo lugar. */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(24px, 2.6vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.plan > .btn { margin-top: auto; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan.is-featured { background: var(--ink); color: var(--cream); border-color: transparent; box-shadow: var(--shadow-lg); }
.plan.is-featured h3, .plan.is-featured .p-amount { color: var(--cream); }
.plan.is-featured .p-desc, .plan.is-featured .ticks li { color: rgba(241,239,227,.76); }
.plan.is-featured .ticks li strong { color: var(--cream); }
.plan.is-featured .ticks li::before { background: rgba(200,210,171,.24); box-shadow: inset 0 0 0 1.5px rgba(200,210,171,.55); }
.plan-flag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--olive);
    color: #fff;
    border-radius: 999px;
    padding: 6px 15px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(155,163,84,.34);
}
.p-amount { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.p-amount small { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .6; }
.p-desc { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* Comparison table */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14px; }
table.cmp th, table.cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.cmp thead th { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); background: var(--card-2); }
table.cmp td:not(:first-child), table.cmp th:not(:first-child) { text-align: center; width: 15%; }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp tbody tr:hover td { background: rgba(155,163,84,.06); }
table.cmp .yes { color: var(--green); font-weight: 800; }
table.cmp .no  { color: var(--ink-ghost); }
/* A table of sentences, not ticks: every column reads left-aligned. */
table.cmp.cmp-text td, table.cmp.cmp-text th { text-align: left; width: auto; vertical-align: top; line-height: 1.55; }
table.cmp.cmp-text td:first-child { font-weight: 700; white-space: nowrap; }
table.cmp.cmp-text td:last-child { color: var(--ink-soft); }

/* Form */
.form { display: grid; gap: 16px; }
/* `hidden` só vale se ganhar do `display` acima. O atributo traz o seu
   próprio `display:none` da folha do navegador, e qualquer regra do autor
   passa por cima — sem isto o formulário enviado continua na tela, ao lado
   do "Recebido", convidando a mandar de novo. */
.form[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form label { display: grid; gap: 7px; }
.form .lab { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.form input, .form select, .form textarea {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 13px 15px;
    width: 100%;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--olive);
    box-shadow: var(--ring);
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-ghost); }
.form-note { font-size: 12.5px; color: var(--ink-faint); }
.form-ok {
    background: rgba(200,210,171,.5);
    border: 1px solid rgba(95,114,72,.3);
    border-radius: 16px;
    padding: 16px 18px;
    font-size: 14px;
    color: var(--moss-ink);
    font-weight: 600;
}

/* Closing call to action */
.cta-band {
    background: var(--ink);
    border-radius: var(--r-shell);
    padding: clamp(38px, 6vw, 78px) clamp(24px, 5vw, 70px);
    color: var(--cream);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band h2 { color: var(--cream); }
.cta-band p  { color: rgba(241,239,227,.74); }
.cta-band .cta-glow {
    position: absolute;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155,163,84,.42), transparent 66%);
    filter: blur(28px);
    pointer-events: none;
    top: -280px; right: -180px;
    animation: drift 22s var(--ease-soft) infinite alternate;
}
.cta-band .cta-glow.two { top: auto; bottom: -320px; right: auto; left: -220px; background: radial-gradient(circle, rgba(238,198,168,.3), transparent 66%); animation-duration: 30s; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; position: relative; }

/* --------------------------------------------------------------- footer */
.site-footer { padding: clamp(48px, 6vw, 80px) 0 34px; border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 90px); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(24px, 4vw, 54px); }
.foot-grid h3 { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 15px; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid li a { font-size: 14px; color: var(--ink-soft); transition: color .2s, padding-left .25s var(--ease); display: inline-block; }
.foot-grid li a:hover { color: var(--ink); padding-left: 4px; }
.foot-brand svg, .foot-brand img { height: 32px; width: auto; margin-bottom: 14px; }
.foot-bottom {
    margin-top: clamp(34px, 4vw, 54px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------- motion */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .78s var(--ease), transform .78s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal='left']  { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
[data-reveal='scale'] { transform: scale(.955); }
[data-reveal='left'].is-in, [data-reveal='right'].is-in, [data-reveal='scale'].is-in { transform: none; }

/* Reading progress bar */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    width: 0;
    background: linear-gradient(90deg, var(--olive), var(--clay));
    z-index: 70;
    transition: width .1s linear;
}

/* Light parallax — the script writes --py */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Page entrance */
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-stagger > * { animation: riseIn .9s var(--ease) both; }
.hero-stagger > *:nth-child(1) { animation-delay: .05s; }
.hero-stagger > *:nth-child(2) { animation-delay: .14s; }
.hero-stagger > *:nth-child(3) { animation-delay: .23s; }
.hero-stagger > *:nth-child(4) { animation-delay: .32s; }
.hero-stagger > *:nth-child(5) { animation-delay: .41s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    [data-parallax] { transform: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
    .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .price-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    :root { --header-h: 66px; }

    .nav-toggle { display: inline-flex; }
    .nav-links {
        position: fixed;
        inset: var(--header-h) 0 auto;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 16px var(--gutter) 26px;
        background: rgba(234,231,218,.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 24px 40px rgba(61,51,39,.14);
        border-bottom: 1px solid var(--line);
        clip-path: inset(0 0 100% 0);
        transition: clip-path .45s var(--ease);
    }
    .nav-links.is-open { clip-path: inset(0 0 0 0); }
    .nav-links a { padding: 14px 12px; font-size: 16px; border-radius: 14px; }
    .nav-links a.is-active::after { display: none; }
    .nav-links a.is-active { background: rgba(59,64,50,.08); }
    .nav-actions .btn-ghost { display: none; }

    .split { grid-template-columns: 1fr; }
    .split.reverse > *:first-child { order: 0; }
    .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .backdrop .leaf, .backdrop .seeds { display: none; }
}

/* Below this the column is too narrow to hold a whole 1600px screen and still
   have words in it, so the frame stops shrinking and the wrapper pans. */
@media (max-width: 900px) {
    .shot { --kmin: .62; }
    /* A frame that runs off the edge of the column has to say so, or it reads
       as a screen that was cut wrong. */
    .shot-cap::after {
        content: 'Arraste a tela para o lado — ou abra em tamanho real.';
        flex: 0 0 100%;
        margin-top: 2px;
        color: var(--ink-faint);
    }
}

@media (max-width: 640px) {
    .g-2, .g-3, .g-4, .g-5 { grid-template-columns: 1fr; }
    .shot-cap { flex-wrap: wrap; }
    .shot-cap a { margin-left: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    .brand-tag { display: none; }
}

/* Walking into a screen is a pointer gesture. On a touch device the same
   touch has to pan the frame, so there the frame goes back to being a
   portrait and "ver em tamanho real" is the way in — said so in the caption,
   because a frame that stopped answering taps with no explanation reads as
   broken. */
@media (hover: none) {
    .shot-live iframe { pointer-events: none; }
    .shot-live { cursor: pointer; }
}

/* ------------------------------------------------- the consultation demo */
/* A working recreation of the consulting-room screen, not a picture of it.
   Everything here — the copy, the colours, the three badge states, the order
   of the panels — is lifted from the product's own ConVisit.js. The reason it
   is rebuilt instead of embedded: the real screen is drawn for a 1600px
   terminal, and scaled into a page column its 12px type falls under 6px.
   Rebuilt at native size it stays readable, and it can act out the one thing
   a screenshot cannot show — the record filling itself while the vet talks.

   The states are the product's:
     ·   waiting for the recording        rgba(59,64,50,.12) / #7f856e
     …   listening                        #e6c98f / #5a4520
     ✓   mentioned, or written            #5f7248 / #fff                     */
.sim {
    background: var(--paper);
    border: 1px solid rgba(59, 64, 50, .16);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    font-family: 'Public Sans', var(--font-body);
    color: var(--ink);
    position: relative;
    isolation: isolate;
}

/* The kiosk's dark header, measured off the real screen: the section label in
   tanSoft, the greeting in Fraunces italic on tan, the three live counts each
   in the colour of what they count, and the operator block on the right. */
.sim-bar {
    background: var(--ink);
    color: var(--cream);
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 26px;
    padding: 13px 22px;
    margin: 14px 14px 0;
}
.sim-bar .sb-logo { height: 42px; width: auto; flex: 0 0 auto; }
.sim-bar .sb-where {
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tan-soft);
}
.sim-bar .sb-hi {
    font-family: var(--font-display); font-style: italic;
    font-size: 17px; color: var(--tan);
    background: rgba(241, 239, 227, .08);
    border-radius: 999px; padding: 5px 18px;
    margin-left: auto;
}
.sim-bar .sb-pills { display: flex; align-items: center; gap: 4px; }
.sim-bar .sb-pill {
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: 11px; font-weight: 600; color: #6b7059;
    background: rgba(241, 239, 227, .08);
    border-radius: 999px; padding: 7px 13px;
    white-space: nowrap;
}
.sim-bar .sb-pill b { font-size: 14px; font-weight: 800; }
.sim-bar .n-slate { color: var(--slate-soft); }
.sim-bar .n-clay  { color: var(--danger); }
.sim-bar .n-moss  { color: var(--green); }
.sim-bar .sb-bell { display: grid; place-items: center; width: 46px; }
.sim-bar .sb-bell svg { width: 19px; height: 19px; }

.sim-bar .sb-clock { display: flex; align-items: baseline; gap: 4px; margin-left: 6px; }
.sim-bar .sb-clock b { font-size: 23px; font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; }
.sim-bar .sb-clock i { font-size: 19px; font-weight: 700; font-style: normal; color: var(--tan-soft); }
.sim-bar .sb-date { display: flex; gap: 3px; }
.sim-bar .sb-date b, .sim-bar .sb-date i {
    background: rgba(241, 239, 227, .09);
    border-radius: 6px; padding: 3px 7px;
    font-style: normal; font-weight: 700; text-transform: uppercase;
}
.sim-bar .sb-date i { font-size: 9px; color: var(--tan-soft); }
.sim-bar .sb-date b { font-size: 10px; color: var(--cream); }

.sim-bar .sb-user { display: flex; flex-direction: column; margin-left: 6px; }
.sim-bar .sb-user b { font-size: 13px; font-weight: 600; color: var(--cream); }
.sim-bar .sb-user i { font-size: 10.5px; font-style: normal; font-weight: 400; color: var(--tan-soft); }
.sim-bar .sb-av {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--tan); color: var(--ink);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
}
.sim-bar .sb-caret { font-size: 11px; font-weight: 600; color: var(--tan-soft); }

/* The patient strip: slate ground, the visit chronometer on the right, and
   the bell that calls an assistant into the room. */
.sim-patient {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(184, 196, 207, .68);
    margin: 13px 14px 0;
    border-radius: 28px;
    padding: 14px 22px;
}
.sim-patient .p-av {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .8); color: var(--slate-ink);
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 19px; font-weight: 600;
}
.sim-patient > span:nth-child(2) { min-width: 0; }
.sim-patient .p-name { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--slate-ink); letter-spacing: -.01em; }
.sim-patient .p-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--slate-soft); }
.sim-patient .p-chip {
    background: var(--slate-ink); color: #fff;
    border-radius: 999px; padding: 6px 14px;
    font-size: 11px; font-weight: 700;
}
.sim-patient .p-bell {
    margin-left: auto;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    display: grid; place-items: center;
    font-size: 19px;
}
.sim-patient .p-timer { text-align: right; }
.sim-patient .p-timer b { display: block; font-size: 26px; font-weight: 800; color: var(--slate-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.sim-patient .p-timer span { font-size: 10px; font-weight: 600; color: var(--slate-soft); }

/* Three columns, in the product's own 1fr 1.2fr 1fr. */
.sim-cols { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 13px; padding: 13px; align-items: stretch; }
.sim-pane {
    background: rgba(251, 250, 244, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 28px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}
.sim-h { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.sim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sim-mic { font-size: 10.5px; font-weight: 600; color: var(--green); }
.sim-tag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--moss-ink); background: rgba(200,210,171,.72);
    border-radius: 999px; padding: 3px 9px;
}

/* Recording status box — one line, four possible readings. */
.sim-status {
    background: rgba(234, 231, 218, .62);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-faint);
}
.sim-status .rec-dot {
    width: 10px; height: 10px; border-radius: 99px;
    background: var(--danger);
    animation: simPulse 1s infinite;
    flex: 0 0 auto;
}
@keyframes simPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.sim[data-state="rec"] .sim-status,
.sim[data-state="stopping"] .sim-status { color: var(--danger); font-weight: 700; }
.sim[data-state="paused"] .sim-status { color: var(--warn); font-weight: 700; }
.sim[data-state="done"] .sim-status { color: var(--green); font-weight: 700; }

/* The three transport buttons. Disabled is opacity .45, as in the product. */
.sim-btns { display: flex; gap: 7px; }
.sim-btn {
    flex: 1;
    border: 0;
    border-radius: 12px;
    padding: 11px 0;
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(59, 64, 50, .08);
    color: var(--ink-soft);
    transition: opacity .2s, filter .2s;
}
.sim-btn.is-primary { background: var(--ink); color: var(--cream); }
.sim-btn:disabled { opacity: .45; cursor: default; }
.sim-btn:not(:disabled):hover { filter: brightness(1.06); }

.sim-note {
    background: rgba(230, 201, 143, .72);
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--amber-ink);
    line-height: 1.45;
}

/* Live transcription block, pinned to the bottom of its column. */
.sim-live { margin-top: auto; }
.sim-live-box { background: rgba(234, 231, 218, .62); border-radius: 14px; padding: 13px 15px; }
.sim-live-state { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.sim[data-state="rec"] .sim-live-state,
.sim[data-state="stopping"] .sim-live-state { color: var(--danger); }
.sim[data-state="done"] .sim-live-state { color: var(--green); }
.sim-live-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 5px;
}

/* A clinical-record row: badge, label, and the line that changes with state. */
.sim-row {
    background: rgba(234, 231, 218, .62);
    border-radius: 14px;
    padding: 11px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.sim-badge {
    width: 24px; height: 24px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    background: rgba(59, 64, 50, .12);
    color: var(--ink-faint);
    transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.sim-row[data-mark="listening"] .sim-badge { background: var(--amber); color: var(--amber-ink); }
.sim-row[data-mark="covered"] .sim-badge,
.sim-row[data-mark="done"] .sim-badge { background: var(--green); color: #fff; transform: scale(1.12); }
.sim-row[data-mark="covered"] .sim-badge { animation: simTick .5s var(--ease); }
@keyframes simTick {
    0%   { transform: scale(.6) rotate(-12deg); }
    60%  { transform: scale(1.3) rotate(4deg); }
    100% { transform: scale(1.12) rotate(0); }
}
.sim-row > span:last-child { flex: 1; min-width: 0; }
.sim-row .r-label { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.sim-row .r-line { display: block; font-size: 12.5px; font-style: italic; color: var(--ink-ghost); margin-top: 3px; line-height: 1.4; }
.sim-row[data-mark="covered"] .r-line { color: var(--green); }
.sim-row[data-mark="done"] .r-line { font-style: normal; font-size: 13px; color: var(--ink); }

/* Vitals are not a section: smaller badge, no card of their own. */
.sim-vitals { display: flex; align-items: center; gap: 9px; padding: 2px 14px; }
.sim-vitals .sim-badge { width: 19px; height: 19px; border-radius: 7px; font-size: 10px; }
.sim-vitals .v-title { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.sim-vitals[data-mark="covered"] .v-title, .sim-vitals[data-mark="done"] .v-title { font-weight: 700; color: var(--moss-ink); }
.sim-vitals .v-sub { font-size: 11px; color: var(--ink-ghost); }
.sim-vitals[data-mark="done"] .v-sub { font-size: 11.5px; font-weight: 700; color: var(--moss-ink); }

.sim-hint { font-size: 10.5px; color: var(--ink-ghost); padding: 0 14px; }

/* Right column: the patient's context. */
.sim-seg { display: flex; gap: 6px; background: rgba(234,231,218,.62); border-radius: 14px; padding: 4px; }
.sim-seg span { flex: 1; text-align: center; border-radius: 10px; padding: 7px 0; font-size: 12px; font-weight: 600; color: var(--ink-ghost); }
.sim-seg span.on { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: 0 2px 5px rgba(59,64,50,.12); }
.sim-mini { background: rgba(234, 231, 218, .62); border-radius: 14px; padding: 12px 14px; }
.sim-mini .m-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.sim-mini .m-main { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.sim-mini .m-sub { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.sim-mini .m-big { font-size: 20px; font-weight: 800; color: var(--ink); }
.sim-mini .m-delta { font-size: 11px; font-weight: 600; color: var(--green); }
.sim-draft { font-size: 10.5px; color: var(--ink-ghost); line-height: 1.45; margin-top: auto; }

.sim-foot { display: flex; gap: 7px; }
.sim-foot span {
    flex: 1; border-radius: 12px; padding: 11px 0; text-align: center;
    font-size: 12px; font-weight: 700;
    background: rgba(59, 64, 50, .08); color: var(--ink-soft);
}
.sim-foot span.dark { background: var(--ink); color: var(--cream); flex: 1.4; }

/* The caption under the demo doubles as its control. */
.sim-cap {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--ink-faint);
}
.sim-cap b { color: var(--ink-soft); font-weight: 700; }
.sim-cap::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--olive); flex: 0 0 auto; }
@media (max-width: 1100px) {
    .sim-cols { grid-template-columns: 1fr; }
    /* On one column the context panel is the least useful of the three while
       the point being made is the record filling itself. */
    .sim-ctx { display: none; }
}
@media (max-width: 640px) {
    .sim-bar .sb-hi, .sim-bar .sb-clock { display: none; }
    .sim-patient .p-timer b { font-size: 20px; }
}

/* ------------------------------------------------------------- documents
   The legal pages — privacidade, termos, tratamento de dados. They are read
   end to end, not scanned like the rest of the site, so they get a single
   measured column, a sticky index beside it and clause numbers that can be
   quoted in a contract. Same tokens as everything else: a lawyer reading it
   and a screenshot of the product should still look like one company. */
.doc {
    display: grid;
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.doc-index {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    background: var(--glass);
    backdrop-filter: blur(10px);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.doc-index h2 {
    font: 700 10.5px var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 12px;
}
.doc-index ol { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.doc-index li { counter-increment: idx; margin-bottom: 3px; }
.doc-index a {
    display: flex;
    gap: 9px;
    padding: 5px 8px;
    margin-left: -8px;
    border-radius: var(--r-xs);
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.doc-index a::before {
    content: counter(idx);
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink-ghost);
}
.doc-index a:hover { background: var(--inset); color: var(--ink); }
.doc-index a:hover::before { color: var(--olive-ink); }

.doc-body { max-width: 72ch; counter-reset: clause; }
.doc-body > section { counter-increment: clause; padding-top: 8px; margin-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 20px); }
.doc-body > section > h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(23px, 2.6vw, 30px);
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 14px;
    text-wrap: balance;
}
.doc-body > section > h2::before {
    content: counter(clause) '. ';
    color: var(--ink-ghost);
    font-variant-numeric: tabular-nums;
}
.doc-body h3 {
    font: 700 14.5px var(--font-body);
    color: var(--ink);
    margin: 26px 0 8px;
}
.doc-body p { margin: 0 0 13px; color: var(--ink-soft); line-height: 1.72; }
.doc-body strong { color: var(--ink); font-weight: 700; }
.doc-body ul, .doc-body ol { margin: 0 0 15px; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; }
.doc-body li { margin-bottom: 7px; }
.doc-body li::marker { color: var(--ink-ghost); }
.doc-body a { color: var(--olive-ink); text-decoration: underline; text-underline-offset: 2px; }

/* A definition that the rest of the document leans on — "controladora",
   "operadora" — sits in its own frame so it can be found again later. */
.doc-def {
    background: var(--inset);
    border-radius: var(--r);
    padding: 16px 20px;
    margin: 0 0 16px;
}
.doc-def dt { font: 700 12.5px var(--font-body); color: var(--ink); margin-bottom: 3px; }
.doc-def dd { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.doc-def dd:last-child { margin-bottom: 0; }

/* What the system actually stores, said in a table rather than a paragraph:
   a titular reading this wants to find their own row, not a sentence. */
.doc-table { overflow-x: auto; margin: 0 0 18px; border-radius: var(--r); }
.doc-table table { width: 100%; border-collapse: collapse; min-width: 520px; background: var(--card); }
.doc-table th, .doc-table td {
    text-align: left;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.doc-table th {
    font: 700 10.5px var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--card-2);
    white-space: nowrap;
}
.doc-table td { color: var(--ink-soft); }
.doc-table td:first-child { color: var(--ink); font-weight: 600; }
.doc-table tr:last-child td { border-bottom: none; }

/* Something the reader has to act on before this page is true — a CNPJ that
   is not filled in yet. Loud on purpose: it must not survive to production. */
.doc-todo {
    background: rgba(165, 65, 31, .1);
    border-radius: var(--r);
    padding: 14px 18px;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--danger);
}
.doc-todo b { font-weight: 800; }

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.doc-note {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-top: 34px;
    font-size: 13.5px;
    line-height: 1.68;
    color: var(--ink-soft);
}
.doc-note b { color: var(--ink); }

@media (max-width: 900px) {
    .doc { grid-template-columns: 1fr; }
    .doc-index { position: static; }
    .doc-index ol { columns: 2; column-gap: 18px; }
}
@media (max-width: 520px) {
    .doc-index ol { columns: 1; }
}