/* The public pages on templates/landing_base.html: the home page (landing_sites.html), from
   design/prototype/onitly-landing.html, the domain search results (landing_domains.html), the plans (plans/plans.html),
   the sign-in pages and the gate (landing_auth.html), About, Contact, the legal documents, the Help Center and the
   error pages. Plus Jakarta Sans, navy and gold. Hero with the domain search, trades, how it works, the website, site
   leads, the tools (tabs with real screenshots), everything in one place, Carol, trust, plans, FAQ and the last call.
   Mobile first. */
:root{
  --bg:#FFFFFF; --alt:#F4F6FA; --warm:#FBF5E6; --surface:#FFFFFF; --line:#E4E8EF;
  --ink:#0F1E3A; --text:#1E2A3B; --muted:#5B6778;
  --primary:#0F1E3A; --primary-hi:#1B2F58; --on-primary:#FFFFFF;
  --gold:#E3B04B; --gold-soft:#F7E6B8; --green:#1C8F5A; --green-soft:#DDF3E7; --red:#C0392B; --taken:#8A94A6;
  --shadow:0 24px 50px -24px rgba(15,30,58,.28);
  --head:112px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --bg:#0E1420; --alt:#121A29; --warm:#1A1812; --surface:#161E2E; --line:#263147;
  --ink:#F2F4F8; --text:#E4E8F0; --muted:#9AA6B9;
  --primary:#E3B04B; --primary-hi:#F0C15C; --on-primary:#15110A;
  --gold-soft:#3A3012; --green:#5FCF93; --green-soft:#17352A; --red:#F08A7E; --taken:#6E7A8E;
  --shadow:0 24px 50px -24px rgba(0,0,0,.6); color-scheme:dark;
}
html{ scroll-padding-top:calc(var(--head) + env(safe-area-inset-top,0px)); scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width:1120px; margin:0 auto; padding-left:20px; padding-right:20px; }
h1,h2,h3{ color:var(--ink); margin:0; letter-spacing:-.025em; line-height:1.08; }
h1{ font-size:clamp(2.1rem,7.4vw,3.6rem); font-weight:800; }
h2{ font-size:clamp(1.75rem,5vw,2.6rem); font-weight:800; }
h3{ font-size:1.125rem; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
p{ margin:0; }
figure{ margin:0; }
.lede{ font-size:1.075rem; color:var(--muted); max-width:52ch; }
section{ padding:56px 0; }
.sec-head{ margin-bottom:28px; }
.sec-head .lede{ margin-top:12px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 22px; font:inherit; font-weight:700; font-size:.95rem; border:1.5px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s,border-color .15s,transform .1s; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--primary); color:var(--on-primary); }
.btn-primary:hover{ background:var(--primary-hi); }
.btn[disabled]{ opacity:.7; cursor:default; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--ink); }
.btn:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,[role="tab"]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* header: sticky; on phones the logo and the Log in and Get started buttons keep the first row, and the section links
   (scrolling sideways) share the second with the language switch */
.site-head{ position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); }
.nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; padding-top:12px; padding-bottom:10px; }
.logo{ display:inline-flex; color:var(--ink); text-decoration:none; }
.logo svg{ height:30px; width:105px; }
.nav ul{ order:3; flex:1 1 50%; min-width:0; display:flex; gap:20px; list-style:none; margin:0; padding:2px 0; overflow-x:auto; scrollbar-width:none; }
.nav ul::-webkit-scrollbar{ display:none; }
.nav a.link{ color:var(--text); text-decoration:none; font-weight:600; font-size:.9rem; white-space:nowrap; }
.nav a.link:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.nav .right{ display:flex; align-items:center; gap:8px; }
.nav .right .btn{ padding:10px 16px; font-size:.9rem; }
.nav .lang-pick{ order:4; }
@media (max-width:420px){ /* a small phone keeps the logo and both buttons on one row, in Spanish too */
  .logo svg{ height:26px; width:91px; }
  .nav .right{ gap:6px; }
  .nav .right .btn{ padding:9px 12px; font-size:.85rem; }
}

