/* ═══════════════════════════════════════════════════════════════════════════
   /pt/ — MODERN TECHNICAL.  Prefix: homept-
   The same system as /pt/pv-mda-ht (css/pvmdahtpt.css), applied to the home
   page. Token block, faces, brand button, hairlines, plates, disclosure rows
   and the whole motion layer are copied from there and re-prefixed — this is
   replication, not a new direction.

   SELF-CONTAINED. The page no longer links /styles.css, /sections.css,
   /css/promo-banner.css or /css/community.css: those five sheets are shared
   with 94 legal pages and ~115 other routes and must stay untouched, so the
   header, the ACDI promo banner, the footer and the form surround are all
   rebuilt here. Only /css/tcb-form.css (the shared capture-form skin, which
   carries its own --f-* tokens) still loads alongside, with its markup
   contract intact.

   The direction, in five rules:
   1. Tone steps, not black. Five neutral surfaces from #08090B to #191D22,
      separated by hairlines. No glow, no drop shadows on chrome.
   2. Green is a rule, a tick, a mark and a small mono label — never a fill,
      never a word inside a headline. The ONE exception is the brand button.
   3. ONE grid: 12 columns, 1180px, a single gutter. Every composition on the
      page places itself on those columns; nothing invents its own measure.
   4. Two families. Inter carries the argument; IBM Plex Mono carries the data
      — eyebrows, roles, the copyright, the technology labels. Both are
      self-hosted from /assets/fonts (Inter OFL, IBM Plex Mono OFL 1.1).
   5. Artwork is cropped and plated, never dropped in at native ratio.

   LOGOS ARE NEVER DIMMED. There is no grayscale(), no saturate(), no opacity
   below 1 and in fact no filter of any kind anywhere in this sheet. Every
   vendor mark, company mark and TCB lockup renders in its own colours. Light
   or mono artwork sits on a neutral plate with a hairline (the marquee chips,
   the technology chips) or in a recessed hairline-framed band (the hiring
   companies row) — the plate does the lifting, never a filter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── faces ────────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/Inter-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-ext-600.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── tokens ───────────────────────────────────────────────────────────────── */
/* Copied VERBATIM from css/pvmdahtpt.css — same 32 names, same 32 values. */
:root{
  --ink:#08090B;          /* page ground                                   */
  --ink-2:#0B0D10;        /* recessed band                                 */
  --surface:#101317;      /* raised panel                                  */
  --surface-2:#161A1F;    /* nested cell / hover                           */
  --surface-3:#191D22;    /* top layer                                     */
  --rule:rgba(255,255,255,.075);
  --rule-2:rgba(255,255,255,.145);
  --fg:#EEF1F4;
  --fg-2:#A6AEB6;
  --fg-3:#767E86;
  --acc:#3BE39C;          /* fine accent only: rules, ticks, marks, labels  */
  --acc-soft:rgba(59,227,156,.34);

  /* the brand green. ONE job on this page: the primary button. It is never a
     headline word, never a panel, never a field of colour. */
  --brand:#00FF95;
  --brand-hi:#5BFFBC;     /* hover — lighter, never a glow                  */
  --brand-lo:#00DD81;     /* pressed                                        */
  --brand-ink:#04231A;    /* the type that sits on it                       */

  --ease:cubic-bezier(.22,.61,.36,1);

  --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --pad:clamp(20px,5vw,48px);
  --gap:clamp(16px,2.2vw,32px);
  --sec:clamp(56px,6.3vw,96px);
  --radius:6px;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* NO-JS FALLBACK ONLY. promo-banner.js measures the rendered bar and overwrites
   scroll-padding-top with the true value — the constant and the real height
   drift as the copy wraps. Do not trust the constant. Declared in a SECOND
   :root block so the 32-token contract above stays byte-identical. */
:root{ --promo-h:60px; }
html{ scroll-padding-top:var(--promo-h); }
.homept-page{
  margin:0;background:var(--ink);color:var(--fg-2);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* zero specificity: a component's own max-width must win over this floor */
:where(.homept-page) :where(img,svg){max-width:100%}
.homept-page p{margin:0}
.homept-page ul,.homept-page ol{margin:0;padding:0;list-style:none}
.homept-page figure,.homept-page blockquote{margin:0}
.homept-page h1,.homept-page h2,.homept-page h3{margin:0;font-weight:600}
.homept-page b,.homept-page strong{font-weight:500;color:var(--fg)}
.homept-page a{color:inherit}
.homept-page button{font:inherit}

/* The programs / Pós-CTA row was hidden 2026-08-09 at Jean's request ("hide
   this section for now"). sections.css carried that rule; this page no longer
   loads sections.css, so the rule is restated here — VERBATIM in effect, not
   a new decision. Unhiding is deleting this rule, nothing else. */
.homept-hidden{display:none !important}
/* the Elementor nesting is kept so no text node moves; the middle boxes just
   stop generating one. */
.homept-contents{display:contents}

/* ── decorative glow artwork ──────────────────────────────────────────────────
   The source page carries two blooms — LUZ1 (a 921px #00FF95 circle, already
   gaussian-blurred inside the SVG) under the hero, and LUZ2 (a 1779px #022945
   ellipse) behind the differentiator matrix. Both are back. LUZ1 is painted as
   a background layer on the hero, and LUZ2 the same way on .homept-unique:
   backgrounds cannot overflow their box, so neither bloom can
   wash over a later section the way a positioned element would, and neither
   needs a clip that would eat the section's opening hairline. */
.homept-decor{display:none}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:2px;
}

/* ── the grid ─────────────────────────────────────────────────────────────── */
.homept-wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.homept-sec > .homept-wrap,
.homept-trust > .homept-wrap,
.homept-hero__grid,
.homept-panel,
.homept-head,
.homept-comm__grid,
.homept-results__head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);
}
/* Zero-specificity reset so a single-class placement rule below always wins —
   at equal weight the full-span default would silently flatten every
   composition on the page. */
