/*
  CARE CLOSE TO HOME CALCULATOR · embeddable styles
  Every rule is scoped under .cch (the #cch-calculator container) and every class is
  prefixed cch-. The only rule outside the container is body.cch-scroll-lock, which the
  script adds while the question modal is open.
*/

/* ======================================================================
   TOKENS: colors match HHC's landing pages (start.hartfordhealthcare.org)
   and the HHC Brand Guide (July 2026, WCAG web colors, p. 41).
   ====================================================================== */
.cch{
  /* Type comes from the host page by default:
     - body text inherits the page's font, size, weight, line height and color
     - headings (h1–h3) use the page's heading font, size, weight and line height
     - plain links use the page's link color
     Uncomment and set these to override:
       --cch-font-body:    font for all calculator text
       --cch-font-display: font for the large numbers and the quality-strip titles
                           (defaults to the body font)
       --cch-text:         base text color */
  /* --cch-font-body: "Helvetica Neue",Helvetica,Arial,sans-serif; */
  /* --cch-font-display: Georgia,"Times New Roman",serif; */
  /* --cch-text: #1c2a39; */

  /* ink-2: HHC landing-page text gray (the page's body text color), for secondary text.
     blue: WCAG Blue (HHC Blue +40% K). blue-dark: HHC Blue +60% K. blue-tint: HHC Blue 20% tint, only for states and meaning
     (selected answers, focused input, appointment squares); HHC's pages have no light blue.
     blue-wash: HHC Blue 10% tint (lighter than the guide's lightest step), for the results band.
     line: Medium Gray. wash: Light Gray, for backgrounds and hover. */
  --cch-ink-2:#53565a;
  --cch-blue:#00708f; --cch-blue-dark:#00556e; --cch-blue-tint:#c5e7f2; --cch-blue-wash:#e6f5f9;
  --cch-line:#dddddd; --cch-wash:#ededed; --cch-white:#fff;
  --cch-alert:#9b2c2c; --cch-alert-tint:#fbeeee;
  --cch-radius:10px; --cch-radius-sm:8px;
  --cch-shadow:0 24px 60px rgba(0,0,0,.22);
  --cch-wrap:1160px;
}

/* ======================================================================
   SCOPED RESET: puts back browser defaults for the properties host-page
   styles commonly change, so the rules below behave as they did in the
   standalone build. Type is deliberately left alone (see tokens).
   ====================================================================== */
.cch,.cch *,.cch *::before,.cch *::after{box-sizing:border-box}
/* An unset token makes these fall back to the inherited page value. */
.cch{font-family:var(--cch-font-body);color:var(--cch-text);background:var(--cch-white);text-align:left}
.cch [hidden]{display:none!important}
.cch h1,.cch h2,.cch h3,.cch h4{margin:revert;padding:0;clear:none;letter-spacing:normal;text-transform:none;text-wrap:revert;color:inherit}
.cch p{margin:revert;padding:0;text-wrap:revert}
.cch ul,.cch ol,.cch li{margin:revert;padding:revert;list-style:revert}
.cch img{display:block;max-width:100%;height:auto;border:0}
/* Link color comes from the page. The underline stays: HHC's link blue is too close to its
   text gray to tell links apart by color alone (WCAG 1.4.1). */
.cch a,.cch a:visited,.cch a:hover,.cch a:focus,.cch a:active{text-decoration:revert}
.cch a:focus:not(:focus-visible){outline:none}
.cch button{font:inherit;color:inherit;margin:revert;text-transform:none;letter-spacing:inherit}
.cch input[type=text],.cch input[type=range]{display:revert;width:revert;margin:revert;padding:revert;border:revert;background:revert;font-size:revert;line-height:revert;color:revert}
.cch input[type=text]:focus,.cch input[type=range]:focus{color:revert;outline:revert}
.cch .cch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cch :focus-visible,.cch input[type=text]:focus-visible,.cch input[type=range]:focus-visible{outline:3px solid #0098c3;outline-offset:2px}

/* Page scroll lock while the modal is open (added/removed by calculator.js) */
body.cch-scroll-lock{overflow:hidden}

.cch .cch-wrap{max-width:var(--cch-wrap);margin:0 auto;padding:0 32px}

/* ---------- landing ---------- */
/* Until calculator.js builds the calculator (it sets data-cch-ready), hold the hero's
   height and gray panel so the page footer doesn't show at the top while the script loads. */
.cch:not([data-cch-ready]){min-height:max(600px,calc(100vh - 110px));background:linear-gradient(90deg,var(--cch-wash) 0%,var(--cch-wash) 48%,transparent 48%)}
.cch .cch-hero{position:relative;background:linear-gradient(90deg,var(--cch-wash) 0%,var(--cch-wash) 48%,transparent 48%);overflow:hidden}
.cch .cch-hero .cch-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:max(600px,calc(100vh - 110px));align-items:center}
.cch .cch-hero-copy{padding:72px 48px 72px 0;max-width:540px}
.cch .cch-eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cch-blue);margin:0 0 14px}
/* Bold, as in the original design and the HHC Brand Guide (headlines "generally Bold or Heavy").
   HHC's landing pages use Regular. Line height is the original design's: the page's 1.35 leaves
   large gaps between lines at this weight. Applies to the hero title and the results headline. */
