/* Perplace · 24 September 2026. Editorial paper, architectural type and one ink gesture.
   Shared with the approved social direction. The existing viewer controls keep their layout. */
:root[data-theme=light]{--bg:#fbfaf8;--bg-2:#f3f2ee;--panel:#f5f4f0;--fg:#111315;--fg-2:#43494d;--fg-3:#646b70;--line:rgba(25,31,35,.09);--line-2:rgba(25,31,35,.17)}
:root[data-theme=dark]{--bg:#111416;--bg-2:#171b1e;--panel:#1c2125;--fg:#f4f2eb;--fg-2:#c5c8ca;--fg-3:#9aa3a8}
:root[data-theme=light]{--card-bg:#fbfaf8;--tint:#f3f2ee}
:root[data-theme=dark]{--card-bg:#171b1e;--tint:#171b1e}
html{scroll-padding-top:80px}
h1,h2{background:none;-webkit-text-fill-color:var(--fg);color:var(--fg)}
:root[data-theme=light] .top{background:rgba(251,250,248,.92)}
:root[data-theme=dark] .top{background:rgba(17,20,22,.92)}
.hero-light{display:none}
.hero-grid{align-items:center;gap:40px 64px}
.hero .eyebrow i,.hero-meta span:first-child::before{box-shadow:none;border-radius:0}
.hero h1{line-height:1.06;letter-spacing:-.05em;margin-bottom:38px}
.hero-statement{display:block;text-wrap:balance}
.hero-ink{position:relative;display:inline-block;padding-bottom:.1em}
.hero-mobile-break{display:none}
.hero-ink::after{content:"";position:absolute;left:.015em;right:.025em;bottom:-.025em;height:11px;background:var(--acc);clip-path:polygon(0 35%,14% 20%,35% 34%,57% 44%,81% 28%,100% 10%,99% 52%,81% 67%,56% 78%,34% 64%,14% 53%,0 68%)}
.hero .lead.thesis{font:500 clamp(22px,2.2vw,29px)/1.26 var(--disp);letter-spacing:-.025em;max-width:390px;margin-bottom:20px}
.hero .lead:not(.thesis){font-size:16px;line-height:26px;max-width:360px;color:var(--fg-2)}
.hero .lead:not(.thesis) b{display:block;margin-top:12px;color:var(--fg);font-weight:600}
.hero .actions{flex-wrap:wrap;gap:10px}
.hero .btn{height:46px;border-radius:7px;padding:0 18px;font-size:14px;gap:12px}
.hero .btn.ghost{background:transparent}
.hero-stage{scroll-margin-top:88px}
.hero .showcase,:root[data-theme=light] .hero .showcase{border-radius:8px;box-shadow:none;border-color:var(--line-2);background:var(--bg)}
.hero .shot::after,:root[data-theme=light] .hero .shot::after{display:none}
.hero .showcase-side,:root[data-theme=light] .hero .showcase-side,[data-continuous-demo] .showcase-side,:root[data-theme=light] [data-continuous-demo] .showcase-side{background:var(--bg)}
.hero .view-caption p{color:var(--fg-2)}
.hero-meta{color:var(--fg-2)}
.section .kicker{color:var(--fg-3)}
.kicker:not([data-i])::before{border-radius:0;box-shadow:none}
.section h2{max-width:100%;text-wrap:balance}
section.uses::before,.contact-grid::before{display:none}
.contact-grid{background:var(--panel);border-radius:8px;border-color:var(--line-2)}
.contact .btn{border-radius:7px}
/* Independent text blocks: clear the inherited card outline as well as borders. */
.uses .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 64px;margin-top:48px;outline:0;border:0;background:transparent}
.section.uses .card,.section.uses .card:nth-child(even){outline:0;border-radius:0;border:0;border-top:1px solid var(--line-2);padding:24px 0 12px;box-shadow:none;background:transparent}
.uses .card h3{font:500 25px/1.18 var(--disp);letter-spacing:-.025em;margin-bottom:15px}
.uses .card p{max-width:44ch;line-height:25px;color:var(--fg-2)}
.section.uses .card:hover{border-color:var(--line-2);background:transparent;transform:none}
.uses .card-num{margin-bottom:18px;color:var(--acc)}
.footer .brand svg{color:var(--fg)}
.footer-brand>p{max-width:210px;font-size:15px;line-height:22px}
.try-steps{font-family:var(--sans);font-size:16px;line-height:25px}
.try-chip{font-family:var(--sans)}
.try-box textarea{font-family:var(--sans)}
:root[data-theme=dark] .plate h2{-webkit-text-fill-color:var(--cream);color:var(--cream)}
@media(max-width:1050px){.hero-grid{gap:28px}.hero-aside{max-width:620px}.hero .lead.thesis{max-width:none}.hero .lead:not(.thesis){max-width:580px}}
@media(max-width:760px){
  .hero-mobile-break{display:block}
  .hero-grid{gap:28px}.hero h1,html[lang=es] .hero h1{line-height:1.08;margin-bottom:30px}
  .hero .lead.thesis{font-size:23px;line-height:29px;margin-bottom:14px}
  .hero .lead:not(.thesis){font-size:15px;line-height:23px}
  .hero-ink::after{height:7px;bottom:-.07em}
  .hero .btn{font-size:13px;height:44px;padding:0 13px;gap:8px}
  .hero .showcase{border-radius:6px}
  .uses .cards{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px}
  .section.uses .card,.section.uses .card:nth-child(even){padding:22px 0 6px}
  .uses .card h3{font-size:23px}.uses .card-num{margin-bottom:14px}
  .try-steps{font-size:15px;line-height:23px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}