/* Resibo website. Plain CSS, no framework. */

@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --teal:#0B4A42;
  --teal-deep:#083A34;
  --mint:#57C4AB;
  --mist:#EEF4F1;
  --paper:#FFFFFF;
  --ink:#13211E;
  --slate:#55625F;
  --line:#D5E2DD;
  --flag:#8A5A12;
  --flag-tint:#FBF1DF;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--teal);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.018em;line-height:1.12}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.8em 1.25em;border-radius:6px;font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;transition:background-color .15s,color .15s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-light{background:#fff;color:var(--teal)}
.btn-light:hover{background:var(--mist)}
.btn-mint{background:var(--mint);color:var(--teal-deep)}
.btn-mint:hover{background:#6fd0ba}

/* Header */
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 6px 18px -12px rgba(11,74,66,.35)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:24px}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.97rem}
.nav a:hover{color:var(--teal);text-decoration:underline}
.nav a:not(.btn){position:relative;padding:6px 0}
.nav a[aria-current="page"]{color:var(--teal);font-weight:600}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:2px;background:var(--mint)}
.nav .btn{color:#fff}
.nav .btn:hover{text-decoration:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:8px 12px;font:500 .95rem var(--sans);color:var(--ink);cursor:pointer}

/* Hero */
.hero{background:var(--teal);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(64px,9vw,128px)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.03;letter-spacing:-.028em;max-width:13ch}
.hero .lede{margin-top:28px;font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.55;max-width:34em;color:#DCEDE8}
.hero .actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero .actions .text-link{color:#fff;font-weight:500}

/* The receipt */
.receipt-stage{position:relative;justify-self:center;width:100%;max-width:400px}
.receipt{position:relative;background:#fff;color:var(--ink);font-family:var(--mono);font-size:.86rem;line-height:1.5;padding:30px 28px 34px;transform:rotate(1.6deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.45)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2710%27%3E%3Cpath d=%27M0 0H16V1L8 9L0 1Z%27 fill=%27%23fff%27/%3E%3C/svg%3E") 0 0/16px 10px repeat-x}
.receipt-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:16px;border-bottom:1px dashed #B9C8C3}
.receipt-head img{width:260px;height:auto}
.receipt-head span{color:var(--slate)}
.receipt-doc{display:flex;justify-content:space-between;margin:14px 0 10px;font-weight:500}
.receipt ul{list-style:none;margin:0;padding:0}
.receipt li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0}
.tick{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mist);color:var(--teal)}
.tick svg{width:12px;height:12px}
.fix{flex:none;background:var(--flag-tint);color:var(--flag);padding:1px 8px;border-radius:3px;font-weight:500}
.receipt-foot{margin-top:14px;padding-top:14px;border-top:1px dashed #B9C8C3;color:var(--slate)}
.receipt-foot strong{display:block;color:var(--ink);font-weight:500}
.receipt-note{position:absolute;left:-14px;bottom:-54px;color:#BFE3D9;font-size:.85rem;font-style:italic;transform:rotate(-2deg)}

@media (prefers-reduced-motion:no-preference){
  .receipt li{animation:print .35s ease-out both}
  .receipt li:nth-child(1){animation-delay:0.20s}
  .receipt li:nth-child(2){animation-delay:0.35s}
  .receipt li:nth-child(3){animation-delay:0.50s}
  .receipt li:nth-child(4){animation-delay:0.65s}
  .receipt li:nth-child(5){animation-delay:0.80s}
  .receipt li:nth-child(6){animation-delay:0.95s}
  .receipt li:nth-child(7){animation-delay:1.10s}
  .receipt li:nth-child(8){animation-delay:1.25s}
  .receipt-foot{animation:print .35s ease-out 1.45s both}
  @keyframes print{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* Sections */
.section{padding:clamp(48px,5.5vw,80px) 0}
.section-mist{background:var(--mist)}

.kicker{font-size:1rem;font-weight:500;color:var(--teal);margin-bottom:18px}
.section h2{font-size:clamp(1.9rem,3.4vw,2.8rem);max-width:20ch}
.prose{max-width:38em}
.prose p+p{margin-top:1em}

/* Problem */
.problem-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.problem-top .prose{font-size:1.125rem;padding-top:6px}
.problem-lead{margin-top:36px;font-weight:600;font-size:1.05rem}
.problem-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.problem-list li{position:relative;padding:16px 0 16px 22px;border-top:1px solid var(--line);font-size:1.02rem;line-height:1.45}
.problem-list li::before{content:"";position:absolute;left:0;top:calc(16px + .62em);width:10px;height:3px;border-radius:2px;background:var(--mint)}
.problem-close{margin-top:24px;font-size:1.125rem}

/* Segments */
.segments-intro{display:flex;justify-content:space-between;align-items:end;gap:24px 32px;flex-wrap:wrap;margin-bottom:32px}
.segments-intro p{max-width:30em;color:var(--slate)}
.segment{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr) 120px;gap:12px 48px;align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.segment:last-child{border-bottom:1px solid var(--line)}
.segment h3{font-size:clamp(1.4rem,2vw,1.65rem);letter-spacing:-.02em}
.segment p{color:var(--ink);max-width:34em}
.segment .who{display:block;color:var(--slate);font-size:.95rem;margin-top:6px;font-weight:400;letter-spacing:0}
.segment a{font-weight:500;white-space:nowrap;justify-self:end}
.erp-names{display:block;margin-top:10px;color:var(--slate);font-size:.95rem}

/* How it works */
.how h2{margin-bottom:12px}
.how .intro{max-width:36em;color:var(--slate)}
.steps-wrap{position:relative;margin-top:28px}
.arc{position:absolute;left:0;right:0;top:0;height:120px;width:100%;overflow:visible}
.arc path{fill:none;stroke-width:2.8;stroke-linecap:round}
.arc-base{stroke:var(--mint)}
.arc-glint{stroke:var(--teal);stroke-dasharray:70 930;stroke-dashoffset:70;opacity:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.step{position:relative;padding-top:136px;text-align:center}
.step .dot{position:absolute;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px var(--paper)}
.step .dot svg{width:24px;height:24px}
.step:nth-child(1) .dot,.step:nth-child(4) .dot{top:100px}
.step:nth-child(2) .dot,.step:nth-child(3) .dot{top:46.7px}
.step:nth-child(4) .dot{background:var(--mint);color:var(--teal-deep)}
.step h3{font-size:1.25rem;margin-bottom:8px}
.step .num{color:var(--teal);font-weight:500;margin-right:.45em;opacity:.55}
.step p{color:var(--ink);max-width:22em;margin:0 auto;font-size:1rem}

/* One orchestrated moment: the arc draws from step 1 to step 4 when the section comes into view */
@media (prefers-reduced-motion:no-preference){
  .js .steps-wrap .arc-base{stroke-dasharray:1000;stroke-dashoffset:1000}
  .js .steps-wrap .dot{transform:translate(-50%,-50%) scale(.6);opacity:0}
  .js .steps-wrap .step h3,.js .steps-wrap .step p{opacity:0}
  .js .steps-wrap.play .arc-base{transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.25,1);stroke-dashoffset:0}
  .js .steps-wrap.play .dot{transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s;transform:translate(-50%,-50%) scale(1);opacity:1}
  .js .steps-wrap.play .step h3,.js .steps-wrap.play .step p{transition:opacity .5s;opacity:1}
  .js .steps-wrap.play .step:nth-child(1) .dot,.js .steps-wrap.play .step:nth-child(1) h3,.js .steps-wrap.play .step:nth-child(1) p{transition-delay:0s}
  .js .steps-wrap.play .step:nth-child(2) .dot,.js .steps-wrap.play .step:nth-child(2) h3,.js .steps-wrap.play .step:nth-child(2) p{transition-delay:.55s}
  .js .steps-wrap.play .step:nth-child(3) .dot,.js .steps-wrap.play .step:nth-child(3) h3,.js .steps-wrap.play .step:nth-child(3) p{transition-delay:1.1s}
  .js .steps-wrap.play .step:nth-child(4) .dot,.js .steps-wrap.play .step:nth-child(4) h3,.js .steps-wrap.play .step:nth-child(4) p{transition-delay:1.65s}
  .steps-wrap.play .arc-glint{animation:glint 5s ease-in-out 2.4s infinite}
  @keyframes glint{0%{stroke-dashoffset:70;opacity:0}8%{opacity:1}45%{stroke-dashoffset:-930;opacity:1}50%,100%{stroke-dashoffset:-930;opacity:0}}
}

/* Why */
.why .wrap>div:first-child{position:sticky;top:110px;align-self:start}
.why h2 .by{display:block;margin-top:.15em;color:var(--slate);font-weight:400;opacity:.8}
.why .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px}
.why-list li{position:relative;padding-left:36px}
.why-list li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;background:url(/assets/brand/resibo_o_mark_color.svg) center/contain no-repeat}
.why-list h3{font-size:1.15rem;margin-bottom:6px;letter-spacing:-.01em}
.why-list p{color:var(--slate);font-size:1rem}

/* Maker */
.maker{background:var(--paper)}
.maker .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.maker blockquote{margin:0;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.38;letter-spacing:-.012em;font-weight:400;max-width:28em}
.maker .start{background:var(--mist);border-left:4px solid var(--mint);padding:28px 28px 30px}
.maker .start h2{font-size:1.5rem;max-width:none;margin-bottom:12px}
.maker .start p{color:var(--slate)}
.maker .start .btn{margin-top:24px}

/* Closing */
.closing{background:var(--teal);color:#fff;position:relative;padding:clamp(52px,6vw,84px) 0}
.closing::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2710%27%3E%3Cpath d=%27M0 0H16V1L8 9L0 1Z%27 fill=%27%23fff%27/%3E%3C/svg%3E") 0 0/16px 10px repeat-x}
.section-mist+.closing::before{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2710%27%3E%3Cpath d=%27M0 0H16V1L8 9L0 1Z%27 fill=%27%23EEF4F1%27/%3E%3C/svg%3E") 0 0/16px 10px repeat-x}
.closing .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.closing h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.028em;max-width:none}
.closing p{margin-top:14px;color:#DCEDE8;font-size:1.1rem;max-width:30em}

/* Footer */
.site-footer{background:#fff;padding:44px 0 32px;font-size:.95rem;color:var(--slate)}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr)) auto;gap:40px 56px}
.seal{justify-self:end;align-self:start}
.site-footer .seal img{width:80px;height:auto;margin:0}
.site-footer address{font-style:normal;margin-top:16px;line-height:1.55;font-size:.9rem}
.site-footer img{height:30px;width:auto;margin-bottom:18px}
.site-footer h2{font-size:.95rem;color:var(--ink);font-weight:600;letter-spacing:0;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li+li{margin-top:8px}
.site-footer a{color:var(--slate);text-decoration:none}
.site-footer a:hover{color:var(--teal);text-decoration:underline}
.site-footer .social{display:flex;gap:4px;margin:14px 0 0 -8px}
.site-footer .social li+li{margin-top:0}
.site-footer .social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--slate);transition:color .15s,background-color .15s}
.site-footer .social a:hover{color:var(--teal);background:var(--mist);text-decoration:none}
.site-footer .social svg{width:20px;height:20px;fill:currentColor;display:block}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;margin-top:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.88rem}

/* Inner pages */
.page-hero{background:var(--teal);color:#fff;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(52px,6.5vw,96px)}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.026em;max-width:18ch}
.page-hero .lede{margin-top:22px;font-size:clamp(1.08rem,1.4vw,1.22rem);line-height:1.55;max-width:38em;color:#DCEDE8}
.page-hero .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.page-hero .actions .text-link{color:#fff;font-weight:500}
.page-hero .mark{position:absolute;right:-70px;top:50%;width:420px;height:auto;transform:translateY(-50%);opacity:.08;pointer-events:none}

.split .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.split .wrap>div:first-child{position:sticky;top:110px;align-self:start}
.split h2{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.split .intro{margin-top:14px;color:var(--slate);max-width:26em}
.split .intro+.intro{margin-top:10px}
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.points li{position:relative;padding-left:36px}
.points li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;background:url(/assets/brand/resibo_o_mark_color.svg) center/contain no-repeat}
.points h3{font-size:1.1rem;margin-bottom:6px;letter-spacing:-.01em}
.points p{color:var(--slate);font-size:1rem}
.points.one{grid-template-columns:1fr}

.note{margin-top:28px;padding:16px 20px;border-left:4px solid var(--mint);background:var(--paper);color:var(--ink);font-size:.98rem;max-width:44em}
.section-mist .note{background:#fff}

.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;font-size:.97rem}

.mini-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.mini-steps li{counter-increment:s;position:relative;padding-top:52px;border-top:3px solid var(--mint)}
.mini-steps li::before{content:counter(s);position:absolute;top:14px;left:0;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem}
.mini-steps h3{font-size:1.1rem;margin-bottom:6px}
.mini-steps p{color:var(--slate);font-size:1rem}

.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0}
.roles div{padding:16px 0;border-top:1px solid var(--line)}
.roles dt{font-weight:600;position:relative;padding-left:30px}
.roles dt::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;background:url(/assets/brand/resibo_o_mark_color.svg) center/contain no-repeat}
.roles dd{margin:4px 0 0 30px;color:var(--slate);font-size:.98rem}

.section-head{margin-bottom:32px}
.section-head h2{font-size:clamp(1.7rem,2.8vw,2.3rem);max-width:none}
.section-head p{margin-top:12px;color:var(--slate);max-width:40em}

@media (max-width:960px){
  .split .wrap{grid-template-columns:1fr}
  .split .wrap>div:first-child{position:static}
  .mini-steps{grid-template-columns:1fr 1fr}
  .roles{grid-template-columns:1fr 1fr}
  .page-hero .mark{width:300px;right:-110px;opacity:.07}
}
@media (max-width:560px){
  .points{grid-template-columns:1fr;gap:24px}
  .mini-steps,.roles{grid-template-columns:1fr}
}

/* Guides and long-form pages */
.article{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,88px)}
.article .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(32px,6vw,88px)}
.article-body{max-width:40em;font-size:1.0625rem}
.article-body h2{font-size:clamp(1.45rem,2.2vw,1.8rem);margin:44px 0 14px}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:1.15rem;margin:28px 0 8px}
.article-body p,.article-body ul,.article-body ol{margin:0 0 14px}
.article-body ul,.article-body ol{padding-left:1.25em}
.article-body li{margin-bottom:6px}
.article-body li::marker{color:var(--teal)}
.article-body .source{font-size:.88rem;color:var(--slate)}
.article aside{align-self:start;position:sticky;top:110px;font-size:.95rem}
.article aside .box{background:var(--mist);padding:22px 22px 24px;border-left:4px solid var(--mint)}
.article aside h2{font-size:1.05rem;margin-bottom:8px;letter-spacing:0}
.article aside p{color:var(--slate)}
.article aside .btn{margin-top:16px}
.article aside .meta{margin-top:18px;color:var(--slate);font-size:.88rem}
.disclaimer{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);color:var(--slate);font-size:.92rem}

.guide-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-list a{display:block;height:100%;padding:28px 28px 30px;background:var(--mist);border-left:4px solid var(--mint);text-decoration:none;color:var(--ink)}
.guide-list a:hover{background:#E3EEE9}
.guide-list h2{font-size:1.35rem;margin-bottom:10px;max-width:none}
.guide-list p{color:var(--slate)}
.guide-list span{display:inline-block;margin-top:16px;color:var(--teal);font-weight:500;text-decoration:underline;text-underline-offset:.18em}

/* Contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,88px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:500;font-size:.97rem}
.field .opt{color:var(--slate);font-weight:400}
.field input,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #B9C8C3;border-radius:6px;padding:11px 12px;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--mint);outline-offset:0;border-color:var(--teal)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.consent{grid-column:1/-1;font-size:.93rem;color:var(--slate)}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-actions button{cursor:pointer;font-family:inherit}
.form-status{font-size:.97rem}
.form-status.ok{color:var(--teal);font-weight:500}
.form-status.err{color:#9B2C1F;font-weight:500}
.contact aside{font-size:1rem}
.contact aside h2{font-size:1.15rem;margin-bottom:8px}
.contact aside .block+.block{margin-top:28px}
.contact aside p,.contact aside address{color:var(--slate);font-style:normal}

/* Plain legal text */
.legal-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;line-height:1.5}
.legal-intro{grid-column:1/-1;max-width:56em;padding-bottom:8px}
.legal-block{padding:18px 0 6px;border-top:1px solid var(--line)}
.legal-text h2{font-size:1.15rem;margin:0 0 8px;max-width:none}
.legal-text p,.legal-text ul{margin:0 0 10px}
.legal-text ul{padding-left:1.25em}
.legal-text li{margin-bottom:4px}

/* About */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin:0}
.facts div{padding:18px 0;border-top:1px solid var(--line)}
.facts dt{font-weight:600}
.facts dd{margin:4px 0 0;color:var(--slate)}
.facts-note{margin:28px 0 0;color:var(--slate)}

@media (max-width:960px){
  .article .wrap,.contact .wrap{grid-template-columns:1fr}
  .article aside{position:static}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .form{grid-template-columns:1fr}
  .guide-list,.facts{grid-template-columns:1fr}
}

/* Two languages diagram */
.lang{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.15fr) 56px minmax(0,1.2fr);align-items:center;gap:12px;margin-top:40px;padding:32px;background:var(--mist);border-radius:4px}
.lang-label{font-weight:600;font-size:.95rem;margin-bottom:12px}
.lang-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lang-chips li{padding:6px 14px;border-radius:999px;font-weight:500;font-size:.95rem;line-height:1.3}
.lang-chips.erp li{background:#fff;border:1px solid #B9C8C3;color:var(--slate)}
.lang-chips.bir li{background:var(--teal);color:#fff}
.lang-arrow{color:var(--mint);display:grid;place-items:center}
.lang-arrow svg{width:48px;height:16px}
.lang-core{background:#fff;color:var(--ink);padding:24px 22px;border-radius:4px;border-top:4px solid var(--mint);text-align:center;box-shadow:0 10px 24px -18px rgba(11,74,66,.45)}
.lang-core img{width:260px;max-width:100%;height:auto;margin:0 auto 14px}
.lang-core p{font-size:.98rem;line-height:1.5}
.problem .problem-lead{margin-top:40px}
@media (max-width:960px){
  .lang{grid-template-columns:1fr;padding:22px}
  .lang-arrow svg{transform:rotate(90deg)}
}

/* Small screens */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .receipt-stage{max-width:340px;margin-top:8px}
  .receipt-note{display:none}
  .problem-top,.why .wrap,.maker .wrap{grid-template-columns:1fr}
  .why .wrap>div:first-child{position:static}
  .problem-list{grid-template-columns:1fr 1fr}
  .segment{grid-template-columns:1fr;gap:12px}
  .segment a{justify-self:start}
  .arc{display:none}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:4px 0 32px 76px;text-align:left}
  .step .dot,.step:nth-child(n) .dot,.js .steps-wrap .step .dot,.js .steps-wrap.play .step .dot{top:0;left:0;transform:none}
  .step::before{content:"";position:absolute;left:26px;top:54px;bottom:0;width:3px;background:var(--mint)}
  .step:last-child::before{display:none}
  .step p{margin:0}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .legal-text{grid-template-columns:1fr}
  .site-footer .wrap>div:first-child{grid-column:1/-1}
  .seal{justify-self:start}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:4px;padding:12px var(--gutter) 20px}
  .nav.open{display:flex}
  .nav a{padding:10px 0;font-size:1.05rem}
  .nav .btn{margin-top:8px;padding:.8em 1.25em}
}
@media (max-width:560px){
  .problem-list{grid-template-columns:1fr}
  .why-list{grid-template-columns:1fr;gap:32px}
  .brand img{height:28px}
}