/* Shared row layout + brand styling for the free comparers.
   Each plan is one wide row: details on the left, estimated cost on the right.
   A side-by-side summary table (built by comparer-rows.js) sits under the rows. */
:root{--cr-plum:#2c222d; --cr-teal:#0097b2; --cr-pink:#e39bd6; --cr-sun:#f6c64a; --cr-aqua:#cceff1; --cr-aqua-soft:#e8f7f8; --cr-blush:#fdf3fb;}
body{background:#fffaf1; position:relative; overflow-x:hidden; isolation:isolate;}
/* pink dotted title card with its own space */
.cr-hero{position:relative; overflow:hidden; isolation:isolate; background-color:#f5d9ee; background-image:radial-gradient(rgba(44,34,45,.16) 1.5px,transparent 1.6px); background-size:22px 22px;
  border:2px solid var(--cr-plum); border-radius:22px; box-shadow:7px 8px 0 var(--cr-aqua); padding:30px 200px 32px 34px; margin:14px 0 34px;}
.cr-hero:after{content:""; position:absolute; z-index:-1; right:-34px; top:-34px; width:150px; height:150px; border-radius:50%; background:var(--cr-sun); border:2px solid var(--cr-plum);}
.cr-hero:before{content:""; position:absolute; z-index:-1; right:70px; bottom:-60px; width:120px; height:120px; border-radius:50%; border:12px solid var(--cr-teal); opacity:.9;}
.cr-hero a.back{display:inline-block; margin:0 0 14px !important;}
.cr-hero h1{margin:0 0 10px !important; font-size:31px; line-height:1.15;}
.cr-hero .sub{margin:0 !important; color:#4a3f4c; font-size:18px; line-height:1.45;}
@media (max-width:760px){
  .cr-hero{padding:22px 20px 24px; margin:10px 0 26px; border-radius:18px; box-shadow:5px 6px 0 var(--cr-aqua);}
  .cr-hero:after{width:84px; height:84px; right:-30px; top:-30px;}
  .cr-hero:before{display:none;}
  .cr-hero h1{font-size:25px;}
  .cr-hero .sub{font-size:16px;}
}
.wrap{position:relative; z-index:1;}
.wrap{max-width:1060px !important;}
h1{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; color:var(--cr-plum);}

/* plan = one row */
.plan{
  display:grid !important; grid-template-columns:minmax(0,1fr) 260px; column-gap:26px; align-items:start;
  border:2px solid var(--cr-plum) !important; border-radius:18px !important; background:#fff !important;
  padding:20px 22px !important; margin-bottom:18px !important; box-shadow:5px 5px 0 var(--cr-pink); position:relative;
}
.plan > *{grid-column:1;}
.plan > .result{grid-column:2; grid-row:1 / span 40; align-self:start; position:sticky; top:16px;}
.plan > .remove-btn{grid-column:1; justify-self:start; margin:6px 0 0 !important;}
.plan.lowest-estimate,.plan.winner{background:var(--cr-aqua-soft) !important; border-color:var(--cr-teal) !important; box-shadow:5px 5px 0 var(--cr-teal);}
.plan-name{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-size:22px !important; color:var(--cr-plum); border-bottom:2px dotted var(--cr-pink) !important; margin-bottom:12px !important;}
.plan-name:focus{border-bottom-color:var(--cr-teal) !important;}

/* fields flow across the row */
.plan .row2{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; gap:4px 14px !important;}
.plan .field{margin-bottom:10px !important;}
.plan .field label{font-size:14px !important; text-transform:uppercase; letter-spacing:.04em; font-family:ui-monospace,Menlo,Consolas,monospace; color:#6b6470 !important;}
.plan input[type=number],.plan input[type=date],.plan select,.plan input[type=text]:not(.plan-name){
  font-size:17px !important; padding:9px 11px !important; border:2px solid var(--cr-plum) !important; border-radius:10px !important; background:#fff !important;
}
.plan input:focus,.plan select:focus{outline:none; border-color:var(--cr-teal) !important; box-shadow:0 0 0 3px var(--cr-aqua);}
.plan .section-title{margin:10px 0 8px !important; font-size:13px !important; letter-spacing:.08em; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--cr-teal) !important;}
.plan .checklist{grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; gap:6px !important;}
.plan .check-item{padding:8px 10px !important; border:2px solid #eadfe8 !important; border-radius:10px !important; background:#fff !important;}
.plan .check-item span{font-size:15px !important;}
.plan .check-item.checked{background:var(--cr-aqua-soft) !important; border-color:var(--cr-teal) !important;}
.plan .rate-row{display:grid; grid-template-columns:minmax(110px,.8fr) 2fr; gap:10px; align-items:end; padding:9px 10px !important; border:2px solid #eadfe8 !important; background:var(--cr-blush) !important; margin-bottom:8px !important;}

/* thinner usage rows: label beside the numbers */
.plan .rate-row .rate-label{margin-bottom:0 !important;}

/* keep label box, number boxes and remove button on one line, same height */
.plan .rate-row .rate-label{height:48px; box-sizing:border-box; padding:0 12px !important; font-size:17px !important;}
.plan .rate-row .field.small input{height:48px; box-sizing:border-box; padding:0 11px !important;}
.plan .rate-row .row-remove-btn{height:48px; width:40px;}
.plan .rate-row .field{margin-bottom:0 !important;}
.plan .rate-row .rate-nums{align-items:end !important;}

/* cost panel on the right */
.plan .result{
  margin:0 !important; padding:18px 14px !important; border:2px solid var(--cr-plum) !important; border-radius:14px; background:var(--cr-blush);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.plan.lowest-estimate .result,.plan.winner .result{background:#fff; border-color:var(--cr-teal) !important;}
.plan .result .amount{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-size:36px !important; color:var(--cr-plum); line-height:1.1;}
.plan .result .per{font-size:14px !important;}
.plan .winner-flag{background:var(--cr-sun) !important; color:var(--cr-plum) !important; border:2px solid var(--cr-plum); font-size:12px !important; letter-spacing:.06em; padding:4px 12px !important; border-radius:999px !important;}

.remove-btn{color:#a8506a !important; font-size:14px !important;}
.add-btn{border:2px dashed var(--cr-teal) !important; border-radius:999px !important; color:var(--cr-teal) !important; padding:13px !important; font-size:17px !important; background:#fff !important;}
.add-btn:hover{background:var(--cr-aqua-soft) !important;}
.panel,.instructions{border:2px solid var(--cr-plum) !important; border-radius:18px !important; box-shadow:4px 4px 0 var(--cr-aqua);}
.instructions{background:var(--cr-blush) !important;}
.instructions b{color:var(--cr-teal) !important;}
.summary{background:var(--cr-aqua-soft) !important; border:2px solid var(--cr-teal) !important; color:var(--cr-plum) !important; border-radius:18px !important; box-shadow:4px 4px 0 var(--cr-teal);}

/* side-by-side summary table */
.sbs{margin:26px 0 8px; border:2px solid var(--cr-plum); border-radius:18px; background:#fff; box-shadow:5px 5px 0 var(--cr-sun); overflow:hidden;}
.sbs-head{padding:14px 20px 4px;}
.sbs-head h2{margin:0; font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-size:22px; color:var(--cr-plum);}
.sbs-head p{margin:2px 0 8px; font-size:14px; color:#6b6470;}
.sbs table{width:100%; border-collapse:collapse; font-size:16px;}
.sbs th{text-align:left; font:700 12px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:#6b6470; padding:8px 20px; border-bottom:2px solid var(--cr-plum); background:var(--cr-blush);}
.sbs td{padding:12px 20px; border-bottom:1px solid #eadfe8; vertical-align:middle;}
.sbs tr:last-child td{border-bottom:0;}
.sbs td.n,.sbs th.n{text-align:right; white-space:nowrap;}
.sbs td.rk{width:46px; font-family:Georgia,serif; font-weight:700; color:var(--cr-teal); font-size:18px;}
.sbs td.nm{font-weight:700; color:var(--cr-plum);}
.sbs td.cost{font-family:Georgia,serif; font-weight:700; font-size:19px; color:var(--cr-plum);}
.sbs td.diff,.sbs td.cost .diff{color:#6b6470; font-size:13px; font-weight:400; font-family:system-ui,sans-serif;}
.sbs tr.low{background:var(--cr-aqua-soft);}
.sbs tr.low td.diff{color:var(--cr-teal); font-weight:700;}
.sbs .pill{display:inline-block; margin-left:8px; background:var(--cr-sun); border:2px solid var(--cr-plum); color:var(--cr-plum); border-radius:999px; font:700 11px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; padding:2px 9px; vertical-align:middle;}
.sbs .bar{display:block; height:8px; border-radius:99px; background:#eadfe8; min-width:90px; margin-top:6px; overflow:hidden;}
.sbs .bar i{display:block; height:100%; background:var(--cr-pink);}
.sbs tr.low .bar i{background:var(--cr-teal);}

@media (max-width:760px){
  .plan{grid-template-columns:1fr !important; padding:16px !important;}
  .plan > .result{grid-column:1; grid-row:auto; order:50; margin-top:12px !important;}
  .plan > .remove-btn{order:60;}
  .sbs th,.sbs td{padding:10px 12px;}
  .sbs .hide-sm{display:none;}
}
@media (max-width:760px){}
@media print{.cr-hero{background:#fff; box-shadow:none; border:0; padding:0;} .cr-hero:before,.cr-hero:after{display:none;} body{background:#fff;} .sbs{box-shadow:none;} .plan{box-shadow:none;}}