/* Tarde Design System — tokens */
/* Webfonts. No binaries were supplied with the source style reference, so the four
   families it names are loaded from Google Fonts (all four are Google originals).
   Swap this @import for local @font-face rules if licensed binaries arrive. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300..700;1,300..500&family=Inter:wght@300;400;500;600&family=Inter+Tight:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");
:root{--font-display-serif:'Playfair Display',ui-serif,Georgia,serif;--font-display-sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body-compact:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

:root{
/* Base palette — 96% achromatic, two editorial washes */
--color-void-black:#020204;
--color-pure-black:#000000;
--color-carbon:#636363;
--color-slate:#888888;
--color-silver:#c6c6c6;
--color-soft-graphite:#575757;
--color-paper-white:#ffffff;
--color-bone:#f8f8f8;
--color-linen:#efefef;
--color-lime-wash:#f2fcb3;
--color-saffron:#ffdc5c;
/* Spectrum marquee stops — the one chromatic signature */
--color-spectrum-pink:#fd02f5;
--color-spectrum-red:#fa3d1d;
--color-spectrum-yellow:#ffb005;
--color-spectrum-lavender:#e1e1fe;
--color-spectrum-blue:#0358f7;
--color-spectrum-brown:#340b05;
--color-spectrum-marquee:#fa3d1d;

/* Surfaces (level 0 → 4) */
--surface-void:#020204;
--surface-paper:#f8f8f8;
--surface-card:#ffffff;
--surface-linen:#efefef;
--surface-wash:#f2fcb3;
--surface-wash-warm:#ffdc5c;

/* Semantic text */
--text-primary:#000000;
--text-secondary:#636363;
--text-tertiary:#888888;
--text-placeholder:#c6c6c6;
--text-inverse:#ffffff;
--text-inverse-muted:rgba(255,255,255,0.7);
--text-on-glass:rgba(0,0,0,0.85);

/* Borders & hairlines */
--border-ink:#000000;
--border-hairline:rgba(0,0,0,0.12);
--border-hairline-strong:rgba(0,0,0,0.24);
--border-inverse:rgba(255,255,255,0.18);
--border-width:1px;

/* Interactive fills */
--fill-primary:#ffffff;
--fill-primary-text:#000000;
--fill-secondary:#efefef;
--fill-secondary-hover:#e6e6e6;
--fill-graphite:#575757;
--fill-scrim:rgba(0,0,0,0.65);
--fill-scrim-hover:rgba(0,0,0,0.8);
--fill-glass:rgba(248,248,248,0.72);
--fill-glass-dark:rgba(2,2,4,0.55);
--fill-transparent-hover:rgba(0,0,0,0.05);
--fill-disabled:#efefef;
--text-disabled:#c6c6c6;

/* Links */
--link-color:#000000;
--link-color-hover:#636363;
--link-underline:rgba(0,0,0,0.35)
}

:root{
/* Weights — display speaks at 300, subheads at 650. Never 700. */
--font-weight-light:300;
--font-weight-regular:400;
--font-weight-medium:500;
--font-weight-w650:650;

/* Scale: size / line-height / tracking */
--text-caption:10px;--leading-caption:1.5;
--text-eyebrow:13px;--leading-eyebrow:1.23;--tracking-eyebrow:1.3px;
--text-body-sm:16px;--leading-body-sm:2.19;
--text-body:18px;--leading-body:1.5;--tracking-body:-0.36px;
--text-body-lg:20px;--leading-body-lg:1.5;
--text-subheading:22px;--leading-subheading:1.36;
--text-heading-sm:24px;--leading-heading-sm:1.25;--tracking-heading-sm:-0.72px;
--text-heading:48px;--leading-heading:1.17;--tracking-heading:-2.4px;
--text-heading-lg:54px;--leading-heading-lg:1.11;--tracking-heading-lg:-2.16px;
--text-display:112px;--leading-display:0.85;--tracking-display:-3.36px;

/* Semantic roles */
--type-display-family:var(--font-display-serif);
--type-heading-family:var(--font-display-sans);
--type-body-family:var(--font-body);
--type-label-family:var(--font-mono)
}
/* Editorial type utilities — mirror the roles the source names, nothing more. */
.t-display{font-family:var(--font-display-serif);font-weight:var(--font-weight-light);font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-primary);margin:0}
.t-heading{font-family:var(--font-display-sans);font-weight:var(--font-weight-w650);font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);color:var(--text-primary);margin:0}
.t-heading-lg{font-family:var(--font-body);font-weight:var(--font-weight-light);font-size:var(--text-heading-lg);line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg);color:var(--text-primary);margin:0}
.t-heading-sm{font-family:var(--font-display-sans);font-weight:var(--font-weight-w650);font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm);color:var(--text-primary);margin:0}
.t-subheading{font-family:var(--font-body);font-weight:var(--font-weight-regular);font-size:var(--text-subheading);line-height:var(--leading-subheading);color:var(--text-primary);margin:0}
.t-body{font-family:var(--font-body);font-weight:var(--font-weight-light);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);color:var(--text-secondary);margin:0}
.t-body-sm{font-family:var(--font-body);font-weight:var(--font-weight-regular);font-size:var(--text-body-sm);line-height:var(--leading-body-sm);color:var(--text-secondary);margin:0}
.t-eyebrow{font-family:var(--font-mono);font-weight:var(--font-weight-regular);font-size:var(--text-eyebrow);line-height:var(--leading-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary);margin:0}
.t-caption{font-family:var(--font-body);font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--text-tertiary);margin:0}