.cch h1{font-weight:700;line-height:1.08;margin:0 0 22px}
/* :not(.cch-eyebrow): in the reference build this rule also matched the eyebrow and overrode
   its size, color and margin, so it showed at 19px gray. Excluded so the eyebrow rule above
   applies (14px blue). Flag for design review. */
/* 20px matches the hero paragraph on HHC landing pages (.page-hero__text p) */
.cch .cch-hero-copy p:not(.cch-eyebrow){font-size:20px;margin:0 0 32px}
.cch .cch-hero-photo{position:absolute;right:0;top:0;bottom:0;width:52%}
.cch .cch-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 10%}
/* Buttons match HHC's .button--solid: page font size, 8px 16px padding, 8px radius. HHC's
   class isn't reused because its :visited rule blanks the button after a link is visited. */
.cch .cch-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cch-blue);color:#fff;border:0;border-radius:var(--cch-radius-sm);padding:8px 16px;font-weight:600;cursor:pointer;text-decoration:none}
.cch .cch-btn:hover{background:#00789b}
.cch .cch-btn[disabled]{background:#a9a9a9;cursor:not-allowed}
/* Outlined, as HHC's .cta-button. Padding is reduced by the border so both buttons are the same height. */
.cch .cch-btn.cch-ghost{background:var(--cch-white);color:var(--cch-blue);border:2px solid var(--cch-blue);padding:6px 14px}
.cch .cch-btn.cch-ghost:hover{background:var(--cch-blue);color:#fff}
.cch .cch-btn svg{width:18px;height:18px}
/* External-link icon (calculator.js EXT): sized to the text in links, beside the label in buttons */
.cch a svg.cch-ext{display:inline;width:.85em;height:.85em;vertical-align:-.05em;margin-left:.3em}
.cch .cch-btn svg.cch-ext{width:16px;height:16px;margin:0}
.cch .cch-link-btn{background:none;border:0;color:var(--cch-blue);font-weight:600;cursor:pointer;padding:12px 4px;font-size:16px}

/* ---------- wizard ---------- */
/* The overlay is a native <dialog> opened with showModal(), so it renders in the browser's
   top layer above all page content. These rules replace the browser's default dialog box. */
.cch .cch-overlay{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:inherit;overflow:hidden;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:24px;z-index:2147483000}
.cch .cch-overlay:not([open]){display:none}
.cch .cch-overlay::backdrop{background:transparent}
.cch .cch-dialog{background:var(--cch-white);border-radius:16px;box-shadow:var(--cch-shadow);width:100%;max-width:960px;max-height:calc(100% - 16px);display:flex;flex-direction:column;overflow:hidden}
.cch .cch-d-head{padding:28px 32px 0;position:relative}
.cch .cch-d-step{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cch-ink-2);margin:0 0 12px}
.cch .cch-bar{height:5px;background:var(--cch-wash);border-radius:3px;overflow:hidden}
.cch .cch-bar i{display:block;height:100%;background:var(--cch-blue);border-radius:3px;transition:width .3s ease}
.cch .cch-close{position:absolute;right:20px;top:18px;width:44px;height:44px;border:0;background:none;cursor:pointer;border-radius:50%;display:grid;place-items:center;color:var(--cch-ink-2)}
.cch .cch-close:hover{background:var(--cch-wash)}
.cch .cch-d-body{padding:44px 72px 36px;overflow-y:auto;flex:1}
.cch .cch-q-title{margin:0 0 10px}
.cch .cch-q-help{color:var(--cch-ink-2);margin:0 0 30px}
.cch .cch-d-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 22px 32px;border-top:1px solid var(--cch-wash)}
.cch .cch-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--cch-ink-2);margin:0}
.cch .cch-note svg{flex:none;width:18px;height:18px}
/* The buttons keep their natural width and one-line labels; the note wraps instead */
.cch .cch-note{min-width:0}
.cch .cch-foot-actions{display:flex;align-items:center;gap:8px;flex:none}
.cch .cch-foot-actions .cch-btn{white-space:nowrap}