:where(
  .homept-sec > .homept-wrap,
  .homept-trust > .homept-wrap,
  .homept-hero__grid,
  .homept-panel,
  .homept-head,
  .homept-comm__grid,
  .homept-results__head
) > *{grid-column:1/-1;min-width:0}

/* Several Elementor wrappers are display:contents, which promotes their
   CHILDREN to grid items while every `>` selector still resolves against the
   DOM parent. So the full-span default above cannot reach them: each top-level
   component claims the full measure by name instead. */
.homept-head,
.homept-cards,
.homept-quotes,
.homept-pills,
.homept-platform,
.homept-logos,
.homept-trust__title,
.homept-results__head{grid-column:1/-1;min-width:0}

/* Positioned unconditionally: the decorative blooms and the bleeding panels are
   placed against their section, and that must hold with JavaScript off (the
   motion layer used to be the only thing that set this).
   Every section is also a clip container. Three compositions deliberately run
   wider than the rail — the founder panel, the platform screenshot and the
   results panel — and the page must still measure exactly one viewport wide.
   The clip edge is the padding box with no margin, so the motion layer's accent
   rule is drawn at top:0 rather than top:-1px; it lands one pixel under the
   section's own hairline instead of on it, and survives the clip. */
.homept-sec{
  position:relative;overflow:clip;
  padding-block:var(--sec) calc(var(--sec) * .8);border-top:1px solid var(--rule);
}
.homept-sec > .homept-wrap{row-gap:var(--s7)}

.homept-stack{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.homept-stack--sm{row-gap:var(--s3)}
.homept-stack--md{row-gap:var(--s4)}
.homept-stack--lg{row-gap:var(--s6)}

[id]{scroll-margin-top:var(--s5)}

/* ── type ─────────────────────────────────────────────────────────────────── */
.homept-h1{
  font-size:clamp(2.2rem,1.35rem + 2.9vw,3.4rem);
  line-height:1.06;letter-spacing:-.033em;font-weight:700;
  color:#C9D1D8;text-wrap:balance;
}
.homept-h2{
  font-size:clamp(1.45rem,1.12rem + 1.1vw,2rem);
  line-height:1.18;letter-spacing:-.021em;font-weight:600;color:#C9D1D8;
}
.homept-h3{
  font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--fg);
}
/* the source marks a fragment of several headings with <b> — here that is the
   brightest tone step, never a colour. */
.homept-h1 b,.homept-h2 b,.homept-h3 b{color:var(--fg);font-weight:700}
.homept-h2 b{font-weight:600}

.homept-lede{font-size:clamp(1rem,.95rem + .25vw,1.14rem);line-height:1.62;color:var(--fg-2);max-width:62ch}
.homept-lede b{color:var(--fg)}

.homept-eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--acc);
}
.homept-hint{font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--fg-3)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.homept-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;background:none;cursor:pointer;
  font-size:.8125rem;font-weight:600;letter-spacing:.015em;line-height:1.2;
  text-align:center;text-decoration:none;
  transition:background-color .16s var(--ease),border-color .16s var(--ease),
             color .16s var(--ease),transform .13s var(--ease);
}
/* THE brand button. Flat green, dark ink, no glow, no offset stamp shadow —
   the weight comes from the colour and the type, not from an effect. */
.homept-cta--primary{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  font-weight:700;letter-spacing:.055em;padding:0 28px;
}
.homept-cta--primary:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.homept-cta--primary:active{background:var(--brand-lo);border-color:var(--brand-lo)}
.homept-cta--primary:focus-visible{outline-color:var(--fg)}
.homept-anim .homept-cta--primary:hover{transform:translateY(-1px)}
.homept-anim .homept-cta--primary:active{transform:translateY(0)}
.homept-cta--ghost{border-color:var(--rule-2);color:var(--fg);letter-spacing:.05em}
.homept-cta--ghost:hover{border-color:#5A636B;background:rgba(255,255,255,.05)}
.homept-cta--ghost:active{background:rgba(255,255,255,.02)}
.homept-cta--ghost svg{flex:0 0 auto}

/* ── plates ───────────────────────────────────────────────────────────────── */
.homept-plate{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--rule);background:#050608;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── the ACDI announcement bar ────────────────────────────────────────────────
   IDENTICAL ON /pt/ AND /en/ — same ground, same steps, same heights, same
   breakpoints; only the words differ. It is the page's one LIVE signal and it
   has to read that way in the first frame, so nothing about it is set in the
   page's quiet grey: a raised ground with an accent wash running off the left
   edge, a green hairline under it instead of the usual white 7.5%, a LIVE chip
   with a pulsing dot, full-strength type, and the system's flat brand button.
   It is announcement, not decoration — no glow, no gradient text, no second
   colour.

   The href, the .promo-banner class and the data- attributes are untouched:
   promo-banner.js forwards every acquisition parameter through this element and
   measures it to set scroll-padding. */
.homept-banner{
  position:sticky;top:0;z-index:1000;
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:8px var(--s4);min-height:var(--promo-h);padding:11px var(--pad);
  /* the wash runs the FULL width and lifts again under the button — the two
     ends are where the eye lands, and a tint that dies at 74% left the right
     two-thirds of the bar reading as page ground, which is exactly the
     "faded" the client saw */
  background-color:var(--surface-3);
  background-image:linear-gradient(90deg,
      rgba(59,227,156,.16) 0%,rgba(59,227,156,.055) 46%,rgba(59,227,156,.095) 100%);
  border-bottom:1px solid rgba(59,227,156,.55);
  color:var(--fg);text-decoration:none;
  font-size:.875rem;line-height:1.4;
  transition:background-color .16s var(--ease);
}
.homept-banner:hover{background-color:#1D2228}
.homept-banner:focus-visible{outline:2px solid var(--fg);outline-offset:-3px}
/* the chip carries a live dot, so "Ao vivo" is a state rather than a label */
.homept-banner__tag{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:3px 10px 3px 8px;border:1px solid rgba(59,227,156,.5);border-radius:3px;
  background:rgba(59,227,156,.18);
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc);line-height:1.35;
}
.homept-banner__tag::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--acc);
}
/* armed by the motion controller only — JS-off and reduced-motion both get a
   still dot, and the chip's geometry never changes either way */