:root{
/* Spacing scale — measured from source, deliberately not a 4/8 grid */
--spacing-5:5px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-13:13px;
--spacing-14:14px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-28:28px;
--spacing-30:30px;--spacing-40:40px;--spacing-70:70px;--spacing-80:80px;--spacing-90:90px;

/* Layout */
--page-max-width:1200px;
--section-gap:80px;
--card-padding:20px;
--element-gap:16px;
--gutter:40px;
--nav-inset:20px;
/* Asymmetric two-column content rhythm: steps 40% / screenshot 55% */
--col-narrow:40%;
--col-wide:55%
}

:root{
/* Only these five radii exist. Improvised values break coherence. */
--radius-xl:12px;
--radius-2xl:16px;
--radius-2xl-2:20px;
--radius-3xl:24px;
--radius-full:9999px;
/* Named by element */
--radius-cards:12px;
--radius-nav:16px;
--radius-pills:20px;
--radius-panels:24px;
--radius-buttons:9999px
}

:root{
/* Borders are the primary depth cue. Shadows only for floating things. */
--shadow-sm:rgba(0,0,0,0.06) 0px 2px 8px 0px,rgba(0,0,0,0.04) 0px 0px 2px 0px;
--shadow-xl:rgba(0,0,0,0.6) 0px 8px 30px -8px;
/* Reserved for product screenshot windows ONLY (a filter, not box-shadow) */
--shadow-window:drop-shadow(rgba(0,0,0,0.1) 0px 2px 4px) drop-shadow(rgba(0,0,0,0.12) 0px 18px 24px) drop-shadow(rgba(0,0,0,0.18) 0px 40px 64px);
/* Glass */
--blur-glass:12px;
--blur-glass-strong:24px;
}