.cch fieldset{border:0;margin:0;padding:0;min-width:0}
.cch .cch-opts{display:grid;gap:16px}
.cch .cch-opts.cch-c2{grid-template-columns:1fr 1fr}
.cch .cch-opts.cch-c3{grid-template-columns:repeat(3,1fr)}
.cch .cch-opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--cch-white);border:1.5px solid var(--cch-line);border-radius:var(--cch-radius-sm);padding:18px 20px;cursor:pointer;min-height:60px;font-size:17px;font-weight:600;transition:border-color .15s,background .15s}
.cch .cch-opt:hover{border-color:#a9a9a9}
.cch .cch-opt[aria-pressed="true"],.cch .cch-opt[aria-checked="true"]{background:var(--cch-blue-tint);border-color:var(--cch-blue);color:var(--cch-blue-dark)}
.cch .cch-opt.cch-center{justify-content:center;text-align:center}
.cch .cch-opt.cch-wide{grid-column:1/-1}
.cch .cch-opt svg{flex:none;width:26px;height:26px;color:var(--cch-blue)}
.cch .cch-opt .cch-t{display:block}
.cch .cch-opt .cch-s{display:block;font-weight:400;font-size:15px;color:var(--cch-ink-2);margin-top:2px}
.cch .cch-badge{display:inline-block;margin-top:8px;background:var(--cch-white);border:1px solid #8dd3e9;color:var(--cch-blue-dark);font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:14px}
.cch .cch-group-label{grid-column:1/-1;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cch-ink-2);margin:6px 0 -4px}

/* town combobox */
.cch .cch-combo{position:relative;max-width:500px}
.cch .cch-combo input{width:100%;font:inherit;font-size:17px;padding:16px 16px 16px 46px;border:1.5px solid var(--cch-line);border-radius:var(--cch-radius-sm);background:var(--cch-white)}
.cch .cch-combo input:focus{outline:none;border-color:var(--cch-blue);box-shadow:0 0 0 3px var(--cch-blue-tint)}
.cch .cch-combo .cch-pin{position:absolute;left:15px;top:17px;width:20px;height:20px;color:var(--cch-ink-2)}
.cch .cch-combo ul{list-style:none;margin:6px 0 0;padding:6px;border:1px solid var(--cch-line);border-radius:var(--cch-radius-sm);max-height:248px;overflow-y:auto;background:var(--cch-white);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.cch .cch-combo li{padding:10px 12px;border-radius:6px;cursor:pointer;font-size:16px}
.cch .cch-combo li[aria-selected="true"],.cch .cch-combo li:hover{background:var(--cch-wash)}
.cch .cch-combo li.cch-grp{cursor:default;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--cch-ink-2);padding:10px 12px 4px;background:none}
.cch .cch-combo li.cch-act{color:var(--cch-blue);font-weight:600}
.cch .cch-combo .cch-msg{font-size:14.5px;color:var(--cch-ink-2);margin:10px 2px 0}

/* slider */
.cch .cch-count{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:22px}
.cch .cch-count b{font-family:var(--cch-font-display);font-weight:400;font-size:72px;line-height:1;color:var(--cch-blue)}
.cch .cch-count span{font-weight:600;color:var(--cch-blue);font-size:17px}
.cch input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.cch input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cch-blue) var(--cch-p,0%),var(--cch-line) var(--cch-p,0%))}
.cch input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--cch-line)}
.cch input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--cch-blue)}
.cch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--cch-blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-top:-10px}
.cch input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cch-blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cch .cch-ends{display:flex;justify-content:space-between;font-weight:600;color:var(--cch-ink-2);font-size:15px;margin-top:8px}

/* ---------- results ---------- */
.cch .cch-results[hidden]{display:none}
/* Light blue sets the results apart from the gray landing hero. Body text is 6.6:1 on it. */
.cch .cch-r-top{background:var(--cch-blue-wash);border-bottom:1px solid var(--cch-line)}
.cch .cch-r-top .cch-wrap{padding-top:48px;padding-bottom:52px;display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.cch .cch-r-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14.5px;color:var(--cch-ink-2);margin:0 0 18px}
.cch .cch-r-meta .cch-link-btn{padding:0;font-size:14.5px}
/* Size kept: the results headlines are full sentences, too long for the page's h1 size.
   Weight comes from the h1 rule above; line height as in the original design. */