.homept-anim .homept-banner__tag::before{animation:homept-live 2.2s var(--ease) infinite}
@keyframes homept-live{
  0%,100%{box-shadow:0 0 0 0 rgba(59,227,156,.5)}
  70%{box-shadow:0 0 0 5px rgba(59,227,156,0)}
}
/* the argument is carried by weight, not by a second colour */
.homept-banner__text{min-width:0}
.homept-banner__text b{color:var(--fg);font-weight:600}
/* THE brand button, and the only field of brand green above the fold. Flat,
   dark ink, no glow — the primary button from the reference sheet, sized for
   the bar. The whole banner is the link, so this takes its states from the
   anchor and the anchor keeps the focus ring. */
.homept-banner__cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 16px;border-radius:var(--radius);
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;line-height:1.2;white-space:nowrap;
  transition:background-color .16s var(--ease),transform .13s var(--ease);
}
.homept-banner:hover .homept-banner__cta{background:var(--brand-hi)}
.homept-banner:active .homept-banner__cta{background:var(--brand-lo)}
.homept-banner__cta span{transition:transform .16s var(--ease)}
.homept-anim .homept-banner:hover .homept-banner__cta{transform:translateY(-1px)}
.homept-anim .homept-banner:active .homept-banner__cta{transform:translateY(0)}
.homept-anim .homept-banner:hover .homept-banner__cta span{transform:translateX(3px)}

/* ── site header ──────────────────────────────────────────────────────────── */
.homept-header{border-bottom:1px solid var(--rule);background:var(--ink)}
.homept-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--s5);
}
.homept-header__logo{display:inline-flex;align-items:center;min-height:44px}
.homept-header__logo img{display:block;width:clamp(124px,12vw,150px);height:auto}
.homept-header__nav{display:flex;align-items:center;gap:var(--s3)}
.homept-header .homept-cta{min-height:44px;padding:0 20px}

/* ── hero ─────────────────────────────────────────────────────────────────────
   THE BACKDROP IS THE PAGE'S SIGNATURE, and it is back.

   Two layers, both the source's own artwork, both from /assets:
     · 2024_07_H2.avif — the 1920x742 wall of dark technology tiles (Terraform,
       Ansible, AWS, Kubernetes, Git, Docker, Python, Oracle) pinned top-centre
       at its native size, exactly as sections.css pinned it on .ptabout. It is
       already preloaded in <head>, and was preloaded for this and nothing else
       while the redesign left it unpainted.
     · 2024_07_LUZ1.svg — the green bloom, anchored to the BOTTOM edge so it
       washes upward out of the hero. The blur lives inside the SVG (a 134px
       feGaussianBlur), so it renders soft as a background layer with no filter.
   Layer order matters: the glow is declared first so it paints over the wall,
   which is what the source composites. */
.homept-about{
  background:
    /* the wall's last eighth dissolves into the page instead of ending on a
       dead straight seam — on a page built out of hairlines a stray horizontal
       edge reads as a mistake. Same treatment as the /en/ twin. */
    linear-gradient(180deg,rgba(8,9,11,0) 0,rgba(8,9,11,0) 84%,var(--ink) 100%)
      top center / 1920px 742px no-repeat,
    url("/assets/2024_07_H2.avif") top center / auto no-repeat;
}
.homept-hero{
  border-top:0;padding-block:clamp(40px,5vw,72px) calc(var(--sec) * .5);
  background:url("/assets/2024_07_LUZ1.svg") 62% calc(100% + 300px) / 921px 921px no-repeat;
}
.homept-hero__grid{row-gap:var(--s7);align-items:center}
.homept-hero__copy{grid-column:1/span 6;display:grid;row-gap:var(--s5);align-content:center}
/* the ramp's top end is set for a three-word line; this h1 is a full sentence,
   so it steps down one notch rather than running to seven lines. */
.homept-hero .homept-h1{font-size:clamp(1.9rem,1.18rem + 2.3vw,2.7rem)}
.homept-hero__copy .homept-lede{max-width:48ch}
/* UNFRAMED AND BLEEDING, as the source has it. The redesign shrank this render
   into a bordered box inside its grid column; the live page runs it at its
   native 682px and lets it spill past the right-hand rail. The mockup carries
   its own dark ground, so no plate is needed and none is drawn. */
.homept-hero__art{
  grid-column:7/-1;justify-self:end;
  width:682px;max-width:none;margin-right:calc(var(--pad) * -1);
}
.homept-hero__art img{
  display:block;width:682px;max-width:none;height:auto;
  filter:drop-shadow(0 38px 64px rgba(0,0,0,.62));
}

/* ── vendor marquee ───────────────────────────────────────────────────────────
   Every mark in its own colours, at full opacity, on the recessed band. These
   particular SVGs already CARRY their plate — each one is a dark rounded chip
   with the vendor mark and its label drawn inside — so adding a second frame
   around them just double-boxed every logo. The band is the plate. */
