/* Sadran brand: presentation only; existing form state and semantics are preserved. */
:root {
  --ink: #172033; --muted: #4A5263; --blue: #172033;
  --line: #E4E0D6; --soft: #F5F3EE;
  --brand-yellow: #F5B301; --brand-pale: #FFF3CC;
}
body { background: var(--soft); color: var(--ink); font-family: 'Assistant', system-ui, sans-serif; font-size: 17px; }
h1,h2,h3,h4,.brand,button,.button { font-family: 'Rubik','Assistant',system-ui,sans-serif; }
header,main,footer { max-width: 1240px; }
header { padding: 26px 40px; border-bottom: 1px solid var(--line); gap: 18px; }
.brand { color: var(--ink); font-size: 28px; line-height: 1.25; }
.brand bdi { font-size: 22px; font-weight: 500; }
.brand span { font-family: 'Assistant',system-ui,sans-serif; font-size: 14px; }
.pilot { background: white; border-color: var(--line); color: var(--ink); font-size: 14px; white-space: nowrap; }
.pilot::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--brand-yellow); border-radius: 50%; margin-inline-end: 7px; }
main { gap: clamp(32px,5vw,76px); padding: 52px 40px 68px; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); }
.intro { padding-top: 16px; min-width: 0; }
.eyebrow { color: var(--muted); font-size: 16px; font-weight: 600; }
h1 { font-size: clamp(42px,4.8vw,64px); font-weight: 800; line-height: 1.18; letter-spacing: -.7px; }
h1 em { color: var(--ink); font-style: normal; text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 7px; text-underline-offset: 9px; }
.lead { font-size: 20px; line-height: 1.8; }
.benefits li { margin: 22px 0; gap: 15px; }
.benefits li>span { color: var(--ink); background: var(--brand-pale); border: 1px solid #F1DC94; min-width: 38px; text-align: center; }
.benefits strong { font-size: 18px; }
.benefits p { font-size: 16px; }
.note { font-size: 15px; }
.card { min-width: 0; border-radius: 22px; padding: 32px; box-shadow: 0 16px 44px rgb(23 32 51 / 7%); border-color: var(--line); border-top: 4px solid var(--brand-yellow); }
h2 { font-size: 27px; font-weight: 700; letter-spacing: -.3px; }
.muted { font-size: 16px; line-height: 1.65; }
.steps { color: var(--muted); font-size: 13px; gap: 10px; border-color: var(--line); }
.steps span { padding: 5px 7px; border-radius: 7px; }
.steps .active { background: var(--brand-pale); color: var(--ink); }
form { gap: 18px; }
label { font-size: 16px; }
input { min-height: 48px; border-color: var(--line); border-radius: 10px; background: #FDFCF9; font-size: 16px; }
input:focus { outline: 3px solid rgb(245 179 1 / 24%); border-color: #967000; }
input[type=checkbox] { min-height: 0; accent-color: var(--ink); }
.domain { background: #FDFCF9; border-color: var(--line); border-radius: 10px; }
.domain:focus-within { outline: 3px solid rgb(245 179 1 / 24%); border-color: #967000; }
.domain input:focus { outline: none; }
.domain span { font-size: 14px; padding-inline: 10px; }
small { font-size: 13px; }
.trial-notice { background: #FFF8E4; color: var(--ink); padding: 13px 15px; border: 1px solid #F1DC94; border-radius: 11px; margin: 0; }
.consent { color: var(--muted); }
.consent a { color: var(--ink); text-underline-offset: 3px; }
button,.button { border: 1px solid transparent; border-radius: 12px; min-height: 48px; background: var(--brand-yellow); color: var(--ink); font-size: 16px; font-weight: 600; transition: background .18s ease, box-shadow .18s ease; }
button:disabled { opacity: .55; cursor: wait; }
button.secondary,#cancel-recovery,#resend-code { background: transparent; border-color: var(--line); color: var(--ink); font-family: 'Assistant',system-ui,sans-serif; font-weight: 600; }
#resume-help { margin-bottom: 0; }
#resend-wrap small { display: block; margin-top: 9px; }
#alert { background: #FFF0ED; color: #8C302A; border: 1px solid #F0C7C1; font-size: 15px; }
.secure { font-size: 13px; }
.loader { border-color: var(--line); border-top-color: var(--brand-yellow); }
.done { background: #E8F4EC; color: #1F7A4D; }
.sadran-mail-note { background: var(--brand-pale); color: var(--ink); }
.sadran-tutorials,.sadran-tutorial-card { border-color: var(--line); }
.sadran-tutorials>p { color: var(--muted); }
.combined-showcase { max-width: 1240px; margin-top: 0; padding: 36px 40px 60px; border-top: 1px solid var(--line); }
.product-preview { border-color: var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgb(23 32 51 / 4%); }
.product-tag { background: var(--brand-pale); color: var(--ink); }
.product-tag.drivelog { background: var(--ink); color: white; }
.product-preview>a { border-color: var(--line); }
.preview-caption { font-size: 14px; }
.showcase-cta { padding-inline: 28px; }
footer { font-size: 14px; gap: 14px; padding: 24px 40px; }
#tavnet-interest { margin: 28px 0 34px; padding: 22px; border-color: var(--line); background: #FFFFFF; color: var(--ink); border-radius: 18px; box-shadow: 0 8px 24px rgb(23 32 51 / 3%); }
#tavnet-interest button { background: var(--ink); border-color: var(--ink); color: white; font-family: 'Assistant',system-ui,sans-serif; }
#tavnet-interest .ti-open { font-size: 18px; }
#tavnet-interest .ti-close { background: transparent; color: var(--ink); border-color: var(--line); }
#tavnet-interest input:not([type=checkbox]),#tavnet-interest textarea { background: #FDFCF9; border-color: var(--line); color: var(--ink); font-size: 16px; }
#tavnet-interest .ti-consent input { accent-color: var(--ink); }
#tavnet-interest a { color: var(--ink); }
#tavnet-interest .ti-success { background: #E8F4EC; color: #1F613E; }
#tavnet-interest .ti-error { background: #FFF0ED; color: #8C302A; }
#tavnet-interest .ti-actions { flex-wrap: wrap; }
a:focus-visible,button:focus-visible,#tavnet-interest :focus-visible { outline: 3px solid #967000; outline-offset: 3px; }
#form-title { scroll-margin-top: 24px; }
@media(hover:hover) {
  button:not(:disabled):hover,.button:hover { background: #E8A900; box-shadow: 0 5px 14px rgb(23 32 51 / 10%); }
  button.secondary:not(:disabled):hover,#cancel-recovery:hover,#resend-code:hover { background: var(--soft); }
  #tavnet-interest button:not(:disabled):hover { background: #243049; }
  #tavnet-interest .ti-close:not(:disabled):hover { background: var(--soft); }
}
@media(max-width:800px) {
  header { padding: 20px 22px; }
  main { grid-template-columns: minmax(0,1fr); gap: 26px; padding: 28px 22px 40px; max-width: 620px; }
  .intro { padding-top: 0; }
  h1 { font-size: clamp(38px,8vw,48px); }
  .lead { font-size: 18px; }
  .card { padding: 25px; }
  .combined-showcase { padding: 28px 22px 40px; }
  footer { padding: 22px; flex-wrap: wrap; }
}
@media(max-width:480px) {
  header { padding: 17px 16px; gap: 10px; }
  .brand { font-size: 23px; gap: 6px; }
  .brand bdi { font-size: 17px; }
  .brand span { font-size: 12px; }
  .pilot { font-size: 12px; padding: 4px 8px; }
  main { padding-inline: 16px; }
  .card { padding: 22px 18px; border-radius: 18px; }
  .two { grid-template-columns: minmax(0,1fr); }
  h2 { font-size: 24px; }
  .steps { font-size: 12px; gap: 3px; }
  .steps span { padding-inline: 4px; }
  #tavnet-interest { padding: 20px; }
  #tavnet-interest .ti-row { grid-template-columns: minmax(0,1fr); }
  .combined-showcase { padding-inline: 16px; }
}
@media(prefers-reduced-motion:reduce) { button,.button { transition: none; } }