.cch .cch-r-headline{font-size:40px;line-height:1.15;margin:0;color:var(--cch-blue-dark)}
.cch .cch-r-headline:focus{outline:none}
.cch .cch-proofs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cch .cch-proofs li{display:grid;grid-template-columns:24px 1fr;gap:12px}
.cch .cch-proofs svg{width:22px;height:22px;color:var(--cch-blue);margin-top:1px}
.cch .cch-r-sec{padding:52px 0;border-bottom:1px solid var(--cch-line)}
.cch .cch-r-sec:last-of-type{border-bottom:0}
.cch .cch-r-h{margin:0 0 8px}
.cch .cch-r-sub{color:var(--cch-ink-2);margin:0 0 28px}
.cch .cch-r-sub.cch-companion{margin:0}
.cch .cch-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* commute bars */
.cch .cch-trip{display:grid;gap:18px}
.cch .cch-trip-row{display:grid;grid-template-columns:200px 1fr 78px;align-items:center;gap:16px}
.cch .cch-trip-row .cch-lbl{font-size:15.5px;font-weight:600;line-height:1.3}
.cch .cch-trip-row .cch-lbl small{display:block;font-weight:400;color:var(--cch-ink-2);font-size:13.5px}
.cch .cch-track{height:14px;background:var(--cch-wash);border-radius:7px;overflow:hidden}
.cch .cch-track i{display:block;height:100%;border-radius:7px;background:#a9a9a9}
.cch .cch-trip-row.cch-local .cch-track i{background:var(--cch-blue)}
.cch .cch-trip-row .cch-min{font-weight:700;font-size:17px;text-align:right;white-space:nowrap}
.cch .cch-trip-row.cch-local .cch-min{color:var(--cch-blue)}

/* time back */
.cch .cch-big{display:flex;align-items:baseline;gap:14px;margin:0}
.cch .cch-big b{font-family:var(--cch-font-display);font-weight:700;font-size:96px;line-height:.95;color:var(--cch-blue)}
.cch .cch-big span{font-size:22px;font-weight:600}
.cch .cch-big-sub{color:var(--cch-ink-2);margin:10px 0 0}
.cch .cch-ribbon{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.cch .cch-ribbon i{width:22px;height:22px;border-radius:5px;background:var(--cch-blue-tint);border:1.5px solid #8dd3e9}

/* results motion (calculator.js animateResults; skipped with reduced motion) */
.cch .cch-trip.cch-play .cch-track i{transition:width .8s cubic-bezier(.22,.61,.36,1)}
.cch .cch-trip.cch-play .cch-trip-row:nth-child(2) .cch-track i{transition-delay:.15s}
.cch .cch-trip.cch-play .cch-trip-row:nth-child(3) .cch-track i{transition-delay:.45s}
.cch .cch-ribbon.cch-pending i{opacity:0}
.cch .cch-ribbon.cch-play i{animation:cch-pop .3s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--cch-i,0) * 18ms)}
@keyframes cch-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}

/* missing cards */
.cch .cch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cch .cch-r-sec.cch-slim{padding:36px 0}
.cch .cch-rib-cap{font-size:13.5px;color:var(--cch-ink-2);margin:8px 0 0}
.cch .cch-card{border:1px solid var(--cch-line);border-radius:var(--cch-radius);padding:22px 22px 24px;background:var(--cch-white)}
.cch .cch-card h3{font-size:20px;margin:0 0 8px}
.cch .cch-card p{margin:0;color:var(--cch-ink-2)}
.cch .cch-callout{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:var(--cch-wash);border-radius:var(--cch-radius);padding:22px 24px}
.cch .cch-callout svg{width:30px;height:30px;color:var(--cch-blue)}
.cch .cch-callout p{margin:0}
.cch .cch-callout + .cch-callout{margin-top:16px}

/* quality strip */
.cch .cch-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--cch-line);border-radius:var(--cch-radius)}
.cch .cch-strip div{padding:22px 24px;border-left:1px solid var(--cch-line)}
.cch .cch-strip div:first-child{border-left:0}
.cch .cch-strip b{display:block;font-family:var(--cch-font-display);font-size:19px;margin-bottom:6px;font-weight:700}
.cch .cch-strip.cch-four{grid-template-columns:repeat(4,1fr)}