.homept-marquee{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  /* translucent, so the tile wall keeps running behind the band instead of
     being capped by an opaque lid */
  background:rgba(11,13,16,.62);overflow:hidden;padding-block:var(--s5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.homept-marquee__track{display:flex;width:max-content;gap:var(--s5)}
.homept-anim .homept-marquee__track{animation:homept-slide 46s linear infinite}
.homept-marquee:hover .homept-marquee__track{animation-play-state:paused}
.homept-marquee__row{display:flex;align-items:center;gap:var(--s5)}
.homept-marquee__row li{flex:0 0 auto;display:grid;place-items:center;height:52px}
.homept-marquee__row img{display:block;width:auto;height:42px}
@keyframes homept-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--s5) / 2)),0,0)}}

/* ── founder panel ────────────────────────────────────────────────────────────
   THE PAINTED PANEL IS BACK. On the live page this is a 1518px box that bleeds
   39px past a 1440 viewport, on #141414, ringed in a #68DAA5 hairline, with
   2024_07_F1.svg — the pair of long green chevrons that sweep in from both
   edges — pinned top-centre at its native 1518x600. The redesign dropped the
   artwork, the bleed and the ring, and boxed the founder into a cropped plate.
   All four are restored; only the type stays on the new ramp.
   The panel is itself a .homept-wrap, so its measure is overridden here rather
   than by adding a wrapper. */
.homept-panel{
  row-gap:var(--s6);align-items:center;
  /* 1518px live, and the live bleed is 39px per side at 1440. Written as a
     min() so the bleed stays 39px per side at every desktop width instead of
     collapsing at one breakpoint and swallowing 138px at the next. */
  width:min(1518px,calc(100% + 78px));max-width:none;min-height:600px;
  margin-left:calc((100% - min(1518px,calc(100% + 78px))) / 2);
  padding:21px clamp(24px,13.9vw,200px) 0;   /* live inset; the photo fills the rest */
  border:1px solid #68DAA5;border-radius:24px;
  background:#141414 url("/assets/2024_07_F1.svg") top center / 1518px 600px no-repeat;
}
/* the founder is a cut-out on the panel, never a cropped tile */
.homept-panel__photo{grid-column:1/span 5;justify-self:center}
.homept-panel__photo img{display:block;width:464px;max-width:100%;height:auto}
/* the panel already has its own green edge around it; a second rule inside it
   is one accessory too many */
.homept-panel__quote{
  grid-column:7/-1;display:grid;row-gap:var(--s5);align-content:center;max-width:54ch;
}
.homept-quotemark img{display:block;width:150px;height:auto}
.homept-panel__text{
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.6;
  color:var(--fg-2);letter-spacing:-.004em;
}
.homept-panel__text b{color:var(--fg);font-weight:500}

/* ── head shape ───────────────────────────────────────────────────────────────
   A head with prose behind it opens across the grid: the heading holds columns
   1-4, the argument runs in 5-12. A head that only labels a grid stays on one
   line. Those are the only two head shapes on the page. */
/* descendant, not child: one of the three heads keeps an Elementor
   display:contents wrapper between itself and its heading. */
.homept-head{row-gap:var(--s4)}
.homept-head .homept-h2{grid-column:1/span 4;grid-row:1}
.homept-head p{grid-column:5/-1;grid-row:1}
.homept-head .homept-h2 br{display:none}

/* ── card matrix (differentiators, TPI pillars) ───────────────────────────────
   One matrix, hairline cells, one row per card so the eye can count. */
.homept-cards{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.homept-card{background:var(--ink);display:grid;grid-template-rows:auto minmax(0,1fr);align-content:start}
.homept-card__media{
  position:relative;overflow:hidden;background:#050608;
  border-bottom:1px solid var(--rule);aspect-ratio:382/160;
}
.homept-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.homept-card__body{padding:var(--s5);display:grid;row-gap:var(--s3);align-content:start}
.homept-card__desc{font-size:.875rem;line-height:1.55;color:var(--fg-2)}

/* EACH CARD KEEPS ITS OWN COLOUR — the six live values, in the live order, and
   the first three again on the TPI pillars exactly as the source repeats them.
   This is not new colour: every card's artwork is already drawn as a glowing
   line-icon in precisely this hue, and the redesign greyed the titles off the
   artwork they belong to. It stays a MARK, never a fill. */
.homept-cards > :nth-child(1) .homept-h3{color:#00FF95}
.homept-cards > :nth-child(2) .homept-h3{color:#00FFE0}
.homept-cards > :nth-child(3) .homept-h3{color:#E5C430}
.homept-cards > :nth-child(4) .homept-h3{color:#8439FF}
.homept-cards > :nth-child(5) .homept-h3{color:#FF8A00}
.homept-cards > :nth-child(6) .homept-h3{color:#00EB84}

/* The differentiator matrix sits ON the LUZ2 bloom, so its cells are
   translucent — the live cards are rgba(28,28,29,.6) for the same reason. The
   hairline grid is unchanged; only the fill lets the blue through. */
.homept-unique{
  background:url("/assets/2024_07_LUZ2.svg") center 58% / 1779px 1397px no-repeat;
}
.homept-unique .homept-cards{background:rgba(255,255,255,.06)}
.homept-unique .homept-card{background:rgba(9,11,14,.72)}
.homept-unique .homept-card__media{background:rgba(5,6,8,.72)}

/* ── hiring companies ─────────────────────────────────────────────────────────
   The marks are one mono grey family drawn for a dark ground, so the plate is
   the RECESSED BAND itself — hairline top and bottom — and every mark keeps
   its own artwork untouched. A lighter chip would erase the darker wordmarks
   and a filter is banned outright. */
/* The title sits on the page ground and only the STRIP is a band — the same
   shape the vendor marquee has, and the same one /en/ uses. Unlike the vendor
   lock-ups these marks are bare artwork, so each gets the system's plate: a
   NEUTRAL DARK cell with a hairline. Dark, because every one of them is drawn
   for a dark ground — a light chip would erase the white IBM / Deloitte / Red
   Hat lock-ups. Nothing here dims them: no grayscale, no saturate, no reduced
   opacity; the greys are in the artwork itself. */
.homept-trust{padding-block:calc(var(--sec) * .68) calc(var(--sec) * .56);border-top:1px solid var(--rule)}
.homept-trust > .homept-wrap{display:block}
.homept-trust__title{
  font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);font-weight:600;
  letter-spacing:-.012em;line-height:1.3;color:#C9D1D8;
}
.homept-logos{
  margin-top:var(--s5);overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ink-2);padding-block:var(--s5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.homept-logos__track{display:flex;width:max-content;gap:var(--s4)}
.homept-anim .homept-logos__track{animation:homept-logoslide 52s linear infinite}
.homept-logos:hover .homept-logos__track{animation-play-state:paused}
.homept-logos__set{display:flex;align-items:center;gap:var(--s4)}
/* Light cell. The old note here said dark, because the old marks were a grey
   family drawn for a dark ground. They are official colour lock-ups now —
   Apple, Deloitte, Walt Disney World and Nokia are black wordmarks — so a dark
   chip would erase them. Same #F2F2F2 the v2 pages use. */
.homept-logo{
  flex:0 0 auto;display:grid;place-items:center;width:152px;height:72px;
  border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);background:#F2F2F2;
  padding:0 var(--s4);
}
.homept-logo img{display:block;width:auto;max-height:44px}
/* The hiring belt now sits directly under the hero, and the two paddings
   stacked to about 200px of empty black between the lede and this heading.
   Tightened here rather than on the hero, which still needs its own breathing
   room where it appears elsewhere. */
.homept-trust{padding-top:var(--s5)}
@keyframes homept-logoslide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--s4) / 2)),0,0)}}

