@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Homepage (EN + PT). Graphite and copper on zinc neutrals, per the September 2026 identity.
   Contrast (WCAG 2.x): body #3F3F46 on white 10.4:1; muted #71717A on white 4.83:1, on #FAFAFA 4.63:1;
   copper text #9E4B2B on white 6.01:1; white on copper button #B85C38 4.54:1.
   Dark: body #E4E4E7 on #27272A 11.7:1; muted #A1A1AA on #1F1F22 6.41:1, on #2F2F33 5.2:1;
   copper text #E0916B on #2F2F33 5.35:1, on #1C1C1F 6.83:1. */
:root{
  --graphite:#27272A;--copper:#B85C38;--copper-hover:#9E4B2B;--copper-ink:#9E4B2B;
  --paper:#FFFFFF;--surface-alt:#FAFAFA;--card:#FFFFFF;--well:#FAFAFA;
  --ink:#27272A;--body:#3F3F46;--muted:#71717A;--line:#E4E4E7;--outline:#27272A;
  --band:#27272A;--band-ink:#FFFFFF;--band-text:#D4D4D8;--band-link:#E0916B;
  --shot-shadow:0 18px 40px -16px rgba(24,24,27,.35);
  --font:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color-scheme:light
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--body);font:400 1rem/1.7 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{color:var(--ink);line-height:1.15;letter-spacing:0}
/* The scale is site.css's: the home hero is its largest step. */
h1{font-size:var(--fs-display);font-weight:800;line-height:1.1}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:1.35rem;font-weight:700}
a{color:inherit;text-underline-offset:4px}
a:hover{color:var(--copper-ink)}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.container{width:min(1200px,100%);padding-inline:32px;margin-inline:auto}

/* Shared controls. Every interactive element is at least 44px tall. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;font-size:.95rem;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:background-color .15s,border-color .15s,color .15s}
.button-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.button-primary:hover{background:var(--btn-primary-hover);color:var(--btn-primary-fg)}
.button-secondary{background:transparent;color:var(--ink);border-color:var(--outline)}
.button-secondary:hover{color:var(--copper-ink);border-color:var(--copper)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px}
.text-link:hover{color:var(--copper-ink)}

/* Hero: copy left, product visual right from 900px. */
.hero{padding:56px 0 72px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:40px}
.eyebrow{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:16px}
.eyebrow i{font-style:normal;color:var(--copper)}
.hero h1{max-width:600px;text-wrap:balance}
.hero .lead{max-width:580px;font-size:1.1rem;margin-top:20px}
.price-chip{display:inline-block;margin-top:24px;padding:12px 16px;background:var(--surface-alt);border:1px solid var(--line);border-radius:8px}
.price-line{display:flex;flex-wrap:wrap;gap:2px 20px;font-size:1rem;font-weight:600;line-height:1.6;color:var(--ink)}
.price-line strong{font-weight:600}
.price-line span span{font-size:.875rem;font-weight:400;color:var(--muted)}
.price-qualifier{margin-top:4px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.hero .actions{margin-top:28px}
.trust-line{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:12px;font-size:.875rem;color:var(--muted)}
.trust-line a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);text-decoration:underline;text-decoration-color:var(--muted)}
.trust-line a:hover{color:var(--copper-ink);text-decoration-color:currentColor}
/* Two screens, stacked: the timesheet (hour types, the days and the totals)
   full width, the PDF below it on the right. The PDF overlaps only the
   timesheet's empty "Add line" bar, so no hours are hidden, and each caption
   sits outside its screenshot, above or below it, never on top of it. */