/* next step */
/* Same as HHC's .bg-blue sections */
.cch .cch-next{background:var(--cch-blue);color:#fff}
.cch .cch-next .cch-wrap{padding-top:52px;padding-bottom:52px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cch .cch-next h2{margin:0;max-width:480px}
.cch .cch-next .cch-btns{display:flex;gap:12px;flex-wrap:wrap}
.cch .cch-next .cch-btn{background:#fff;color:var(--cch-blue)}
.cch .cch-next .cch-btn:hover{background:var(--cch-wash)}
.cch .cch-next .cch-btn.cch-ghost{background:transparent;color:#fff;border-color:#fff}
.cch .cch-next .cch-btn.cch-ghost:hover{background:#fff;color:var(--cch-blue)}

/* fine print */
.cch .cch-fine{padding:36px 0 56px;font-size:14.5px;color:var(--cch-ink-2)}
.cch .cch-fine details{border:1px solid var(--cch-line);border-radius:var(--cch-radius-sm);padding:0 18px;margin-bottom:20px;background:var(--cch-white)}
.cch .cch-fine summary{cursor:pointer;font-weight:600;padding:16px 0;font-size:15.5px}
.cch .cch-fine details div{padding:0 0 18px}
.cch .cch-fine p{margin:0 0 8px}
.cch .cch-safety{display:flex;gap:10px;align-items:flex-start;background:var(--cch-alert-tint);color:var(--cch-alert);border-radius:var(--cch-radius-sm);padding:12px 16px;font-weight:600;margin:0 0 10px;font-size:15px}
.cch .cch-safety svg{flex:none;width:20px;height:20px;margin-top:1px}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .cch .cch-wrap{padding:0 28px}
  .cch .cch-hero .cch-wrap{min-height:560px}
  .cch:not([data-cch-ready]){min-height:560px}
  .cch .cch-d-body{padding:40px 48px 32px}
  .cch .cch-r-top .cch-wrap{grid-template-columns:1fr;gap:32px}
  .cch .cch-split{grid-template-columns:1fr;gap:40px}
  .cch .cch-strip.cch-four{grid-template-columns:1fr 1fr}
  .cch .cch-strip.cch-four div:nth-child(3){border-left:0}
  .cch .cch-strip.cch-four div:nth-child(n+3){border-top:1px solid var(--cch-line)}
}
@media (max-width:860px){
  .cch .cch-hero{background:var(--cch-wash)}
  /* The stacked hero is taller than most phone screens; a full screen keeps the footer out of view */
  .cch:not([data-cch-ready]){min-height:100vh;background:var(--cch-wash)}
  .cch .cch-hero .cch-wrap{grid-template-columns:1fr;min-height:0;padding:0}
  .cch .cch-hero-photo{position:relative;width:100%;height:380px}
  .cch .cch-hero-copy{padding:40px 28px 52px;max-width:none}
  .cch .cch-opts.cch-c3{grid-template-columns:1fr 1fr}
}
/* ---------- mobile ---------- */
@media (max-width:600px){
  .cch .cch-wrap{padding:0 20px}
  .cch .cch-hero-photo{height:280px}
  .cch .cch-hero-copy{padding:32px 20px 40px}
  .cch .cch-hero-copy p:not(.cch-eyebrow){font-size:18px}
  .cch .cch-hero-copy .cch-btn{width:100%}
  .cch .cch-overlay{padding:0;align-items:stretch}
  .cch .cch-dialog{border-radius:0;max-width:none;max-height:none;height:100%}
  .cch .cch-d-head{padding:20px 20px 0}
  .cch .cch-close{right:8px;top:8px}
  .cch .cch-d-body{padding:32px 20px 24px}
  .cch .cch-q-help{margin-bottom:24px}
  .cch .cch-opts.cch-c2,.cch .cch-opts.cch-c3{grid-template-columns:1fr}
  .cch .cch-opt{padding:16px;font-size:16.5px}
  .cch .cch-d-foot{flex-direction:column-reverse;align-items:stretch;padding:14px 20px 18px;gap:12px}
  .cch .cch-foot-actions{justify-content:space-between}
  .cch .cch-foot-actions .cch-btn{flex:1}
  .cch .cch-note{justify-content:center;font-size:12.5px}
  .cch .cch-count b{font-size:60px}
  .cch .cch-r-top .cch-wrap{padding-top:32px;padding-bottom:36px}
  .cch .cch-r-headline{font-size:29px}
  .cch .cch-r-sec{padding:40px 0}
  .cch .cch-trip-row{grid-template-columns:1fr auto;gap:8px 12px}
  .cch .cch-trip-row .cch-track{grid-column:1/-1;grid-row:2}
  .cch .cch-big b{font-size:72px}
  .cch .cch-strip,.cch .cch-strip.cch-four{grid-template-columns:1fr}
  .cch .cch-strip div,.cch .cch-strip.cch-four div{border-left:0;border-top:1px solid var(--cch-line)}
  .cch .cch-strip div:first-child{border-top:0}
  .cch .cch-next .cch-btns,.cch .cch-next .cch-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.cch *{transition:none!important;animation:none!important}}