/* SQI product orders V1: shared styles, scoped to these order/result pages. */
:root {
  --ink:#14363b;
  --green:#255e54;
  --wine:#842b43;
  --line:#cbd9d5;
  --paper:#f2f6f3;
  --muted:#526970}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.55 Arial,Helvetica,sans-serif}
a {
  color:var(--wine);
  text-underline-offset:4px}
h1 {
  font-size:clamp(30px,4vw,42px);
  line-height:1.15;
  max-width:850px}
h2 {
  font-size:25px;
  line-height:1.25;
  margin:0 0 20px}
p {
  margin:0 0 20px}
.order-shell {
  max-width:1100px;
  margin:auto;
  padding:28px 24px}
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:28px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line)}
.wordmark {
  font:700 25px/1.1 Georgia,serif;
  color:#007e88;
  text-decoration:none}
.wordmark small {
  display:block;
  font:12px Arial;
  letter-spacing:1px;
  margin-top:5px}
.eyebrow {
  font-size:13px;
  font-weight:bold;
  letter-spacing:1.6px;
  color:var(--green);
  margin-bottom:14px}
.intro {
  max-width:750px;
  color:var(--muted);
  font-size:19px;
  margin-bottom:36px}
.layout {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
  gap:28px;
  align-items:start}
.steps {
  list-style:none;
  display:flex;
  padding:0;
  margin:0 0 20px;
  gap:14px;
  color:var(--muted);
  font-size:14px;
  font-weight:bold}
.steps li[aria-current] {
  color:var(--green)}
.panel {
  padding:30px;
  border:1px solid var(--line);
  background:white;
  border-radius:15px}
.panel>h2 {
  margin-top:0}
.grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px}
label {
  display:block;
  font-size:15px;
  font-weight:bold;
  margin:0 0 20px}
input,select,textarea {
  display:block;
  width:100%;
  min-height:48px;
  margin:8px 0 0;
  padding:11px 12px;
  border:1px solid #b8cbc5;
  border-radius:6px;
  font:inherit;
  background:white;
  color:var(--ink)}
input::placeholder,textarea::placeholder {
  color:#6a767b;
  font-weight:normal;
  opacity:1}
input[type=checkbox],input[type=radio] {
  width:18px;
  min-height:18px;
  flex:0 0 18px;
  margin:3px 0;
  accent-color:var(--green)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible {
  outline:3px solid #a74059;
  outline-offset:3px}
.required {
  color:var(--wine)}
.muted {
  color:var(--muted);
  font-size:14px}
.plans {
  padding:0;
  border:0;
  margin:24px 0}
.plans legend {
  font-size:18px;
  font-weight:bold;
  margin-bottom:15px}
.choice {
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--line);
  padding:20px;
  border-radius:10px;
  cursor:pointer}
.choice:has(input:checked) {
  border:2px solid var(--green);
  padding:19px;
  background:#f2f7f1}
.choice b {
  display:block;
  font-size:22px;
  margin:10px 0}
.choice small {
  font-size:14px;
  color:var(--muted);
  font-weight:normal;
  display:block}
.check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:normal}
.phone {
  display:grid;
  grid-template-columns:72px 110px minmax(0,1fr);
  gap:10px;
  margin:-12px 0 20px}
.phone input {
  font-size:15px;
  min-width:0}
.phone.no-area {
  grid-template-columns:72px minmax(0,1fr)}
.subsection {
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:24px}
.actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:26px}
.actions.end {
  justify-content:flex-end}
.button,button {
  display:inline-block;
  border:1px solid var(--wine);
  border-radius:6px;
  background:var(--wine);
  color:white;
  padding:13px 20px;
  font:bold 16px/1.4 Arial;
  text-decoration:none;
  text-align:center;
  cursor:pointer}
.outline {
  background:white;
  color:var(--wine)}
button:disabled {
  opacity:.65;
  cursor:wait}
.summary-card {
  overflow:hidden;
  border-radius:14px;
  background:var(--ink);
  color:white}
.product-image {
  background:white;
  text-align:center;
  padding:24px}
.product-image img {
  max-width:100%;
  height:180px;
  object-fit:contain}
.summary-body {
  padding:25px}
.summary-body h2 {
  font-size:24px}
.summary-body .eyebrow {
  color:#c7ddd6}
.summary-body dl {
  border-top:1px solid #496267;
  padding-top:22px;
  margin-top:26px}
.summary-body small {
  display:block;
  color:#d2e0dd;
  font-size:14px}
.summary-body #total-label {
  margin:20px 0 6px;
  color:#d2e0dd}
.total {
  font-size:clamp(27px,3vw,37px);
  font-weight:bold;
  line-height:1.2;
  overflow-wrap:anywhere;
  margin-bottom:20px}
dl {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  font-size:15px}
dt {
  overflow-wrap:anywhere}
dd {
  margin:0;
  text-align:right;
  font-weight:bold}
.help {
  text-align:center;
  padding:25px 4px}
.help p {
  font-size:15px;
  color:var(--muted);
  margin:12px 0}
.help a {
  display:block;
  margin:12px 0}
.whatsapp {
  background:#20cd65;
  border-color:#12a34c;
  color:#083929}
.notice {
  background:#f1f6ef;
  border:1px solid #d2dfcf;
  border-radius:8px;
  padding:18px;
  margin:16px 0;
  font-size:15px}
.notice ul {
  list-style:none;
  margin:0;
  padding:0}
.notice li {
  display:flex;
  gap:9px;
  margin:7px 0}
.notice li::before {
  content:'✓';
  font-weight:bold;
  color:var(--green)}
details {
  border-block:1px solid var(--line);
  padding:18px 0;
  margin:24px 0}
summary {
  cursor:pointer;
  font-weight:bold}
details[open] summary {
  margin-bottom:20px}
footer {
  margin-top:40px;
  border-top:1px solid var(--line);
  padding:24px 0;
  font-size:13px;
  color:var(--muted)}
[hidden] {
  display:none!important}
#error {
  background:#fff0ed;
  border:1px solid #a43536;
  border-radius:8px;
  padding:20px;
  margin-top:18px}
#review section {
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)}
#review h3 {
  margin-bottom:10px;
  font-size:19px}
#review p {
  white-space:pre-line;
  overflow-wrap:anywhere}
.result {
  max-width:800px}
.brand {
  max-width:300px;
  margin-bottom:24px}
.result .actions {
  flex-wrap:wrap}
@media(max-width:760px) {
  .layout {
  grid-template-columns:1fr}
.order-shell {
  padding:20px 16px}
.panel {
  padding:22px}
.page-head {
  align-items:flex-start}
.page-head>a:last-child {
  font-size:13px}
.wordmark {
  font-size:20px}
.grid {
  grid-template-columns:1fr}
.phone {
  grid-template-columns:64px 90px minmax(0,1fr);
  gap:6px}
.phone input {
  padding:10px 8px;
  font-size:14px}
.steps {
  font-size:12px;
  gap:12px}
.actions {
  flex-wrap:wrap}
.summary-card {
  margin-top:10px}
.product-image img {
  height:150px}
}


.wordmark img {
  display:block;
  width:min(310px,100%);
  height:auto}
.page-head .wordmark {
  max-width:60%}