/* cubadevis.shop · front page and /questions/ : a removal quote form, boxed fields on thin rules */
:root{
  --ink:#151a21;
  --ink-2:#3d4652;
  --mute:#5b6572;
  --rule:#c7cdd5;
  --rule-2:#e3e7ec;
  --paper:#fff;
  --desk:#e8ebef;
  --tint:#f4f6f9;
  --blue:#1D4E89;
  --blue-d:#163d6b;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --pad:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font:400 16px/1.55 var(--sans)}
a{color:var(--blue)}
img{display:block}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:10}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.sheet{max-width:1240px;margin:0 auto;background:var(--paper);min-height:100vh}

/* buttons: square, stamped */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--blue);color:#fff;font:600 16px/1.2 var(--sans);text-decoration:none;border:1px solid var(--blue-d);border-radius:2px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn:hover{background:var(--blue-d)}
.btn-s{min-height:40px;padding:0 14px;font-size:14px}
.btn-full{width:100%}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px var(--pad);border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font:600 15px/1 var(--mono);letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:2px}
.nav-r{display:flex;align-items:center;gap:12px}
.login{color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;padding:10px 2px}
.login:hover{text-decoration:underline}
.w{display:none}

/* hero */
.hero{padding:22px var(--pad) 0;background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;border-bottom:1px solid var(--ink)}
.hero-top{background:var(--paper)}
h1{font:700 31px/1.12 var(--sans);letter-spacing:-.02em;padding:2px 0 12px}
.lead{color:var(--ink-2);font-size:16px;line-height:1.5}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.cta-note{font:500 13px/1.4 var(--mono);color:var(--mute)}
.hero-top{padding:0 0 20px}