.hero-visual{position:relative;width:100%;max-width:560px;display:flex;flex-direction:column}
.shot{position:relative;margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#FFFFFF}
.shot-back{margin-top:36px}
.shot-front{align-self:flex-end;width:50%;margin-top:-5%}
.shot-front img{box-shadow:var(--shot-shadow)}
.shot figcaption{width:max-content;max-width:100%;padding:5px 12px;font-size:.8125rem;font-weight:600;line-height:1.3;white-space:nowrap;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px}
.shot-back figcaption{position:absolute;bottom:100%;left:0;margin-bottom:8px}
.shot-front figcaption{margin:8px 0 0 auto}

/* Proof strip. */
.proof{padding:40px 0;background:var(--surface-alt);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;gap:32px}
.proof h2{font-size:1rem;font-weight:700;line-height:1.5}
.proof-figures{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 48px;margin:16px 0 4px}
.proof-figures div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.proof-figures dd{font-size:1.5rem;font-weight:800;line-height:1.25;color:var(--ink)}
.proof-figures dt{margin-top:4px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.proof-note{max-width:62ch;margin:8px 0 4px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.proof-note a{color:var(--body);text-decoration-color:var(--muted)}
.proof-listing p{font-size:.95rem;margin-bottom:12px}

/* Products. */
.products{padding:72px 0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:32px}
.section-heading p{max-width:460px;font-size:.95rem}
.product-grid{display:grid;gap:32px}
.product{min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.product-media{display:block;padding:24px;background:var(--well);border-bottom:1px solid var(--line)}
.product-media img{width:100%;border:1px solid var(--line);border-radius:8px;background:#FFFFFF;transition:transform .2s ease}
.product-media:hover img{transform:translateY(-2px)}
.product-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px}
.product-title{display:flex;align-items:center;gap:12px}
.product-title img{width:40px;height:40px;flex:none}
.product-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:auto;padding-top:8px;color:var(--ink)}
.product-price strong{font-size:1.5rem;font-weight:700}
.product-price span{font-size:.9rem;color:var(--muted);white-space:nowrap}
.product small{font-size:.8125rem;line-height:1.6;color:var(--muted)}
.side-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:24px;padding-block:24px;border-top:1px solid var(--line)}
.product-grid+.side-row{margin-top:32px}
.side-row-plain{border-bottom:1px solid var(--line)}
.side-row>img,.side-icon{width:48px;height:48px}
.side-row h3{font-size:1.05rem;line-height:1.5;margin-bottom:4px}
.side-row p{max-width:760px;font-size:.95rem}
.side-row .text-link{white-space:nowrap}
.status{display:inline-block;margin-left:10px;padding:0 10px;font-size:.8125rem;font-weight:600;line-height:1.7;color:var(--body);border:1px solid var(--line);border-radius:999px;vertical-align:1px}
.product-notes{margin-top:16px;font-size:.8125rem;color:var(--muted)}

/* Checkable claims on a graphite band. */
.band{padding:80px 0;background:var(--band);color:var(--band-text)}
.band h2{max-width:960px;margin-bottom:48px;color:var(--band-ink)}
.claims{display:grid;gap:40px}
.claim h3{margin-bottom:12px;font-size:1.3rem;line-height:1.3;color:var(--band-ink)}
.claim p{font-size:1rem}
.claim a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:.95rem;font-weight:600;color:var(--band-link)}
.claim a:hover{color:var(--band-ink)}
.claim-rule{width:32px;height:4px;margin-bottom:20px;background:var(--copper)}

/* Fit. */
.fit{padding:72px 0;border-bottom:1px solid var(--line)}
.fit-grid{display:grid;gap:24px}
.fit-copy p+p{margin-top:16px}
.fit-copy p{max-width:680px}

/* Insights. */
.insights{padding:72px 0;background:var(--surface-alt);border-bottom:1px solid var(--line)}
.insights .section-heading{align-items:center}
.insight-grid{display:grid;gap:24px}
.insight{position:relative;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:border-color .15s}
.insight:hover{border-color:var(--copper)}
.insight-topic{font-size:.8125rem;font-weight:600;color:var(--copper-ink)}
.insight h3{margin:8px 0 10px;font-size:1.15rem;line-height:1.35}
.insight h3 a{text-decoration:none}
.insight h3 a::after{content:"";position:absolute;inset:0;border-radius:12px}
.insight>p:not([class]){font-size:.95rem}
/* The same date, read time and "Read" affordance as the Insights hub cards. */
.insight{display:flex;flex-direction:column}
.insight .insight-meta{margin-top:12px;font-size:.875rem;color:var(--muted)}
.insight-read{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:.95rem;font-weight:600;color:var(--copper-ink)}
.insight-read svg{width:16px;height:16px;flex:none;transition:transform .15s}
.insight:hover .insight-read svg{transform:translateX(3px)}

/* Final ask. */
.contact{padding:80px 0}
.contact-grid{display:grid;gap:48px}
.contact-ask p{max-width:620px;margin-top:16px}
.contact-ask .actions{margin-top:28px}
.contact-ask .contact-privacy{margin-top:16px;font-size:.875rem;color:var(--muted)}
.contact-privacy a{color:inherit;text-decoration:underline}
.contact .tertiary{margin-top:8px}
.contact-address{padding-top:32px;border-top:1px solid var(--line)}
.contact-address h3{margin-bottom:12px;font-size:1.3rem}
.contact-address .email{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-weight:600;color:var(--copper-ink);overflow-wrap:anywhere}
.contact-address small{display:block;margin-top:8px;font-size:.8125rem;color:var(--muted)}

@media(min-width:760px){
  .product-grid{grid-template-columns:1fr 1fr}
  .insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:899px){
  .hero-visual{display:none}
}
@media(min-width:900px){
  .hero{padding:72px 0 88px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:56px}
  .hero-visual{max-width:none}
  .proof-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;gap:48px}
  .proof-listing{padding-left:40px;border-left:1px solid var(--line)}
  .claims{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  .fit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;align-items:start}
  .contact-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:80px}
  .contact-address{padding:0 0 0 48px;border-top:0;border-left:1px solid var(--line)}
}
@media(max-width:759px){
  .section-heading{display:block}
  .section-heading p{margin-top:12px;max-width:none}
  .insights .section-heading .text-link{margin-top:4px}
}
@media(max-width:600px){
  html{scroll-padding-top:80px}
  .container{padding-inline:24px}
  .hero{padding:32px 0 56px}
  .hero .lead{font-size:1.05rem;margin-top:16px}
  .price-chip{margin-top:20px}
  /* Each price on its own line and its unit under it: "/ production
     environment / year" sat right at the wrap width, so the font swap moved
     the page (CLS at 412px). Stacked, both fonts break in the same places. */
  .price-line{flex-direction:column;gap:4px}
  .price-line .price-item>span{display:block}
  .hero .actions{margin-top:24px}
  /* One legible screenshot rather than a stacked pair too small to read. */
  .shot-back{display:none}
  .shot-front{align-self:stretch;width:100%;max-width:400px;margin:0 auto}
  .shot-front figcaption{margin:8px auto 0}
  .trust-line>span:first-child{flex-basis:100%}
  .trust-line>span:nth-child(2){display:none}
  .proof-figures{grid-template-columns:1fr;gap:12px}
  .proof-figures dd{font-size:1.25rem}
  .products,.fit,.insights{padding:48px 0}
  .product-media{padding:16px}
  .product-copy{padding:20px}
  .side-row{grid-template-columns:32px minmax(0,1fr);gap:16px}
  .side-row>img,.side-icon{width:32px;height:32px;align-self:start}
  .side-row .text-link{grid-column:2}
  .status{margin:4px 0 0}
  .band{padding:56px 0}.band h2{margin-bottom:32px}
  .claims{gap:32px}
  .contact{padding:56px 0}
}
@media(max-width:360px){
  .container{padding-inline:16px}
  .button{padding-inline:18px}
  .actions .button{flex:1 1 100%}
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --copper-ink:#E0916B;--paper:#27272A;--surface-alt:#1F1F22;--card:#2F2F33;--well:#1F1F22;
    --ink:#FAFAFA;--body:#E4E4E7;--muted:#A1A1AA;--line:#3F3F46;--outline:#A1A1AA;
    --band:#1C1C1F;--band-text:#D4D4D8;--shot-shadow:0 18px 40px -16px rgba(0,0,0,.7);color-scheme:dark
  }
}
:root[data-theme=dark]{
  --copper-ink:#E0916B;--paper:#27272A;--surface-alt:#1F1F22;--card:#2F2F33;--well:#1F1F22;
  --ink:#FAFAFA;--body:#E4E4E7;--muted:#A1A1AA;--line:#3F3F46;--outline:#A1A1AA;
  --band:#1C1C1F;--band-text:#D4D4D8;--shot-shadow:0 18px 40px -16px rgba(0,0,0,.7);color-scheme:dark
}
/* The copper full stops in the eyebrow: #B85C38 is 3.3:1 on the dark paper, so
   they take the light copper there (6.0:1). */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .eyebrow i{color:var(--copper-ink)}}
:root[data-theme=dark] .eyebrow i{color:var(--copper-ink)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}