/* hero */
.hero{ padding-top:28px; padding-bottom:48px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; }
.hero .lede{ margin:16px 0 24px; }
.search-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); container-type:inline-size; }
.search-card h3{ margin-bottom:12px; }
/* the search bar (_domain_search.html): input over the button, side by side in one bar where there is room for both */
.search{ display:flex; flex-wrap:wrap; gap:10px; }
.search input{ flex:1 1 100%; min-width:0; background:var(--alt); border:1.5px solid var(--line); border-radius:999px; outline:0; color:var(--ink); font:inherit; font-size:1.05rem; padding:12px 18px; transition:border-color .15s; }
.search input:focus{ border-color:var(--ink); }
.search input::placeholder{ color:var(--taken); }
.search .btn{ flex:1 1 100%; }
.search .btn svg{ flex:none; width:18px; height:18px; }
@container (min-width:600px){
  .search{ flex-wrap:nowrap; align-items:center; gap:6px; background:var(--alt); border:1.5px solid var(--line); border-radius:999px; padding:5px 5px 5px 12px; }
  .search:focus-within{ border-color:var(--ink); }
  .search input,.search input:focus{ border:0; background:none; padding:9px 6px; }
  .search .btn{ flex:none; }
}
.hint{ font-size:.875rem; color:var(--muted); margin:10px 4px 0; }
.hint.err{ color:var(--red); }
.results{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line); }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:13px 2px; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:0; }
.dom{ flex:1 1 100%; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.pill{ font-size:.8rem; font-weight:700; border-radius:999px; padding:4px 10px; background:var(--green-soft); color:var(--green); }
.price{ font-size:.9rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.row.taken .dom{ color:var(--taken); font-weight:500; }
.row.taken .pill,.pick.taken .pill{ background:var(--alt); color:var(--taken); }
.row .btn{ margin-left:auto; padding:8px 14px; font-size:.875rem; }
.includes{ margin-top:12px; font-size:.9rem; color:var(--muted); }
@media (min-width:640px){ .dom{ flex:1 1 auto; } }
.quick{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; font-size:.92rem; font-weight:600; color:var(--ink); }
.quick li{ display:flex; align-items:center; gap:8px; }
.quick svg{ flex:none; width:20px; height:20px; }

/* hero visual: the sample site in a browser, the app on a phone and a new request. Offsets are margins and padding
   in % so they follow the width: the stage is as tall as the phone, which sits 12% of the width below the top. */
.stage{ position:relative; padding-bottom:calc(19.8% - 42px); }
.browser{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.stage .browser{ width:88%; }
.browser .top{ display:flex; align-items:center; gap:10px; height:30px; padding:0 12px; border-bottom:1px solid var(--line); background:var(--alt); }
.browser .dots{ display:flex; gap:5px; }
.browser .dots i{ width:8px; height:8px; border-radius:50%; background:var(--line); display:block; }
.browser .url{ flex:1; min-width:0; background:var(--surface); border-radius:999px; padding:2px 12px; font-size:.72rem; color:var(--muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone{ background:#111; border-radius:24px; padding:6px; box-shadow:0 30px 60px -28px rgba(15,30,58,.55); }
.phone img{ border-radius:18px; width:100%; }
.hero-phone{ position:absolute; right:0; bottom:0; width:29%; border-radius:18px; padding:5px; }
.hero-phone img{ border-radius:13px; }
.toast{ position:absolute; left:3%; bottom:0; margin-bottom:calc(19.8% - 64px); display:flex; align-items:center; gap:10px; max-width:62%; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:8px 12px; box-shadow:var(--shadow); line-height:1.3; }
.toast b{ display:block; color:var(--ink); font-size:.82rem; }
.toast small{ display:block; color:var(--muted); font-size:.72rem; }
.toast .bell{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#15110A; display:flex; align-items:center; justify-content:center; }
.toast .bell svg{ width:16px; height:16px; }
.hero-visual figcaption,.note{ font-size:.78rem; color:var(--muted); }
.hero-visual figcaption{ margin-top:14px; }

/* trades */
.trades{ display:grid; grid-template-columns:1fr; gap:16px; }
.trade{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; }
.trade img{ flex:none; width:38%; object-fit:cover; }
.trade > div{ padding:14px 16px; }
.trade h3{ margin-bottom:6px; }
.trade p{ color:var(--muted); font-size:.9rem; line-height:1.45; }
.trade.more{ background:var(--ink); border-color:transparent; justify-content:center; }
.trade.more h3{ color:#fff; font-size:1.3rem; }
.trade.more p{ color:#C7D0DF; margin-bottom:18px; }
.trade.more .btn-primary{ background:var(--gold); color:#15110A; }
.ai-pair{ display:grid; gap:16px; margin:28px 0 8px; }
.ai-pair article{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:16px; padding:20px 22px; }
.ai-pair h3{ margin-bottom:8px; }
.ai-pair p{ color:var(--muted); font-size:.95rem; line-height:1.55; }
:root[data-theme="dark"] .trade.more{ background:var(--surface); border-color:var(--line); }
:root[data-theme="dark"] .trade.more h3{ color:var(--ink); }
:root[data-theme="dark"] .trade.more p{ color:var(--muted); }

/* how it works */
.how-band{ background:var(--alt); }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.step{ display:grid; grid-template-columns:34px 1fr; column-gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; }
.step .n{ grid-row:span 2; width:34px; height:34px; border-radius:50%; background:var(--gold); color:#15110A; font-weight:800; display:flex; align-items:center; justify-content:center; }
.step h3{ margin:6px 0 6px; }
.step p{ color:var(--muted); font-size:.95rem; }
.need{ margin-top:18px; background:var(--surface); border:1px dashed var(--gold); border-radius:18px; padding:22px; }
.need h3{ margin-bottom:14px; }
.need ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.need li{ display:flex; gap:10px; align-items:flex-start; color:var(--text); font-size:.95rem; }
.need svg{ flex:none; width:20px; height:20px; margin-top:1px; }

/* the website: four phone screens of a sample site, then what it includes */
.site-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 18px; margin:0 -2px; scrollbar-width:thin; }
.site-strip figure{ scroll-snap-align:start; }
.site-strip figcaption{ margin-top:12px; font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.35; }
.site-strip + .note{ margin-top:12px; }
.checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; }
.checks svg{ flex:none; width:22px; height:22px; margin-top:1px; }
.checks b{ color:var(--ink); display:block; }
.checks span{ color:var(--muted); font-size:.95rem; }
.feature-grid{ margin-top:28px; }

/* site leads */
.leads-band{ background:var(--warm); }
.two{ display:grid; gap:32px; align-items:center; }
.leads-band .lede{ margin-top:12px; }
.flow{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; }
.flow li{ font-size:.8rem; font-weight:700; border-radius:999px; padding:6px 12px; background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.flow li.won{ background:var(--green-soft); border-color:transparent; color:var(--green); }
.flow li.lost{ color:var(--taken); }
.app-frame{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.app-frame .bar{ display:flex; align-items:center; gap:12px; padding:9px 14px; background:var(--alt); border-bottom:1px solid var(--line); font-size:.82rem; color:var(--muted); }
.app-frame .bar .logo svg{ height:20px; width:70px; }
.app-frame .bar b{ color:var(--ink); font-weight:700; }
@media (max-width:599px){ /* on a phone the app shows as a phone */
  .app-frame{ max-width:270px; margin:0 auto; background:#111; border:0; border-radius:28px; padding:6px; box-shadow:0 30px 60px -28px rgba(15,30,58,.55); }
  .app-frame .bar{ display:none; }
  .app-frame img{ border-radius:22px; }
}

/* the home page's start box (design/prototype/onitly-hero-abas.html): three ways in as a segmented control on the
   tab script below, then a trust strip. Without JS the three panes show one under the other. */
.start-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.tabs.start-card.ready .tablist{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--alt); padding:6px; margin:0; overflow:visible; }
.start-card [role="tab"]{ border:0; background:transparent; color:var(--muted); font-size:.85rem; padding:10px 6px; border-radius:14px; line-height:1.2; white-space:normal; transition:background .15s,color .15s; }
.start-card [role="tab"][aria-selected="true"]{ background:var(--surface); color:var(--ink); border-color:transparent; box-shadow:0 2px 8px rgba(15,30,58,.08); }
.start-pane{ padding:20px 18px 18px; container-type:inline-size; }
.start-pane[hidden]{ display:none; }
.start-card.ready .start-pane:not([hidden]){ animation:start-in .2s ease-out both; }
.start-pane h3{ margin-bottom:4px; }
.start-pane .hint{ margin:0 0 14px; }
.start-steps{ list-style:none; display:grid; gap:8px; margin:14px 0 0; padding:0; font-size:.875rem; color:var(--muted); }
.start-steps li{ display:flex; gap:10px; align-items:flex-start; }
.start-steps b{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--alt); color:var(--ink); font-size:.75rem; display:flex; align-items:center; justify-content:center; }
.start-pane .fine{ font-size:.8rem; color:var(--taken); margin-top:10px; }
.start-wide{ width:100%; padding:15px; font-size:1rem; }
.trust{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; background:var(--alt); border-top:1px solid var(--line); padding:12px 14px; font-size:.75rem; color:var(--muted); }
.trust span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.trust svg{ width:14px; height:14px; flex:none; }
.trust b{ color:var(--ink); font-weight:600; }
@keyframes start-in{ from{ opacity:0; transform:translateY(4px); } }

/* tools: tabs with a real screenshot each (without JS every panel shows) */
.tablist{ display:none; }
.tabs.ready .tablist{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin:0 -2px 18px; }
.tablist::-webkit-scrollbar{ display:none; }
[role="tab"]{ flex:none; font:inherit; font-weight:700; font-size:.9rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; }
[role="tab"][aria-selected="true"]{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.panel{ display:grid; gap:22px; align-items:center; margin-bottom:36px; }
.tabs.ready .panel{ margin-bottom:0; }
.panel[hidden]{ display:none; }
.panel-text h3{ font-size:1.35rem; }
.panel-text .checks{ margin-top:16px; gap:12px; }
.panel-text .checks span{ color:var(--text); }
.all-title{ font-size:1.35rem; margin:56px 0 18px; }
.groups{ display:grid; gap:16px; }
.group{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; }
.group h3{ font-size:1.15rem; margin-bottom:4px; }
.group .sub{ color:var(--muted); font-size:.9rem; margin-bottom:16px; }
.group ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.group li{ padding-left:14px; border-left:2px solid var(--gold); font-size:.925rem; color:var(--muted); line-height:1.45; }
.group li b{ color:var(--ink); display:block; font-weight:700; margin-bottom:2px; }

/* everything in one place */
.compare-band{ background:var(--alt); }
.compare{ display:grid; gap:16px; }
.compare > div{ border-radius:18px; padding:24px; }
.compare h3{ font-size:1.2rem; margin-bottom:16px; }
.compare > div > p{ margin-top:18px; font-size:.92rem; font-weight:600; }
.before{ background:var(--surface); border:1px solid var(--line); }
.before > p{ color:var(--red); }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li{ font-size:.85rem; font-weight:600; color:var(--muted); background:var(--alt); border:1px dashed var(--taken); border-radius:10px; padding:7px 11px; }
.chips li:nth-child(odd){ transform:rotate(-1.5deg); }
.chips li:nth-child(3n){ transform:rotate(1.5deg); }
.after{ background:var(--ink); }
.after h3{ color:#fff; }
.after .checks{ margin:0; gap:10px; }
.after .checks span{ color:#E4E8F0; }
.after > p{ color:var(--gold); }
:root[data-theme="dark"] .after{ background:var(--surface); border:1px solid var(--gold); }
:root[data-theme="dark"] .after h3{ color:var(--ink); }

/* Carol */
.carol{ display:grid; gap:24px; background:#0F1E3A; color:#fff; border-radius:22px; padding:26px 22px; }
.carol .avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; background:#fff; margin-bottom:16px; }
.carol h2{ color:#fff; font-size:clamp(1.6rem,4.5vw,2.2rem); margin-bottom:12px; }
.carol p{ color:#C7D0DF; }
.carol ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.carol li{ padding-left:18px; position:relative; color:#fff; font-weight:600; font-size:.95rem; }
.carol li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.chat{ display:grid; gap:8px; align-self:center; }
.chat div{ max-width:86%; padding:9px 12px; border-radius:14px; font-size:.85rem; line-height:1.35; }
.chat .them{ background:rgba(255,255,255,.12); color:#fff; border-bottom-left-radius:4px; }
.chat .me{ background:var(--gold); color:#15110A; justify-self:end; border-bottom-right-radius:4px; font-weight:600; }

/* trust */
.band{ display:grid; gap:22px; }
.band > div{ display:flex; gap:14px; align-items:flex-start; }
.band svg{ flex:none; width:26px; height:26px; color:var(--gold); }
.band b{ color:var(--ink); display:block; margin-bottom:2px; }
.band span{ color:var(--muted); font-size:.95rem; }

/* plans band */
.plans-band{ background:var(--warm); text-align:center; }
.plans-band .lede{ margin:12px auto 24px; }

/* faq */
.faq{ max-width:780px; }
details{ border-bottom:1px solid var(--line); }
summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:700; color:var(--ink); font-size:1.02rem; }
summary::-webkit-details-marker{ display:none; }
summary svg{ flex:none; width:20px; height:20px; transition:transform .2s; color:var(--muted); }
details[open] summary svg{ transform:rotate(45deg); }
details p{ padding:0 0 18px; color:var(--muted); max-width:64ch; }

/* final */
.final{ background:#0F1E3A; color:#fff; }
.final h2{ color:#fff; }
.final .lede{ color:#C7D0DF; margin:14px 0 26px; }
.final .actions{ display:flex; flex-wrap:wrap; gap:12px; }
.final .btn-primary{ background:var(--gold); color:#15110A; }
.final .btn-primary:hover{ background:#F0C15C; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ border-color:#fff; }

/* the domain search results (landing_domains.html): the search bar on a band, the main name in a card, then the
   same name in other extensions and more names */
.finder-band{ background:var(--alt); border-bottom:1px solid var(--line); }
.finder-form{ padding-top:28px; padding-bottom:28px; container-type:inline-size; }
.finder-form h1{ font-size:clamp(1.6rem,5vw,2.3rem); margin-bottom:16px; }
.finder-band .search input{ background:var(--surface); }
@container (min-width:600px){ .finder-band .search{ background:var(--surface); } .finder-band .search input{ background:none; } }
.finder{ padding-top:32px; }
.pick{ display:grid; gap:16px; background:var(--surface); border:1.5px solid var(--gold); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
.pick.taken,.pick.unsure{ border-color:var(--line); box-shadow:none; }
.pick-dom{ font-size:clamp(1.5rem,5.5vw,2.25rem); margin:10px 0 6px; overflow-wrap:anywhere; }
.pick.unsure .pick-dom{ margin-top:0; }
.pick.taken .pick-dom{ color:var(--taken); }
.pick p{ color:var(--muted); }
.pick .pick-price{ font-size:1.15rem; font-weight:700; color:var(--ink); }
.pick-note{ border-top:1px solid var(--line); padding-top:14px; font-size:.9rem; }
.pick-note b{ display:block; color:var(--ink); }
.finder-lists{ display:grid; gap:36px; margin-top:36px; }
.finder-lists h2{ font-size:1.25rem; }
.finder .includes{ margin-top:32px; }

/* flashed messages, under the header */
.flashes{ list-style:none; margin:16px auto 0; display:grid; gap:8px; }
.flash{ border-radius:12px; padding:12px 16px; font-size:.92rem; font-weight:600; background:var(--alt); color:var(--ink); border:1px solid var(--line); }
.flash.success{ background:var(--green-soft); color:var(--green); border-color:transparent; }
.flash.danger{ color:var(--red); border-color:var(--red); }
.flash.warning{ background:var(--gold-soft); border-color:var(--gold); }

/* the sign-in pages (landing_auth.html): one card on a band */
.auth-band{ background:var(--alt); padding:32px 0 56px; }
.auth-card{ max-width:460px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; box-shadow:var(--shadow); }
.auth-card h1{ font-size:clamp(1.6rem,5vw,2rem); }
.auth-card .lede{ font-size:.98rem; margin-top:8px; }
.auth-card .lede + h1{ margin-top:4px; }
.form{ display:grid; gap:16px; margin-top:22px; }
.field label{ display:block; font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:6px; }
.auth-card.wide{ max-width:640px; }
.form .pair{ display:grid; gap:16px; }
@media (min-width:560px){ .form .pair{ grid-template-columns:1fr 1fr; } }
.field select{ width:100%; background:var(--alt); border:1.5px solid var(--line); border-radius:12px; outline:0; color:var(--ink); font:inherit; font-size:1rem; padding:12px 14px; }
.field select:focus{ border-color:var(--ink); }
.field input,.field textarea{ width:100%; background:var(--alt); border:1.5px solid var(--line); border-radius:12px; outline:0; color:var(--ink); font:inherit; font-size:1rem; padding:12px 14px; transition:border-color .15s; }
.field input:focus,.field textarea:focus{ border-color:var(--ink); }
.field input::placeholder,.field textarea::placeholder{ color:var(--taken); }
.field input[aria-invalid="true"]{ border-color:var(--red); }
.field textarea{ display:block; resize:vertical; min-height:132px; }
.form[hidden]{ display:none; }
.field input.code{ text-align:center; font-size:1.5rem; font-weight:700; letter-spacing:.5em; }
.field small{ display:block; font-size:.82rem; color:var(--muted); margin-top:6px; }
.field .err{ color:var(--red); font-size:.85rem; font-weight:600; margin-top:6px; }
.strength{ margin-top:8px; }
.strength i{ display:block; height:4px; border-radius:2px; background:var(--line); transition:width .2s; }
.strength small{ font-weight:700; }
.form > .btn{ width:100%; }
.choice{ display:grid; gap:4px; border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; cursor:pointer; }
.choice:has(input:checked){ border-color:var(--gold); background:var(--warm); }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice:has(input:focus-visible){ outline:2px solid var(--gold); outline-offset:3px; }
.choice b{ color:var(--ink); }
.choice span{ color:var(--muted); font-size:.9rem; }
.or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.85rem; margin:22px 0 12px; }
.or::before,.or::after{ content:""; flex:1; border-top:1px solid var(--line); }
.oauth{ display:flex; flex-wrap:wrap; gap:8px; }
.oauth .btn{ flex:1 1 0; padding:10px 12px; }
.oauth svg{ flex:none; width:18px; height:18px; }
/* the services step (auth/provider_services.html): the travel distance and the work days */
.range{ display:flex; align-items:center; gap:14px; }
.range input[type=range]{ flex:1; width:auto; padding:0; border:0; background:none; accent-color:var(--gold); }
.range output{ min-width:84px; text-align:right; font-weight:800; color:var(--ink); }
.days{ border:0; margin:0; padding:0; min-width:0; }
.days legend{ padding:0; font-weight:700; font-size:.9rem; color:var(--ink); }
.day-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.day{ position:relative; }
.day input{ position:absolute; opacity:0; pointer-events:none; }
.day span{ display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:44px; padding:0 12px; border:1.5px solid var(--line); border-radius:999px; background:var(--alt); color:var(--ink); font-weight:700; font-size:.9rem; cursor:pointer; }
.day input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.day input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.auth-links{ margin-top:16px; text-align:center; font-size:.92rem; color:var(--muted); }
.auth-links a{ color:var(--ink); font-weight:700; }
.secure{ margin-top:18px; text-align:center; font-size:.8rem; color:var(--muted); }

/* the plans (plans/plans.html): three cards, Master marked in gold, then the domain search */
.plans-head{ padding-bottom:12px; }
.plans-head .lede{ margin-top:12px; }
.plans-head .pill{ display:inline-block; margin-top:18px; font-size:.9rem; }
.plans-list{ padding-top:24px; }
.plans{ display:grid; gap:28px 20px; }
.plan{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; }
.plan.featured{ border:1.5px solid var(--gold); box-shadow:var(--shadow); }
.plan .badge{ position:absolute; top:-13px; left:22px; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:4px 12px; font-size:.75rem; font-weight:800; letter-spacing:.04em; }
.plan.featured .badge{ background:var(--gold); color:#15110A; }
.plan h2{ font-size:1.5rem; }
.amount{ margin:10px 0 18px; color:var(--muted); font-weight:600; }
.amount b{ font-size:2.4rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.secretary{ display:grid; gap:4px; background:var(--warm); border:1px dashed var(--gold); border-radius:14px; padding:14px 16px; margin-bottom:18px; font-size:.85rem; color:var(--muted); }
.secretary b{ color:var(--ink); font-size:.95rem; }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.plan li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--text); }
.plan li svg{ flex:none; width:20px; height:20px; margin-top:1px; }
.plan li.no{ color:var(--taken); }
.plan .go{ margin-top:auto; display:grid; gap:10px; justify-items:center; }
.plan .go .btn{ width:100%; }
.plan h2 + ul,.plan h2 + .secretary{ margin-top:18px; }  /* no price under the name while Stripe cannot be reached */
.plans-list .note{ margin-top:28px; text-align:center; }
.plans-search{ max-width:760px; container-type:inline-size; }
.plans-search h2{ margin-bottom:18px; }

/* the company pages (about.html, contact.html): a page head, then sections on the home page's cards and bands */
.eyebrow{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.eyebrow::before{ content:""; flex:none; width:18px; height:2px; border-radius:2px; background:var(--gold); }
.page-head{ padding-top:36px; padding-bottom:0; }
.page-head h1{ font-size:clamp(2rem,6.4vw,3.1rem); max-width:22ch; }
.page-head .lede{ margin-top:16px; max-width:68ch; }
.lede + .lede{ margin-top:12px; }
.alt-band{ background:var(--alt); }
.photo{ width:100%; border-radius:18px; box-shadow:var(--shadow); }
.two.top{ align-items:start; row-gap:48px; }
.two > .sec-head{ margin-bottom:0; }
.timeline{ list-style:none; margin:26px 0 0 7px; padding:0; border-left:2px solid var(--line); display:grid; gap:22px; }
.timeline li{ position:relative; padding-left:24px; }
.timeline li::before{ content:""; position:absolute; left:-8px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--alt); }
.timeline small{ display:block; font-size:.78rem; font-weight:800; letter-spacing:.06em; color:var(--muted); }
.timeline b{ display:block; color:var(--ink); margin:2px 0; }
.timeline span{ color:var(--muted); font-size:.95rem; }
.founder{ display:flex; flex-wrap:wrap; gap:16px 18px; margin-top:24px; }
.founder > div{ flex:1 1 220px; }
.founder .role{ color:var(--muted); font-size:.85rem; font-weight:700; margin-bottom:8px; }
.founder p:last-child{ color:var(--muted); font-size:.95rem; }
.initials{ flex:none; width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--bg); font-weight:800; font-size:1.2rem; display:flex; align-items:center; justify-content:center; }
.facts{ margin-top:16px; }
.facts p{ color:var(--muted); line-height:1.8; margin-top:6px; }
.facts b,.facts a,.contact-cards a,.contact-side a{ color:var(--ink); font-weight:700; }
.contact{ padding-top:36px; }
.contact-cards a{ overflow-wrap:anywhere; }
.contact-grid{ display:grid; gap:16px; margin-top:16px; align-items:start; }
.contact-side{ display:grid; gap:16px; }
.contact-grid h2{ font-size:1.35rem; margin-bottom:4px; }
.contact-side .checks{ margin-top:14px; gap:12px; }
.contact-side .checks svg{ color:var(--gold); }
.contact-side .checks a{ font-weight:600; }
.links{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.links a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:700; text-decoration:none; }
.group .links li,.group .checks li{ padding-left:0; border-left:0; }  /* lists in a card, not the card's gold-edged items */
.links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.links svg{ flex:none; width:16px; height:16px; color:var(--gold); }
.sent{ text-align:center; padding:28px 8px 12px; }
.sent svg{ display:block; width:56px; height:56px; margin:0 auto 14px; }
.sent p{ color:var(--muted); margin-top:8px; }

/* the legal documents (legal/_layout.html): one readable column with its contents, the language bar and the
   document's own boxes (callout, box, plain list). Their text is .prose, as is a help article's (help/article.html) */
.legal{ max-width:680px; padding-top:36px; padding-bottom:64px; }
.legal-head{ border-bottom:1px solid var(--line); padding-bottom:20px; }
.legal-head h1{ font-size:clamp(1.9rem,6vw,2.6rem); }
.legal-head p{ margin-top:8px; color:var(--muted); font-size:.92rem; }
.langs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.langs svg{ flex:none; width:16px; height:16px; color:var(--gold); }
.langs strong{ color:var(--ink); }
.legal-docs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.legal-docs .btn{ padding:9px 16px; font-size:.85rem; }
.toc{ background:var(--alt); border-radius:16px; padding:20px 22px; margin-top:24px; }
.toc h2{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.toc ol{ margin:12px 0 0; padding-left:1.5em; display:grid; gap:6px; font-size:.95rem; }
.toc a{ color:var(--text); text-decoration:none; }
.toc a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.prose{ margin-top:8px; font-size:1.0625rem; line-height:1.7; overflow-wrap:break-word; }
.prose h2{ font-size:clamp(1.25rem,4vw,1.5rem); line-height:1.25; letter-spacing:-.015em; margin:44px 0 12px; }
.prose h3{ font-size:1.05rem; margin:26px 0 8px; }
.prose p,.prose ul,.prose ol{ margin:0 0 14px; }
.prose ul,.prose ol{ padding-left:1.3em; }
.prose li{ margin-bottom:6px; }
.prose strong,.prose .key{ color:var(--ink); font-weight:700; }
.prose a,.langs a,.callout a,.legal-end a{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px; }
.callout{ background:var(--alt); border-left:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin:0 0 16px; }
.callout p:last-child{ margin-bottom:0; }
.callout.warn{ background:var(--gold-soft); }
.callout.quiet{ border-left-color:var(--taken); font-size:.95rem; }
.legal-head + .callout{ margin:20px 0 0; font-size:.92rem; }
.prose .box{ border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.prose .plain{ list-style:none; padding:0; margin:0; }
.prose .plain li:last-child{ margin-bottom:0; }
.legal-end{ border-top:1px solid var(--line); margin-top:48px; padding-top:24px; text-align:center; font-size:.9rem; color:var(--muted); }
.legal-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px; margin-top:10px; }

/* the Help Center (help/index.html): the search on the domain results' band, the categories as cards of links, the
   bar to support and, signed in, the support panel (Carol's chat and the ticket form, on the tabs above) */
.help-search h1{ margin-bottom:8px; }
.help-search .lede{ margin-bottom:18px; }
.help-search .search{ max-width:680px; }
.help{ padding-top:32px; }
.help-groups h2,.help-title{ font-size:1.15rem; line-height:1.25; letter-spacing:-.01em; margin-bottom:4px; }
.help-title{ margin-bottom:14px; }
.help-empty{ text-align:center; padding:24px 0; }
.help-empty p{ color:var(--muted); margin-bottom:16px; }
.help-support{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:32px; background:var(--warm); border:1px dashed var(--gold); border-radius:18px; padding:18px 22px; }
.help-support p{ font-weight:700; color:var(--ink); }
.help-support .btn svg,.help-ask svg{ flex:none; width:18px; height:18px; }
.help-panel{ margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; }
.help-panel [role="tab"]{ display:inline-flex; align-items:center; gap:8px; }
.help-panel [role="tab"] img{ width:20px; height:20px; border-radius:50%; object-fit:cover; background:#fff; }
.help-panel .form{ margin-top:0; }
.help-chat{ display:grid; gap:10px; align-content:start; min-height:180px; max-height:340px; overflow-y:auto; background:var(--alt); border-radius:14px; padding:12px; margin-bottom:12px; }
.help-chat .msg{ display:flex; align-items:flex-end; gap:8px; max-width:88%; }
.help-chat .msg.me{ justify-self:end; }
.help-chat img{ flex:none; width:28px; height:28px; border-radius:50%; object-fit:cover; background:#fff; }
.help-chat p{ background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:9px 13px; font-size:.92rem; line-height:1.45; white-space:pre-line; overflow-wrap:anywhere; }
.help-chat .me p{ background:var(--primary); color:var(--on-primary); border-color:transparent; border-radius:14px 14px 4px 14px; }
.help-chat .typing span{ display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:var(--taken); animation:typing 1.2s infinite; }
.help-chat .typing span:nth-child(2){ animation-delay:.2s; }
.help-chat .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; } 30%{ opacity:1; transform:translateY(-3px); } }
.help-ask{ display:flex; gap:8px; }
.help-ask input{ flex:1; min-width:0; background:var(--alt); border:1.5px solid var(--line); border-radius:999px; outline:0; color:var(--ink); font:inherit; padding:11px 16px; }
.help-ask input:focus{ border-color:var(--ink); }
.help-ask .btn{ flex:none; padding:11px 16px; }

/* a Help Center article (help/article.html): the breadcrumb, the text as .prose with the article's own headings,
   boxes (.alert) and status badges (.badge), the previous and next articles, and its category's other articles */
.help-article{ padding-top:28px; padding-bottom:64px; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:.85rem; color:var(--muted); }
.crumbs a{ color:var(--muted); font-weight:600; text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:var(--ink); font-weight:700; }
.help-layout{ display:grid; gap:40px; margin-top:24px; grid-template-areas:"main" "side"; }
.help-main{ grid-area:main; min-width:0; max-width:720px; }
.help-main h1{ font-size:clamp(1.8rem,5.5vw,2.4rem); }
.help-meta{ margin-top:8px; color:var(--muted); font-size:.85rem; }
.help-text{ margin-top:24px; }
.help-text h5{ display:none; }  /* the article's title again, already the page's h1 */
.help-text h6{ font-size:1.1rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin:30px 0 10px; }
.help-text .alert{ background:var(--alt); border-left:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin:18px 0; }
.help-text .alert-success{ background:var(--green-soft); border-left-color:var(--green); }
.help-text .alert-danger{ border-left-color:var(--red); }
.help-text .badge{ display:inline-block; border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:700; background:var(--alt); color:var(--ink); }
.help-text .badge.bg-primary{ background:var(--primary); color:var(--on-primary); }
.help-text .badge.bg-success{ background:var(--green-soft); color:var(--green); }
.help-text .badge.bg-warning{ background:var(--gold-soft); }
.help-text .badge.bg-danger{ color:var(--red); }
.help-text i.bi{ display:none; }  /* the articles' icon-font marks: no icon font on this layout */
.pager{ display:grid; gap:12px; margin-top:40px; }
.pager a{ display:block; border:1px solid var(--line); border-radius:14px; padding:14px 18px; color:var(--ink); font-weight:700; text-decoration:none; }
.pager a:hover{ border-color:var(--ink); }
.pager small{ display:block; margin-bottom:4px; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.help-side{ grid-area:side; }
.help-side h2{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.help-side ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.help-side a{ display:block; border-left:2px solid var(--line); padding:7px 12px; color:var(--text); font-size:.92rem; text-decoration:none; }
.help-side a:hover{ color:var(--ink); border-left-color:var(--ink); }
.help-side a[aria-current]{ color:var(--ink); font-weight:700; border-left-color:var(--gold); }

/* the error pages (errors/_layout.html) and the gate (gate.html, a card of landing_auth.html) */
.error-page{ text-align:center; padding-top:72px; padding-bottom:88px; }
.error-code{ font-size:clamp(4.5rem,20vw,7rem); font-weight:800; line-height:1; letter-spacing:-.04em; color:var(--ink); }
.error-page h1{ font-size:clamp(1.6rem,5vw,2.2rem); margin-top:14px; }
.error-page .lede{ margin:12px auto 28px; }
.auth-card.gate{ max-width:400px; text-align:center; }
.lock{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--gold-soft); color:var(--ink); display:flex; align-items:center; justify-content:center; }
.lock svg{ width:26px; height:26px; }
.gate .field input{ text-align:center; letter-spacing:.1em; }

/* footer */
.site-foot{ background:var(--alt); border-top:1px solid var(--line); padding:48px 0 32px; font-size:.9rem; color:var(--muted); }
.foot-grid{ display:grid; gap:28px; grid-template-columns:1fr 1fr; }
.foot-brand{ grid-column:1 / -1; }
.foot-brand p{ margin-top:10px; max-width:34ch; }
.site-foot h4{ margin:0 0 10px; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.site-foot nav,.site-foot .foot-grid > div{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.site-foot a{ color:var(--muted); text-decoration:none; } .site-foot a:hover{ color:var(--ink); }
.site-foot .logo,.site-foot .logo:hover{ color:var(--ink); }
.foot-meta{ display:flex; align-items:center; gap:6px; font-size:.82rem; }
.foot-meta svg{ width:15px; height:15px; color:var(--gold); flex:none; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; border-top:1px solid var(--line); margin-top:32px; padding-top:18px; font-size:.82rem; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }

@media (min-width:600px){
  .trades{ grid-template-columns:repeat(2,1fr); }
  .trade{ flex-direction:column; }
  .trade img{ width:100%; aspect-ratio:4 / 3; }
  .trade > div{ padding:16px 18px 18px; }
  .trade.more{ grid-column:1 / -1; }  /* after the trades, a full row */
  .trade:nth-child(5){ grid-column:1 / -1; flex-direction:row; }  /* the fifth trade alone on its row: side by side */
  .trade:nth-child(5) img{ width:46%; aspect-ratio:auto; }
  .ai-pair{ grid-template-columns:1fr 1fr; }
  .trade.more > div{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:22px 26px; }
  .trade.more p{ flex:1 1 320px; margin-bottom:0; }
  .site-strip{ grid-auto-columns:40%; }
  .feature-grid{ grid-template-columns:1fr 1fr; gap:18px 28px; }
  .need ul{ grid-template-columns:1fr 1fr; }
  .band{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .groups.halves{ grid-template-columns:1fr 1fr; }
  .help-groups{ grid-template-columns:1fr 1fr; }
  .pager{ grid-template-columns:1fr 1fr; }
  .pager .next{ grid-column:2; text-align:right; }
}

@media (min-width:900px){
  :root{ --head:72px; }
  section{ padding:88px 0; }
  .nav{ flex-wrap:nowrap; padding-top:14px; padding-bottom:14px; }
  .nav ul{ order:0; flex:0 1 auto; margin:0 auto; gap:24px; overflow:visible; }
  .nav .lang-pick{ order:0; }
  .hero{ padding-top:44px; padding-bottom:72px; }
  .hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; }
  .trades{ grid-template-columns:repeat(6,1fr); }  /* five trades: three on the first row, two wider below */
  .trade{ grid-column:span 2; }
  .trade:nth-child(4), .trade:nth-child(5){ grid-column:span 3; flex-direction:column; }
  .trade:nth-child(5) img{ width:100%; aspect-ratio:16 / 9; }
  .trade:nth-child(4) img{ aspect-ratio:16 / 9; }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .step{ display:block; padding:22px; }
  .step .n{ margin-bottom:14px; }
  .step h3{ margin:0 0 8px; }
  .site-strip{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); gap:28px; overflow:visible; padding-bottom:0; }
  .site-strip figure{ max-width:236px; justify-self:center; }
  .two{ grid-template-columns:.9fr 1.1fr; gap:56px; }
  .panel{ grid-template-columns:1.45fr 1fr; gap:40px; }
  .groups{ grid-template-columns:repeat(3,1fr); }
  .compare{ grid-template-columns:1fr 1fr; gap:20px; }
  .compare > div{ padding:30px; }
  .carol{ grid-template-columns:1.1fr .9fr; align-items:center; padding:40px; gap:40px; }
  .band{ grid-template-columns:repeat(3,1fr); gap:28px; }
  .band.four{ grid-template-columns:repeat(4,1fr); }
  .page-head{ padding-top:64px; }
  .contact{ padding-top:48px; }
  .contact-grid{ grid-template-columns:1.3fr 1fr; gap:20px; margin-top:20px; }
  .legal{ padding-top:56px; padding-bottom:88px; }
  .error-page{ padding-top:104px; padding-bottom:120px; }
  .help{ padding-top:44px; }
  .help-article{ padding-top:40px; padding-bottom:88px; }
  .help-layout{ grid-template-columns:220px minmax(0,1fr); grid-template-areas:"side main"; gap:56px; margin-top:32px; }
  .help-side{ position:sticky; top:calc(var(--head) + 24px); align-self:start; }
  .foot-grid{ grid-template-columns:1.6fr repeat(4,1fr); }
  .foot-brand{ grid-column:auto; }
  .finder{ padding-top:44px; }
  .pick{ grid-template-columns:1fr auto; align-items:center; column-gap:32px; padding:28px 32px; }
  .pick-note{ grid-column:1 / -1; }
  .finder-lists{ gap:48px; margin-top:48px; }
  .auth-band{ padding:56px 0 88px; }
  .auth-card{ padding:34px 36px; }
  .plans{ grid-template-columns:repeat(3,1fr); }
}

/* a field's hint goes the moment the field is tapped, never something to delete (Daniel: "quando clica some sozinho") */
input:focus::placeholder,textarea:focus::placeholder{ color:transparent; }