:root{
/* The brand-defining element. Once per page, max — as a line, never a fill. */
--gradient-spectrum-marquee:linear-gradient(270deg,#fd02f5,#fa3d1d 15.94%,#ffb005 42.76%,#e1e1fe 72.48%,#0358f7 100.02%,#340b05 150.75%);
/* Seamless-loop variant: the same stops run forward then mirrored inside one tile,
   so a scrolling marquee has no hard pink→blue seam where the tile repeats. */
--gradient-spectrum-marquee-loop:linear-gradient(to right,#fd02f5 0%,#fa3d1d 7.97%,#ffb005 21.38%,#e1e1fe 36.24%,#0358f7 50%,#e1e1fe 63.76%,#ffb005 78.62%,#fa3d1d 92.03%,#fd02f5 100%);
/* Decorative 180deg blends: warm stop at 60% → cool stop at 100%.
   Used inside illustrations and background washes only. */
--gradient-creamsicle:linear-gradient(180deg,#ffb005 60%,#fd6f3d 100%);
--gradient-grapefruit:linear-gradient(180deg,#fa3d1d 60%,#fd02f5 100%);
--gradient-cotton-candy:linear-gradient(180deg,#ffd9f7 60%,#e1e1fe 100%);
--gradient-sunshine:linear-gradient(180deg,#ffdc5c 60%,#f2fcb3 100%);
--gradient-twilight:linear-gradient(180deg,#e1e1fe 60%,#0358f7 100%);
--gradient-midnight:linear-gradient(180deg,#340b05 60%,#020204 100%);
--gradient-student:linear-gradient(180deg,#f2fcb3 60%,#0358f7 100%);
}

:root{
/* Things change color, not position. */
--duration-fast:0.2s;
--duration-marquee:14s;
--ease-standard:ease;
--ease-emphasis:cubic-bezier(0.4,0,0.2,1);
--transition-color:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),fill var(--duration-fast) var(--ease-standard),stroke var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);
}
@keyframes tarde-marquee{from{background-position:0% 50%}to{background-position:200% 50%}}
@media (prefers-reduced-motion:reduce){:root{--duration-marquee:0s}}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-paper);color:var(--text-primary);font-family:var(--font-body);font-weight:var(--font-weight-light);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link-color);text-decoration:none;border-bottom:1px solid var(--link-underline);transition:var(--transition-color)}
a:hover{color:var(--link-color-hover);border-bottom-color:var(--link-color-hover)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--color-lime-wash);color:var(--color-pure-black)}
::placeholder{color:var(--text-placeholder)}
:focus-visible{outline:1px solid var(--border-ink);outline-offset:2px}

/* ---- pagina ---- */

    :root { --font-mono: 'Quicksand', 'Nunito', ui-rounded, system-ui, sans-serif; }
    body { margin: 0; background: var(--surface-void); -webkit-font-smoothing: antialiased; }
    .phones a { opacity: 1; transform: scale(1); transform-origin: center top; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1); }
    .herocopy { opacity: var(--copy-o, 1); translate: 0 calc(var(--copy-y, 0) * -40px); pointer-events: var(--copy-pe, auto); }
    .spectrum-text { background-image: linear-gradient(to right, #ff8df9 0%, #ff9b83 7.97%, #ffd77e 21.38%, #f4f4ff 36.24%, #8fb4fb 50%, #f4f4ff 63.76%, #ffd77e 78.62%, #ff9b83 92.03%, #ff8df9 100%); background-size: 200% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: tarde-marquee var(--duration-marquee) linear infinite; }
    .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border-inverse); }
    .herophones { position: absolute; top: 104px; right: 0; bottom: 24px; left: 0; display: flex; align-items: center; justify-content: center;
      opacity: var(--ph-o, 0); translate: 0 calc((1 - var(--ph-o, 0)) * 48px); pointer-events: var(--ph-pe, none); }
    .phones a { position: relative; }
    .phones a:hover { z-index: 10; }
    .phones .device { translate: 0 0; scale: 1; transition: translate 0.26s cubic-bezier(0.2, 0, 0.2, 1), scale 0.26s cubic-bezier(0.2, 0, 0.2, 1), filter 0.26s ease; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    .phones a:hover .device { translate: 0 -14px; scale: 1.04; filter: drop-shadow(0 20px 36px rgba(0,0,0,0.55)); }
    .tipbox { opacity: 0; transition: opacity 0.2s ease, translate 0.2s cubic-bezier(0.2, 0, 0.2, 1); z-index: 5; }
    .phones a:hover .tipbox { opacity: 1; translate: 0 0; }
    /* reveal-on-scroll, carried over from the 2022 site: 20px rise + fade, 0.8s ease-out */
    /* on-load entrance, same 20px rise the 2022 site used, staggered */
    @keyframes riseIn { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
    .intro > * { animation: riseIn 0.8s ease-out both; }
    .intro > *:nth-child(1) { animation-delay: 0.05s; }
    .intro > *:nth-child(2) { animation-delay: 0.14s; }
    .intro > *:nth-child(3) { animation-delay: 0.23s; }
    .intro > *:nth-child(4) { animation-delay: 0.32s; }
    .introfast > * { animation: riseIn 0.6s ease-out both; }
    .introfast > *:nth-child(1) { animation-delay: 0.02s; }
    .introfast > *:nth-child(2) { animation-delay: 0.08s; }
    .introfast > *:nth-child(3) { animation-delay: 0.14s; }
    .introfast > *:nth-child(4) { animation-delay: 0.2s; }
    /* fail-safe: if the frame never advances animation time (throttled tab/preview),
       a timer stamps the finished state so nothing can stay invisible */
    .anim-done .intro > *, .anim-done .introfast > * { animation: none; opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .intro > *, .introfast > * { animation: none; } }
    .rv { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
    .rv.rv-in { opacity: 1; transform: translate3d(0, 0, 0); }
    /* collapse animates max-height (set from the logic) + padding, so the closed
       state is a true zero and opacity is free to fade on its own */
    /* the height is interpolated from the logic on a timer: CSS transitions
       freeze outright in some embedders, which would strand the block half-open */
    .morewrap { max-height: 0; padding-top: 0; overflow: hidden; }
    @media (prefers-reduced-motion: reduce) { .morewrap { transition: none; } }
    @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
    .letter { align-self: flex-start; transform: rotate(0deg) scale(1); filter: drop-shadow(0 6px 18px rgba(0,0,0,0.10)); transition: transform 0.32s cubic-bezier(0.2, 0, 0.2, 1), filter 0.32s ease; }
    .letter:hover { transform: rotate(-0.7deg) scale(1.022); filter: drop-shadow(0 22px 48px rgba(0,0,0,0.22)); }
    .rowstack { position: relative; }
    .sidegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* ---- responsive ---------------------------------------------------- */
    /* screens: three side-by-side devices on paper, a swipeable carousel on phones */
    @media (max-width: 900px) {
      .shots {
        max-width: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: -40px;
        padding-inline: 40px;
        padding-bottom: var(--spacing-10);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }
      .shots::-webkit-scrollbar { display: none; }
      .shots > * { flex: 0 0 66vw !important; scroll-snap-align: center; }
    }
    .ptrack { height: calc(7 * 62vh); }
    .pstick { top: 110px; }
    .pgrid > ol { margin: 0; padding: 0; }
    /* short desktop windows: the vertical step list must not outgrow the fold */
    @media (min-width: 901px) and (max-height: 800px) {
      .pstep { flex-direction: row !important; align-items: baseline; gap: var(--spacing-8) !important;
        padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }
      .pstep .pnum { flex: 0 0 auto; }
    }
    .pstep { border-left: 1px solid var(--border-hairline); transition: var(--transition-color); }
    /* the panel enters from the direction the reader is scrolling */
    /* the board owns its sizing here so the floor can never be beaten by an
       inline min-height:0; the panel grows on short windows instead of clipping */
    /* no height arithmetic: the panel sizes to its content up to a viewport
       ceiling, and the board shrinks from its natural 16:10 to whatever is left */
    .pboard { display: block; flex: 1 1 auto; min-height: 0; aspect-ratio: 16 / 10; }
    .ppanel { animation: pin-down 0.34s cubic-bezier(0.4, 0, 0.2, 1) both; overflow: hidden; }
    /* the copy is never truncated: it takes its natural height and the board
       (floored at 220px) absorbs whatever is left of the panel */
    .ppanel p { flex: 0 0 auto; max-width: 56ch; }
    .ppanel[data-dir="up"] { animation-name: pin-up; }
    @keyframes pin-down { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
    @keyframes pin-up { from { opacity: 0; transform: translateY(-18px) } to { opacity: 1; transform: none } }
    @media (prefers-reduced-motion: reduce) { .ppanel { animation: none } }
    .pstep .pnum { color: var(--text-tertiary); }
    .pstep .pttl { color: var(--text-secondary); font-weight: 400; }
    .pstep:hover .pttl { color: var(--text-primary); }
    .pstep[data-on="true"] { border-left: 1px solid var(--border-ink); }
    .pstep[data-on="true"] .pnum { color: var(--text-primary); }
    .pstep[data-on="true"] .pttl { color: var(--text-primary); font-weight: 500; }
    /* mobile: the steps and the panel are pinned as one unit, so an image never
       travels under the strip — scrolling advances the step in place instead */
    @media (max-width: 900px) {
      .ptrack { height: calc(7 * 58vh); }
      .pstick { top: 76px; }
      .pgrid { grid-template-columns: 1fr !important; gap: var(--spacing-16) !important; }
      .pgrid > ol {
        flex-direction: row !important; gap: var(--spacing-16) !important;
        overflow-x: auto; scrollbar-width: none;
        /* the strip spans the full screen: it bleeds past the page gutter and
           carries its own padding, so a step is never clipped at the edge */
        margin-inline: -40px; padding-inline: 40px;
        scroll-padding-inline: 40px;
      }
      .pgrid > ol::-webkit-scrollbar { display: none; }
      .pstep {
        flex: 0 0 auto;
        border-left: 0 !important; border-bottom: 1px solid var(--border-hairline);
        padding: var(--spacing-8) 0 !important;
      }
      .pstep[data-on="true"] { border-bottom: 1px solid var(--border-ink); }
      .ppanel { max-height: calc(100vh - 200px) !important; }
      .ppanel p { max-width: none; }
    }
    .shotdots { display: none; }
    @media (max-width: 900px) {
      .shotdots { display: flex; gap: 6px; justify-content: center; padding-top: var(--spacing-14); }
      .shotdots > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--border-hairline-strong);
        opacity: 0.35; transition: opacity 0.2s ease; }
      .shotdots > span[data-on] { opacity: 1; }
    }
    /* the bleed can never exceed the section gutter, or the page scrolls sideways */
    @media (max-width: 620px) {
      .shots { margin-inline: -20px; padding-inline: 20px; }
      .pgrid > ol { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
    }
    /* case pages: the label is a marginal note beside its text, not a far-left
       column — no rules, so the two must sit close enough to read as one block */
    :root { --col-narrow: 168px; --col-wide: minmax(0, 1fr); }
    [style*="var(--col-narrow)"] > span:first-child { padding-top: 5px; }
    @media (max-width: 900px) {
      [style*="var(--col-narrow)"] { grid-template-columns: 1fr !important; row-gap: var(--spacing-14); }
      [style*="var(--col-narrow)"] > span:first-child { padding-top: 0; }
    }
    /* the fans only need to go where there is genuinely no room beside a row —
       the one under the section headline has its own, earlier cut-off */
    @media (max-width: 860px) { .stack { display: none; } }
    /* hover panels are pointless on touch */
    @media (max-width: 900px) { .tipbox { display: none !important; } }
    /* project rows: drop the status pill and the arrow, keep icon + text */
    @media (max-width: 760px) {
      a[id^="row-"] { grid-template-columns: 48px minmax(0, 1fr) !important; gap: var(--spacing-14) !important; padding: var(--spacing-14) !important; }
      a[id^="row-"] > *:nth-child(3), a[id^="row-"] > *:nth-child(4) { display: none !important; }
      a[id^="row-"] > *:first-child { width: 48px !important; }
    }
    /* timeline: narrower date column */
    @media (max-width: 760px) {
      [style*="grid-template-columns: 160px 12px 1fr"] { grid-template-columns: 52px 12px minmax(0, 1fr) !important; column-gap: var(--spacing-12) !important; }
      [style*="grid-template-columns: 120px 1fr"] { grid-template-columns: 88px minmax(0, 1fr) !important; }
    }
    /* hero: the sticky phone stage only works where three phones fit side by side.
       Below that the hero becomes a normal, flowing section. */
    /* phones: side by side on desktop, a peeled stack on phones — the stage stays
       sticky and each scroll step takes the front device off the pile */
    @media (max-width: 760px) {
      #hero { height: 400svh !important; }
      /* the stage is clipped, so the pile gets the full height minus the burger
         clearance, and the device is sized from what is left after its caption */
      .herophones {
        top: clamp(66px, 8.5svh, 80px) !important;
        bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
        align-items: flex-start !important;
      }
      .phones { display: block !important; position: relative; height: 100%; padding: 0 !important; }
      .phones > a {
        position: absolute !important;
        left: 50%;
        top: 0;
        transform-origin: center top !important;
        --hero-non-device-h: clamp(202px, 24.5svh, 228px);
        width: min(
          calc(100vw - 36px),
          86vw,
          420px,
          calc((100svh - var(--hero-non-device-h)) / 2.0444)
        ) !important;
        transition: opacity 0.32s ease, translate 0.38s cubic-bezier(0.2, 0, 0.2, 1), scale 0.38s cubic-bezier(0.2, 0, 0.2, 1);
      }
      .phones a > div { width: 100% !important; align-items: center !important; }
      .phones a > div > div:not(.tipbox) { height: auto !important; width: 100% !important; }
      /* the description sits above its own device, as plain text — no glass box */
      .tipbox {
        display: flex !important;
        position: static !important;
        width: min(88vw, 360px) !important;
        align-self: center !important;
        order: -1;
        margin: 0 0 clamp(10px, 1.8svh, 16px) !important;
        padding: 0 !important;
        gap: clamp(4px, 1svh, 8px) !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        text-align: center;
        align-items: center;
        max-height: 168px;
        overflow: hidden;
        opacity: 0;
        translate: none !important;
        transition: opacity 0.3s ease;
      }
      .phones > a[data-front="1"] .tipbox { opacity: 1; }
      /* behind the front device: nudged down and scaled back */
      .phones > a[data-pos="1"] { translate: -50% 20px; scale: 0.95; opacity: 1; z-index: 2; }
      .phones > a[data-pos="2"] { translate: -50% 38px; scale: 0.90; opacity: 1; z-index: 1; }
      .phones > a[data-pos="0"] { translate: -50% 0; scale: 1; opacity: 1; z-index: 3; }
      /* already taken off the pile */
      .phones > a[data-pos="-1"] { translate: -50% -70svh; scale: 0.96; opacity: 0; z-index: 4; pointer-events: none; }
    }
    /* mobile type scale: one step down across the board — the desktop scale is
       built for a 1200px measure and reads oversized on a phone */
    @media (max-width: 760px) {
      :root {
        --text-eyebrow: 11px; --tracking-eyebrow: 1.1px;
        --text-body-sm: 14px;
        --text-body: 16px; --tracking-body: -0.32px;
        --text-body-lg: 17px;
        --text-subheading: 18px;
        --text-heading-sm: 19px; --tracking-heading-sm: -0.57px;
        --text-heading: 30px; --tracking-heading: -1.2px; --leading-heading: 1.15;
        --text-heading-lg: 32px; --tracking-heading-lg: -1.28px;
        --text-display: 54px; --tracking-display: -1.6px;
      }
      .intro h1 { font-size: 48px !important; letter-spacing: -1.5px !important; }
      /* the process pills are a desktop-only flourish; on a phone they cost a
         whole screen of the hero for no new information */
      .steps { display: none !important; }
      /* social links become real tap targets */
      #hero a[href*="github"], #hero a[href*="linkedin"] {
        display: inline-flex !important; align-items: center; height: 44px; padding: 0 var(--spacing-16);
        border: 1px solid var(--border-inverse); border-radius: var(--radius-pills);
        font-size: 14px !important; color: var(--text-inverse) !important; }
      /* the eyebrow rides at header height, hard left */
      .intro > p:first-child { position: absolute !important; top: 34px; left: 20px; margin: 0 !important; }
      /* social buttons centred in the space under the headline, then a single
         footer line: location left, copyright right */
      #hero .herofoot { grid-template-columns: 1fr auto !important; row-gap: var(--spacing-24) !important;
        column-gap: var(--spacing-16) !important; align-items: center !important; }
      #hero .herofoot > div:first-child { grid-column: 1 / -1 !important; justify-self: center !important;
        gap: var(--spacing-12) !important; }
      #hero .herofoot > p:nth-of-type(1) { grid-column: 1 !important; justify-self: start !important; }
      #hero .herofoot > p:nth-of-type(2) { grid-column: 2 !important; justify-self: end !important; text-align: right; }
      .navsheet a { font-size: 30px !important; letter-spacing: -0.9px !important; }
      /* the hero's process pills */
      .steps span { font-size: 10px !important; height: 27px !important; }
    }
    /* no hover states on touch: nothing lifts, tilts or fans */
    @media (hover: none), (max-width: 760px) {
      .sidecard, a[id^="row-"] {
        transform: none !important; scale: none !important; rotate: none !important;
        box-shadow: var(--shadow-sm) !important; }
      /* the postcard is not a rectangle — it keeps its alpha-following drop-shadow */
      .letter { transform: none !important; scale: none !important; rotate: none !important; }
      /* the phones keep translate/scale — that is the stack, not a hover state */
      .phones a { transform: none !important; }
      .letter { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.10)) !important; }
      .stack, .etq-back { display: none !important; }
    }
    /* the postcard has a landscape and a portrait crop; show whichever fits */
    .letter-tall { display: none !important; }
    @media (max-width: 760px) {
      .letter-wide { display: none !important; }
      .letter-tall { display: block !important; max-width: min(420px, 100%) !important; }
    }
    /* header: pill bar on desktop, hamburger below 760 */
    .navmob, .navsheet { display: none; }
    @media (max-width: 760px) {
      nav.navdesk { display: none !important; }
      .navmob { display: flex; position: fixed; top: var(--nav-inset); right: 20px; z-index: 60; }
      .navburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px;
        padding: 0 13px; box-sizing: border-box; background: var(--fill-glass-dark); border: 1px solid var(--border-inverse);
        border-radius: var(--radius-full); box-shadow: var(--shadow-sm); cursor: pointer;
        backdrop-filter: blur(var(--blur-glass-strong)); -webkit-backdrop-filter: blur(var(--blur-glass-strong)); }
      .navburger span { display: block; height: 1.5px; background: var(--text-inverse); border-radius: 2px; }
      .navsheet { position: fixed; inset: 0; z-index: 55; display: flex !important; flex-direction: column; justify-content: center;
        gap: var(--spacing-8); padding: 0 28px; background: rgba(2,2,4,0.94);
        backdrop-filter: blur(var(--blur-glass-strong)); -webkit-backdrop-filter: blur(var(--blur-glass-strong));
        opacity: 0; pointer-events: none; }
      .navsheet.nav-open { opacity: 1; pointer-events: auto; }
      .navsheet a { font-family: var(--font-display-serif); font-weight: 300; font-size: 40px; line-height: 1.2;
        letter-spacing: -1.2px; color: var(--text-inverse); text-decoration: none; padding: var(--spacing-8) 0; cursor: pointer; }
      .navsheet .navlangs { display: flex; gap: var(--spacing-20); margin-top: var(--spacing-24); }
      .navsheet .navlangs a { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--text-inverse-muted); }
      .navsheet .navlangs a.on { color: var(--text-inverse); }
    }
    /* nav stays a single row on small screens — a wrapped 2–3 row pill bar would
       sit on top of the hero copy. The wordmark goes, the pills scroll if needed. */
    @media (max-width: 860px) {
      nav { flex-wrap: nowrap !important; max-width: calc(100vw - 24px) !important; overflow-x: auto !important;
        scrollbar-width: none; gap: var(--spacing-12) !important; padding: var(--spacing-8) var(--spacing-12) !important; }
      nav::-webkit-scrollbar { display: none; }
      nav > a:first-child { display: none !important; }
    }
    @media (max-width: 620px) {
      nav > a:last-child { display: none !important; }
      section { padding-left: 20px !important; padding-right: 20px !important; }
    }
    @media (max-width: 900px) { .sidegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 600px) { .sidegrid { grid-template-columns: 1fr; } }
    .sidewrap { position: relative; display: flex; flex-direction: column; }
    .sidewrap:hover { z-index: 3; }
    .sidecard { flex: 1; box-sizing: border-box; min-height: 132px; transform: rotate(0deg) scale(1);
      transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.28s ease, border-color 0.2s ease; }
    .rowstack { position: relative; }
    .rowstack:has(> a#row-etique) { z-index: 1; }
    /* the first row's fan may cross the section headline — that is accepted */
    .rowstack:has(> a#row-canario) { z-index: 2; }
    .rowstack:has(> a#row-subtract) { z-index: 3; }
    .rowstack:has(> a#row-sleevee) { z-index: 4; }
    .rowstack:has(> a#row-extensionista) { z-index: 5; }
    .rowstack:has(> a#row-anjo) { z-index: 6; }
    /* clip box sits entirely ABOVE the card: bottom edge = card top, so no part of the fan can paint below it */
    .stack { position: absolute; right: 24px; bottom: calc(100% - 16px); width: 400px; height: 194px; overflow: hidden; pointer-events: none; z-index: 0; }
    .stack .ph { position: absolute; left: 0; bottom: -80px; width: 118px; transform-origin: 50% 100%; transform: translate(140px, 180px) rotate(0deg) scale(0.96); transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1); }
    .stack .p1 { z-index: 3; }
    .stack .p2 { z-index: 2; }
    .stack .p3 { z-index: 1; }
    .rowstack:hover .stack .p1 { transform: translate(62px, 4px) rotate(-8deg) scale(1); }
    .rowstack:hover .stack .p2 { transform: translate(140px, -4px) rotate(-2deg) scale(1); transition-delay: 0.03s; }
    .rowstack:hover .stack .p3 { transform: translate(218px, 12px) rotate(6deg) scale(1); transition-delay: 0.06s; }

    /* case hero: one device shot anchored to the right of the copy */
    .caseshot { position: absolute; right: max(40px, calc((100vw - var(--page-max-width)) / 2 + 40px));
      top: 132px; width: 268px; height: auto; pointer-events: none;
      filter: drop-shadow(0 24px 60px rgba(0,0,0,0.7)); }
    /* the Etiquê shot is a bare screen, so it gets the same device frame as the fan */
    div.caseshot { aspect-ratio: 900 / 1840; }
    @media (max-width: 1080px) { .caseshot { top: 150px; } }
    /* the meta pairs fold to 2x2 while the hero shot still occupies the right half */
    @media (max-width: 1140px) and (min-width: 861px) {
      .casemeta { grid-template-columns: repeat(2, minmax(0, 200px)) !important; max-width: 440px; }
    }
    @media (max-width: 860px) { .caseshot, div.caseshot { display: none !important; } }
    /* page transition, carried over from the 2022 site: a void-black curtain
       wipes across, the route changes behind it, then it wipes away */
    .curtain { position: fixed; inset: 0; z-index: 80; background: var(--surface-void);
      display: flex; align-items: center; justify-content: center;
      translate: 0 101%; pointer-events: none; }
    .curtain.cover, .curtain.reveal { transition: translate 0.46s cubic-bezier(0.65, 0, 0.25, 1); }
    .curtain.cover { translate: 0 0; }
    .curtain.reveal { translate: 0 -101%; }
    @media (prefers-reduced-motion: reduce) { .curtain { display: none; } }
    a { color: var(--link-color); text-decoration: none; }
    a:hover { color: var(--link-color-hover); }
    body a { border-bottom: 0; text-decoration: none; }
  
/* ---- componentes do Tarde Design System, portados do _ds_bundle.js -------- */
.ds-pill{display:inline-flex;align-items:center;gap:var(--spacing-8);padding:0 var(--spacing-16);
  background:transparent;color:var(--text-on-glass);border:none;border-radius:var(--radius-pills);
  font-family:var(--font-body);font-size:14px;font-weight:var(--font-weight-regular);line-height:2.4;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:var(--transition-color)}
.ds-pill:hover{background:var(--fill-transparent-hover);color:var(--color-pure-black)}
.ds-pill[data-active]{background:var(--fill-secondary);color:var(--color-pure-black)}
.ds-pill--dark{color:var(--text-inverse-muted)}
.ds-pill--dark:hover{background:rgba(255,255,255,0.08);color:var(--text-inverse)}
.ds-pill--dark[data-active]{background:rgba(255,255,255,0.12);color:var(--text-inverse)}

.ds-tag{display:inline-flex;align-items:center;padding:var(--spacing-8) var(--spacing-16);
  border-radius:var(--radius-full);font-family:var(--font-body);font-size:14px;
  font-weight:var(--font-weight-regular);line-height:1.2;white-space:nowrap;
  transition:var(--transition-color);background:var(--surface-linen);color:var(--text-primary);border:none}
.ds-tag--outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border-hairline)}
.ds-tag--wash{background:var(--surface-wash)}
.ds-tag--warm{background:var(--surface-wash-warm)}
.ds-tag--dark{background:rgba(255,255,255,0.12);color:var(--text-inverse)}

.ds-spectrum{width:100%;height:3px;border-radius:0;
  background-image:var(--gradient-spectrum-marquee-loop);background-size:200% 100%;
  background-repeat:repeat;animation:tarde-marquee var(--duration-marquee) linear infinite}

/* O display:none que o atributo hidden traz vem da folha do navegador e perde
   para o style inline, e quase todo elemento aqui carrega o seu. Sem isto, um
   bloco marcado como hidden continua na tela. */
[hidden]{display:none !important}

/* ---- menu mobile --------------------------------------------------------
   As duas barras se encontram no meio e cruzam: cada uma anda 3.25px, que e
   metade da distancia entre os centros (1.5px de altura + 5px de gap). O
   painel, que ate aqui aparecia seco, entra num fade. */
.navburger span{transition:transform .28s var(--ease-emphasis)}
.navburger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.navburger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.navsheet{transition:opacity .28s var(--ease-standard)}
@media (prefers-reduced-motion:reduce){
  .navburger span,.navsheet{transition:none}
}

/* ---- estados :hover extraidos dos style-hover ---- */
.hv-1:hover{background: var(--fill-secondary) !important}
.hv-2:hover{color: var(--text-inverse) !important}
.hv-3:hover{color: var(--text-inverse) !important}
.hv-4:hover{transform: rotate(-0.7deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-5:hover{transform: rotate(0.5deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-6:hover{transform: rotate(-0.5deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-7:hover{transform: rotate(0.8deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-8:hover{transform: rotate(-0.6deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-9:hover{transform: rotate(0.4deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important;position: relative !important;z-index: 2 !important}
.hv-10:hover{background: var(--surface-linen) !important}
.hv-11:hover{transform: rotate(-0.7deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important}
.hv-12:hover{transform: rotate(0.5deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important}
.hv-13:hover{transform: rotate(-0.5deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important}
.hv-14:hover{transform: rotate(0.8deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important}
.hv-15:hover{transform: rotate(-0.6deg) scale(1.025) !important;box-shadow: var(--shadow-xl) !important}
.hv-16:hover{background: rgba(255,255,255,0.06) !important;border-color: rgba(255,255,255,0.45) !important}
.hv-17:hover{background: rgba(255,255,255,0.06) !important;border-color: rgba(255,255,255,0.45) !important}
.hv-18:hover{background: rgba(255,255,255,0.06) !important;border-color: rgba(255,255,255,0.45) !important}
.hv-19:hover{color: var(--text-inverse) !important}
.hv-20:hover{background: var(--fill-graphite) !important}
.hv-21:hover{background: rgba(255,255,255,0.06) !important}
.hv-22:hover{color: var(--text-inverse) !important}
.hv-23:hover{background: var(--fill-graphite) !important}
.hv-24:hover{background: rgba(255,255,255,0.06) !important}
.hv-25:hover{color: var(--text-inverse) !important}
.hv-26:hover{background: var(--fill-graphite) !important}
.hv-27:hover{background: rgba(255,255,255,0.06) !important}
.hv-28:hover{color: var(--text-inverse) !important}
.hv-29:hover{background: var(--fill-graphite) !important}
.hv-30:hover{background: rgba(255,255,255,0.06) !important}
.hv-31:hover{color: var(--text-inverse) !important}
.hv-32:hover{background: var(--fill-graphite) !important}
.hv-33:hover{background: rgba(255,255,255,0.06) !important}
.hv-34:hover{color: var(--text-inverse) !important}
.hv-35:hover{background: rgba(255,255,255,0.06) !important}