/* the product preview */
.preview{position:relative;max-height:600px;overflow:hidden;border:1px solid var(--ink);border-bottom:0;background:var(--paper);margin-top:4px}
.preview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
.lbl{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--rule);background:var(--tint);font:600 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.stamp{display:inline-block;flex:none;border:1.5px solid var(--blue);color:var(--blue);padding:2px 6px;font:600 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-radius:2px;transform:rotate(-3deg)}
.pv-msg{border-bottom:1px solid var(--ink)}
.msg{padding:10px 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.fine{font-size:12.5px;line-height:1.45;color:var(--mute)}
.pv-msg .fine{padding:0 12px 10px}
.fields{display:flex;flex-wrap:wrap}
.fields>div{flex:1 1 100%;padding:6px 12px 8px;border-bottom:1px solid var(--rule)}
.fields>.half{flex:1 1 50%}
.fields>.half+.half{border-left:1px solid var(--rule)}
.fields dt{font:500 12px/1.3 var(--mono);color:var(--mute)}
.msg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;margin-bottom:10px;padding-bottom:0}
p,dd,li{text-wrap:pretty}
h1,h2,.band-line{text-wrap:balance}
.fields dd{font-size:14px;line-height:1.4}
.fig{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.sum{padding:6px 12px 8px;border-bottom:1px solid var(--rule);font:400 13.5px/1.7 var(--mono);font-variant-numeric:tabular-nums}
.sum>div{display:flex;justify-content:space-between;gap:12px}
.sum .ttc{border-top:1px solid var(--ink);margin-top:4px;padding-top:4px;font-weight:600;font-size:15px;color:var(--ink)}
.mark{display:inline-block;font:600 12.5px/1.3 var(--mono);color:var(--blue);border:1px dashed var(--blue);padding:1px 5px;background:#eef3f9}
.ask{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
.rows{width:100%;border-collapse:collapse;font-size:13.5px}
.rows caption{text-align:left;padding:7px 12px;border-bottom:1px solid var(--rule);background:var(--tint);font:600 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.rows th{text-align:left;font:500 12px/1.3 var(--mono);color:var(--mute);padding:6px 12px;border-bottom:1px solid var(--rule)}
.rows td{padding:5px 12px;border-bottom:1px solid var(--rule-2)}
.rows .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows .total td{font-weight:600;border-top:1px solid var(--ink);border-bottom:0}

/* section heads: a form's "cadre" */
.cadre{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}
.cadre .no{display:flex;align-items:center;justify-content:center;flex:none;width:48px;background:var(--ink);color:#fff;font:600 18px/1 var(--mono)}
.cadre h2{padding:12px 14px;font:700 21px/1.2 var(--sans);letter-spacing:-.01em}
section{border-bottom:1px solid var(--ink)}

/* A · how */
.steps{display:grid;grid-template-columns:1fr}
.steps li{position:relative;padding:18px var(--pad) 20px 64px;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.step-no{position:absolute;left:var(--pad);top:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);font:600 16px/1 var(--mono)}
.steps h3{font:600 18px/1.3 var(--sans);margin-bottom:4px}
.steps p{color:var(--ink-2);font-size:15px}

/* B · the required details */
.what-body{display:grid;grid-template-columns:1fr}
.what-intro{padding:18px var(--pad);border-bottom:1px solid var(--rule)}
.what-intro p+p{margin-top:12px}
.what-intro p{font-size:15.5px;color:var(--ink-2)}
.what-intro .fine{font-size:13px;color:var(--mute)}
.stamp-l{font-size:12px;padding:5px 9px;margin-bottom:6px}
.checks{counter-reset:c;display:grid;grid-template-columns:1fr}
.checks li{counter-increment:c;display:grid;grid-template-columns:34px 1fr 22px;align-items:center;gap:10px;padding:9px var(--pad);border-bottom:1px solid var(--rule-2);font-size:14.5px;line-height:1.35}
.checks li::before{content:counter(c,decimal-leading-zero);font:500 12px/1 var(--mono);color:var(--mute)}
.checks li::after{content:"";width:18px;height:18px;border:1.5px solid var(--ink);background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%231D4E89' stroke-width='2.4'/%3E%3C/svg%3E")}
.checks li:last-child{border-bottom:0}

/* C · price + faq */
.price-body{display:grid;grid-template-columns:1fr}
.plan{padding:20px var(--pad);border-bottom:1px solid var(--rule);background:var(--tint)}
.plan-name{font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.amount{font-size:17px;color:var(--ink-2);margin:4px 0 12px}
.amount .fig{font-size:44px;color:var(--ink);letter-spacing:-.02em;margin-right:4px}
.incl{border-top:1px solid var(--rule);margin-bottom:18px}
.incl li{padding:7px 0 7px 26px;border-bottom:1px solid var(--rule);font-size:15px;background:no-repeat left center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%231D4E89' stroke-width='2.4'/%3E%3C/svg%3E")}
.plan .fine{margin-top:10px}
#faq{padding:6px var(--pad) 20px}
.qa>div{padding:14px 0;border-bottom:1px solid var(--rule)}
.qa dt{font:600 16px/1.35 var(--sans);margin-bottom:4px}
.qa dd{color:var(--ink-2);font-size:15px}
.more{display:inline-block;margin-top:10px;font:600 15px/1.4 var(--sans);padding:12px 0}

/* band */
.band{padding:26px var(--pad);display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:var(--ink);color:#fff;border-bottom:0}
.band-line{font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.band .btn{background:#fff;color:var(--blue);border-color:#fff}
.band .btn:hover{background:#e6edf6}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:18px var(--pad) 24px;font-size:14px;color:var(--mute);border-top:1px solid var(--ink)}
.foot a{color:var(--ink-2);padding:12px 4px;display:inline-block;min-width:44px;text-align:center}

/* /questions/ */
.page-head{padding:26px var(--pad) 22px;border-bottom:1px solid var(--ink);background-image:linear-gradient(var(--rule-2) 1px,transparent 1px),linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);background-size:24px 24px}
.page-head .lead{max-width:680px;background:var(--paper)}
.qa-wide{padding:4px var(--pad) 10px}
.qa-wide>div:last-child{border-bottom:0}
.prose{padding:16px var(--pad) 20px;max-width:calc(66ch + 2 * var(--pad))}
.page-head .lead{max-width:66ch}
.prose p{color:var(--ink-2);font-size:15.5px}
.prose p+p{margin-top:10px}
.prose strong{color:var(--ink)}

@media (min-width:400px){.w{display:inline}}

@media (min-width:900px){
  :root{--pad:28px}
  body{padding:0 20px}
  .sheet{border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
  .nav{padding:12px var(--pad)}
  .hero{padding:26px var(--pad) 0}
  .hero-top{display:grid;grid-template-columns:7fr 5fr;gap:36px;align-items:end;padding-bottom:22px}
  h1{font-size:46px;padding:0}
  .preview{max-height:470px}
  .preview{display:grid;grid-template-columns:4fr 8fr}
  .pv-msg{border-bottom:0;border-right:1px solid var(--ink)}
  .msg{font-size:14.5px;padding:14px;display:block;margin:0}
  .pv-msg .fine{padding:0 14px 14px}
  .q-grid{display:grid;grid-template-columns:1fr 1fr}
  .q-a{border-right:1px solid var(--rule)}
  .cadre .no{width:60px}
  .cadre h2{font-size:24px;padding:14px 20px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{border-bottom:0;border-right:1px solid var(--rule);padding:24px var(--pad) 28px 78px}
  .steps li:last-child{border-right:0}
  .step-no{left:var(--pad);top:22px;width:36px;height:36px}
  .what-body{grid-template-columns:4fr 8fr}
  .what-intro{border-bottom:0;border-right:1px solid var(--rule);padding:26px var(--pad)}
  .checks{grid-template-columns:1fr 1fr}
  .checks li{padding:12px 20px;border-bottom:1px solid var(--rule-2)}
  .checks li:nth-child(odd){border-right:1px solid var(--rule-2)}
  .checks li:nth-last-child(-n+2){border-bottom:0}
  .price-body{grid-template-columns:4fr 8fr}
  .plan{border-bottom:0;border-right:1px solid var(--rule);padding:26px var(--pad)}
  #faq{padding:10px var(--pad) 24px}
  .qa{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .band{flex-direction:row;align-items:center;justify-content:space-between;padding:30px var(--pad)}
  .band-line{font-size:28px}
  .foot{padding:20px var(--pad) 28px}
  .page-head{padding:40px var(--pad) 32px}
  .page-head h1{font-size:42px;margin-bottom:10px}
  .qa-wide{grid-template-columns:1fr 1fr}
  .qa-wide>div:nth-last-child(-n+2){border-bottom:0}
}