/* ── mission ──────────────────────────────────────────────────────────────────
   2024_07_H3-copiar.avif — the blue particle-mesh wave — is pinned to the
   BOTTOM of this section at its native 1920x1263, which is where the live page
   puts it. It is the ground the pillars stand on, and the redesign left the
   section flat black. */
.homept-mission{
  background:url("/assets/2024_07_H3-copiar.avif") bottom center / auto no-repeat;
}
/* THE SCREENSHOT BLEEDS. Live it runs 600px past the rail on each side at its
   native 1906px, and pulls the pillars up under its faded bottom edge. The
   redesign cropped it into a 16:9 plate inside the rail, which is what made it
   read as a small framed thumbnail. */
.homept-platform{
  position:relative;
  width:calc(100% + 1200px);margin-left:-600px;margin-bottom:-96px;
  text-align:center;
}
.homept-platform__shot{display:inline-block;width:1906px;max-width:100%;height:auto}
.homept-platform__float{position:absolute;display:block}
.homept-platform__float img{display:block;width:100%;height:auto}
/* Both overlays are anchored to the READING RAIL, not to the bleeding box, so
   they stay in the column the visitor is reading at every width — which is what
   the live page's measured positions amount to (the badge lands exactly on the
   rail's left edge at 1440). The rail sits 600px inside the bleed, hence the
   600px origins; the quality menu is pulled back by the page gutter so its
   right edge lands on the wrap edge instead of running off screen on a narrow
   desktop. Same side, same size and same order as the source: quality menu
   right, audiovisual badge left. The redesign had them swapped. */
.homept-platform__float--quality{right:calc(600px - var(--pad));top:138px;width:180px}
.homept-platform__float--quality img{border-radius:10px;box-shadow:-16px 6px 32px 0 rgba(0,0,0,.85)}
.homept-platform__float--badge{left:600px;top:252px;width:292px}
.homept-platform__float--badge img{box-shadow:0 3.76px 3.76px 0 rgba(0,0,0,.25)}

/* ── free community ───────────────────────────────────────────────────────── */
.homept-comm__grid{row-gap:var(--s6);align-items:start}
.homept-comm__copy{grid-column:1/span 6;display:grid;row-gap:var(--s5);align-content:start}
.homept-comm__copy .homept-h2 em{font-style:normal;color:var(--fg)}
.homept-comm__desc{max-width:52ch}
.homept-perks{display:grid;max-width:52ch}
.homept-perks li{
  position:relative;padding:11px 0 11px 20px;border-top:1px solid var(--rule);
  font-size:.9375rem;line-height:1.55;color:var(--fg-2);
}
.homept-perks li:first-child{border-top:0}
.homept-perks li::before{
  content:"";position:absolute;left:0;top:21px;width:9px;height:1px;background:var(--acc);
}
.homept-perks li:first-child::before{top:20px}
.homept-comm__card{
  grid-column:8/-1;display:grid;row-gap:var(--s4);align-content:start;
  padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--rule);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0)),var(--surface);
}
.homept-comm__cardtitle{font-size:.9375rem;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.homept-comm__cardsub{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--fg-3);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule);margin-top:calc(var(--s3) * -1);
}
/* fields: the arrival of a focus state, never the focus ring itself */
.homept-comm__card .tcb-input,
.homept-comm__card .tcb-select{transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}

/* THE FORM'S ACCENT COLOUR, restored. The shared .tcb-* skin is built for the
   pc-acd* funnels, whose CTA is purple (#6666FF) with a purple glow;
   /css/community.css recoloured it green for the home pages. This page dropped
   that sheet in the rebuild and nobody restated the override, so the single
   conversion button on the page — and its focus rings and field carets — came
   back purple on an otherwise green page. Restated here on the approved
   tokens, so it is now literally the same brand button as the banner. */
.homept-comm__form .tcb-cta{
  background-color:var(--brand);background-image:none;box-shadow:none;
  color:var(--brand-ink);border-radius:var(--radius);
  font-weight:700;letter-spacing:.055em;
  transition:background-color .16s var(--ease);
}
.homept-comm__form .tcb-cta:hover{background-color:var(--brand-hi);filter:none}
.homept-comm__form .tcb-cta:active{background-color:var(--brand-lo);transform:none}
.homept-comm__form .tcb-input:focus,
.homept-comm__form .tcb-select:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-soft)}
.homept-comm__form .tcb-label i{color:var(--acc)}
.homept-comm__form .tcb-tel .tel__country:hover{background:rgba(59,227,156,.10)}

/* ── results ──────────────────────────────────────────────────────────────────
   THE ONE LIGHT GROUND ON THE PAGE, restored. The live page paints this whole
   block on a 1800px #DCDCDC panel that bleeds 180px past a 1440 viewport, with
   the testimonials as #F2F2F2 cards inside it. The redesign kept a #DCDCDC chip
   behind the lockup alone — the tell that the panel had been there — and turned
   the rest back into dark cells, so the page lost its only change of key.
   The whole block inverts: the type ramp, the hairlines and the motion are the
   new system's, the ground and the bleed are the source's. */
/* Same measure, same bleed, same radius as the /en/ twin. */
.homept-results__panel{
  grid-column:1/-1;min-width:0;
  display:grid;row-gap:var(--s7);
  width:min(1800px,calc(100vw + 78px));max-width:none;
  margin-left:calc((100% - min(1800px,calc(100vw + 78px))) / 2);
  padding:clamp(40px,5vw,80px) clamp(24px,6.6vw,120px);
  border-radius:40px;background:#DCDCDC;
}
/* the head sits centred on paper: the lock-up over the line, not beside it */
.homept-results__head{
  display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;row-gap:var(--s4);
}
/* The lockup is the variant drawn for a LIGHT ground — its wordmark is black —
   so on the restored panel it needs no plate at all. Never recoloured, never
   dimmed, and now sitting on the tone it was drawn for. */
.homept-results__brand{grid-column:auto;justify-self:center}
.homept-results__brand img{display:block;width:100%;max-width:200px;height:auto}
.homept-results__copy{grid-column:auto;display:grid;row-gap:var(--s4);justify-items:center}

/* dark-on-light, same ramp */
.homept-results__panel .homept-h2{color:#111417}
.homept-results__panel .homept-lede{color:#3A4046;max-width:74ch}

/* On the light panel the testimonial cells are the live #F2F2F2 and every
   hairline flips to a black-alpha of the same weight. Three cards with air
   between them, not a 1px matrix: a hairline grid drawn on paper reads as a
   table, not as testimony. Same call as the /en/ twin. */
.homept-quotes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);
}
.homept-quote{
  background:#F2F2F2;border-radius:20px;padding:var(--s6) var(--s5);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;row-gap:var(--s5);align-content:start;
}
.homept-quote__person{border-top-color:rgba(0,0,0,.12)}
.homept-quote__avatar img{border-color:rgba(0,0,0,.18)}
.homept-quote__mark img{display:block;width:20px;height:auto}
.homept-quote__text{font-size:.9375rem;line-height:1.6;color:#2A3036}
/* three grid items, not two: the Elementor wrappers between them are
   display:contents, so figure / h3 / p all land here and each is placed.
   The hairline is BLACK-alpha: this block sits on paper, and the shorthand
   here used to reset the black-alpha colour declared above it. */
.homept-quote__person{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;row-gap:1px;align-items:center;
  padding-top:var(--s4);border-top:1px solid rgba(0,0,0,.12);
}
.homept-quote__avatar{grid-column:1;grid-row:1/span 2;align-self:center}
.homept-quote__name{grid-column:2;grid-row:1}
.homept-quote__role{grid-column:2;grid-row:2}
.homept-quote__avatar img{
  display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(0,0,0,.18);
}
.homept-quote__name{font-size:.9375rem;font-weight:600;line-height:1.3;color:#111417}
.homept-quote__role{font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;line-height:1.5;color:#5B6169}

/* ── the technology register ──────────────────────────────────────────────────
   21 marks, in the chip language of /pt/pv-starter/: every mark in ITS OWN
   COLOURS on a neutral plate with a hairline, under a mono uppercase label.
   Most of this artwork is drawn for a dark ground — AWS, ChatGPT, Ansible and
   Anthropic are white-on-transparent — so the plate is dark and the mark is
   left completely untouched: no grayscale, no saturate, no reduced opacity, no
   filter of any kind.
   Seven columns divide 21 exactly. Below that the chip turns on its side, so a
   wide cell still reads dense instead of stranding a 52px plate in the middle
   of it, and the odd last cell takes the whole row rather than leaving a hole
   in the matrix. */
.homept-pills{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  background:var(--ink);
}
.homept-pill{
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  padding:var(--s5) var(--s3);
  display:grid;justify-items:center;align-content:start;row-gap:10px;text-align:center;
  font-family:var(--mono);font-size:.75rem;font-weight:500;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.homept-pill:nth-child(-n+7){border-top:0}
.homept-pill:nth-child(7n+1){border-left:0}
.homept-pill:hover{background:var(--surface-2);color:var(--fg-2)}
.homept-pill__plate{
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);
  transition:border-color .16s var(--ease),background-color .16s var(--ease);
}
.homept-pill:hover .homept-pill__plate{border-color:var(--rule-2);background:var(--surface-3)}
.homept-pill__logo{display:block;width:auto;height:26px;max-width:34px}
.homept-pill__label{display:block;min-width:0;overflow-wrap:anywhere}

/* ── footer ───────────────────────────────────────────────────────────────── */
.homept-foot{border-top:1px solid var(--rule);padding-block:var(--s7);background:var(--ink-2)}
.homept-foot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);justify-content:space-between}
.homept-foot__logo{width:132px;height:auto;display:block}
.homept-foot__copy{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--fg-3)}
.homept-foot__top{
  display:inline-flex;align-items:center;gap:9px;min-height:40px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);text-decoration:none;transition:color .16s;
}
.homept-foot__top:hover{color:var(--fg)}
.homept-foot__top svg{width:9px;height:11px;fill:currentColor}

/* Narrow: the bar is STICKY, so its height is viewport the visitor never gets
   back. Three wrapped flex lines cost 135px against the 73px it used to be, so
   below 900 it becomes an explicit two-row grid — chip and copy on one line,
   the button under them — and lands at ~90px. Measured at 1440/900/768/430/
   390/360, not assumed. */
@media (max-width:900px){
  .homept-banner{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:8px var(--s3);padding-block:10px;
    justify-content:start;align-items:center;text-align:left;font-size:.8125rem;
  }
  .homept-banner__tag{grid-column:1;grid-row:1;padding:2px 8px;letter-spacing:.1em}
  .homept-banner__text{grid-column:2;grid-row:1;line-height:1.35}
  .homept-banner__cta{grid-column:1/-1;grid-row:2;justify-self:start;min-height:34px;padding:0 14px}
}
@media (max-width:430px){
  .homept-banner{font-size:.75rem;gap:7px 10px;padding-block:9px}
}

/* ── ≤1023px: the grid collapses, the compositions stack ──────────────────── */
@media (max-width:1023px){
  .homept-hero__copy,.homept-hero__art,
  .homept-panel__photo,.homept-panel__quote,
  .homept-comm__copy,.homept-comm__card,
  .homept-results__brand,.homept-results__copy{grid-column:1/-1}
  .homept-head .homept-h2,.homept-head p{grid-column:1/-1;grid-row:auto}
  /* the render still runs at its own size and still bleeds right; it just has
     no column left to bleed out of, so it is clamped to the rail + the gutter */
  .homept-hero__art{justify-self:start;width:auto;max-width:calc(100% + var(--pad));margin-right:0}
  .homept-hero__art img{width:682px;max-width:100%}
  /* the panel stops bleeding and takes the page gutter, exactly as live does —
     never the viewport edge, which would cut its own rounded ring in half */
  .homept-panel{
    width:auto;max-width:none;min-height:0;
    margin-inline:var(--pad);padding:var(--s6) var(--s5) 0;
    border-radius:20px;background-size:cover;
  }
  .homept-panel__photo{justify-self:start}
  .homept-panel__photo img{width:100%;max-width:520px}
  /* Once the rail is narrow the panel stops bleeding and sits ON it, corners
     showing. A bleed here costs more than it buys: the panel's own padding is
     all that keeps the heading and the cards off the screen edge. */
  .homept-results__panel{
    width:100%;max-width:none;margin-left:0;
    padding:var(--s7) var(--s5);border-radius:28px;row-gap:var(--s6);
  }
  .homept-results__brand img{max-width:168px}
  .homept-quote{padding:var(--s5)}
  .homept-cards,.homept-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* three pillars in a two-column matrix leave a hole that reads as a missing
     cell: they keep three narrow columns instead. Same call as the /en/ twin. */
  .homept-mission .homept-cards{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
  /* stacked, the card leads with what it SAYS and closes on the portrait — the
     right order on a narrow rail: a full-height face ahead of the quote pushes
     the argument off the first screen. Same call as the /en/ twin. */
  .homept-panel__quote{order:1}
  .homept-panel__photo{order:2}
  /* three testimonials in a two-column matrix leave a hole that reads as a
     missing cell: the odd one takes the whole last row */
  .homept-quotes > .homept-quote:last-child{grid-column:1/-1}
  /* 21 chips: three across divides exactly, so no cell is ever stranded and no
     label is ever squeezed into a mid-word break. The chip keeps ONE shape. */
  .homept-pills{grid-template-columns:repeat(3,minmax(0,1fr))}
  .homept-pill:nth-child(-n+7){border-top:1px solid var(--rule)}
  .homept-pill:nth-child(7n+1){border-left:1px solid var(--rule)}
  .homept-pill:nth-child(-n+3){border-top:0}
  .homept-pill:nth-child(3n+1){border-left:0}
  /* half the bleed, half the offsets — the live tablet step */
  .homept-platform{width:calc(100% + 600px);margin-left:-300px;margin-bottom:-64px}
  .homept-platform__float--quality{right:calc(300px - var(--pad));top:103px;width:124px}
  .homept-platform__float--badge{left:300px;top:184px;width:158px}
}

/* ── ≤767px ───────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .homept-sec > .homept-wrap{row-gap:var(--s6)}
  .homept-header__inner{padding-block:var(--s4)}
  .homept-banner{padding-inline:var(--pad)}
  /* the tile wall and the mesh are both authored at 1920 — scale them to the
     viewport so the tiles and the wave stay legible instead of being cropped
     to one corner. Live does the same on .ptmission at this breakpoint. */
  .homept-about{background-size:1200px 464px,1200px auto}
  .homept-hero{background-size:660px 660px}
  .homept-mission{background-size:1200px auto}
  .homept-panel{padding:var(--s5) var(--s4) 0}
  .homept-cards,.homept-quotes{grid-template-columns:minmax(0,1fr)}
  .homept-quotes > .homept-quote:last-child{grid-column:auto}
  .homept-pill{padding:var(--s4) var(--s2);letter-spacing:.04em}
  .homept-pill__plate{width:46px;height:46px}
  .homept-results__panel{padding:var(--s6) var(--s4);border-radius:20px}
  .homept-platform{width:calc(100% + 452px);margin-left:-226px;margin-bottom:-32px}
  .homept-platform__float--quality{right:calc(226px - var(--pad));top:57px;width:56px}
  .homept-platform__float--badge{left:226px;top:92px;width:101px}
  .homept-marquee__row li{height:44px}
  .homept-marquee__row img{height:36px}
  .homept-logo{width:124px;height:56px}
  .homept-comm__card{padding:var(--s5) var(--s4) var(--s4)}
  .homept-foot__inner{gap:var(--s4);justify-content:center;text-align:center}
  /* elementor-hidden-mobile — the footer lockup is hidden below 768 on the
     live site and stays hidden here. */
  .homept-foot__logo{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION
   Copied from css/pvmdahtpt.css and re-prefixed. Nothing here is a resting
   state. The controller adds .homept-anim to <html> and sets [data-rv] on the
   elements it will move — with JavaScript off, or with prefers-reduced-motion,
   neither exists and the page is simply the page. Only transform and opacity
   are animated, so nothing reflows and cumulative layout shift stays at zero.
   ═══════════════════════════════════════════════════════════════════════════ */
.homept-anim{scroll-behavior:smooth}

/* scroll entrance — 320ms, one direction, once */
.homept-anim [data-rv]{opacity:0;transform:translate3d(0,12px,0)}
.homept-anim [data-rv].is-in{
  opacity:1;transform:none;
  transition:opacity .32s var(--ease) var(--rv-d,0ms),transform .32s var(--ease) var(--rv-d,0ms);
}
/* the hero arrives on load, a little shorter and a little tighter */
.homept-anim [data-rv="hero"]{transform:translate3d(0,10px,0)}
.homept-anim [data-rv="hero"].is-in{
  transition:opacity .3s var(--ease) var(--rv-d,0ms),transform .3s var(--ease) var(--rv-d,0ms);
}

/* THE signature: the hairline that opens each section draws itself in from the
   left as the section arrives. One gesture, used once per section, in accent —
   it is the page's own rule, not a new decoration. */
.homept-anim .homept-sec:not(.homept-hero),
.homept-anim .homept-trust{position:relative}
.homept-anim .homept-sec:not(.homept-hero)::before,
.homept-anim .homept-trust::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--acc-soft),rgba(59,227,156,0) 58%);
  transform:scaleX(0);transform-origin:0 50%;
}
.homept-anim .is-ruled::before{transform:scaleX(1);transition:transform .4s var(--ease)}
.homept-anim .homept-results.is-ruled::before{opacity:.34}

/* ── OFF. Every reveal resolved, every transition dropped, no smooth scroll. ── */
@media (prefers-reduced-motion:reduce){
  html,.homept-anim{scroll-behavior:auto !important}
  .homept-page *,.homept-page *::before,.homept-page *::after{
    transition:none !important;animation:none !important;
  }
  [data-rv]{opacity:1 !important;transform:none !important}
  .homept-anim .homept-sec::before,.homept-anim .homept-trust::before{transform:scaleX(1) !important}
  .homept-anim .homept-cta--primary:hover{transform:none}
  .homept-marquee__track,.homept-logos__track{animation:none !important}
}


/* ── Type floor inside the community form ────────────────────────────────────
   tcb-form.css is shared by 100+ pages and may not be edited here, but it sets
   .tcb-label at 11.5px and the phone widget's chips at 11px/10px — below the
   12px floor the rest of this page holds. The EN twin already overrides these
   locally; PT did not, which left 10 labels under the floor. Same fix, same
   place: this page's own sheet, never the shared skin. */
.homept-comm__form.homept-comm__form .tcb-label{font-size:12px}
.homept-comm__form .tel__flag{font-size:12px}
.homept-comm__form .tel__caret{font-size:12px}


/* ── Belt items ──────────────────────────────────────────────────────────────
   The belt used to be eleven pre-made 214x42 lockup SVGs; only eleven of those
   exist, so it could never show the full stack. It is now built from the same
   marks as the technology register below it, which covers all 21 — one source
   of truth for the artwork, and the two can no longer drift apart.
   Laid out inline here rather than as register cells: no borders, no grid, just
   mark + label riding the track. */
/* the row rule `.homept-marq__row li` is more specific, so the belt item
   must match at least as strongly or it inherits display:grid */
.homept-marq__row li.homept-pill--belt,
.homept-marquee__row li.homept-pill--belt,
.homept-pill--belt{
  display:flex;align-items:center;gap:var(--s3);
  border:0;background:none;padding:0;height:auto;
  white-space:nowrap;
}
.homept-pill--belt:hover{background:none}
/* Belt marks sit on a transparent ground — the tile's fill and hairline are
   dropped here and ONLY here, scoped to --belt, because .homept-pill__plate is
   also used outside the belt and must keep its tile there. */
.homept-pill--belt .homept-pill__plate{
  width:42px;height:42px;flex:0 0 42px;border:0;background:none;border-radius:0;
}
.homept-pill--belt .homept-pill__logo{height:28px;max-width:34px}
.homept-pill--belt .homept-pill__label{
  font-size:.75rem;letter-spacing:.09em;overflow-wrap:normal;
}
@media (max-width:767px){
  .homept-pill--belt .homept-pill__plate{width:36px;height:36px;flex:0 0 36px}
  .homept-pill--belt .homept-pill__logo{height:19px;max-width:22px}
  .homept-pill--belt .homept-pill__label{font-size:.6875rem}
}


/* ── Three-pillar grid: never leave a dead cell ──────────────────────────────
   The block holds exactly THREE items, so `auto-fit` is the wrong tool: it
   packs as many 196px tracks as fit and produced a 2-up at 480-640 (PT) and a
   4-up at 920-1023 (both languages), each leaving an empty cell with the
   section's background showing through it.
   Three items want three states and nothing in between: 1 up to 767, 3 above.
   Declared with the section in the selector so it beats the generic
   `.homept-cards` / `.homept-pillars` rules, which is what let auto-fit through on PT
   below 767 in the first place. */
@media (max-width:767px){
  .homept-mission .homept-cards{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px){
  .homept-mission .homept-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}