/* The Site Starter on /start (src/pages/start/index.astro). Ported from the
   Site Starter artifact; every rule is scoped under .starter so nothing here
   reaches the rest of buoyify.com. The extra faces are for the style previews. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/fraunces-600-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('/fonts/nunito-700-800-latin.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/cormorant-garamond-500-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-700-latin.woff2') format('woff2'); }
/* The page's own frame, in place of the artifact's header and footer. */
/* The artifact viewer hid [hidden] for the page; here the page does it itself. */
.starter [hidden]:not([hidden=until-found i]) { display: none !important; }
.starter .st-wrap { max-width: 1280px; margin: 0 auto; }
.starter .st-gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.starter .status.ok { color: #2f7d46; }
.starter .btn[disabled] { opacity: .55; cursor: default; }
.starter { color-scheme: light;
  --ink: #0d1826; --cream: #fbf8f3; --sky: #a6d4f5; --sky-deep: #5aa9e6; --pale: #eaf2fa; --white: #ffffff;
  --tangerine: #ff6a2b; --peony: #cc70bd; --butter: #e6e397; --cornflower: #5d85d7; --pistachio: #b5d687;
  --rule: rgba(13, 24, 38, 0.12); --line: rgba(13, 24, 38, 0.22); --muted: #6f7a88; --soon: #f6f1df;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --font-body: "Inter Tight", system-ui, sans-serif; }
.starter * { box-sizing: border-box; }
.starter { background: var(--cream); color: var(--ink); font: 400 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
.starter button, .starter input, .starter select, .starter textarea { font: inherit; color: inherit; }
.starter :focus-visible { outline: 3px solid var(--cornflower); outline-offset: 3px; }
.starter .ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.starter .page { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 48px 80px; }
.starter .side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); }
.starter .panel { position: relative; background: var(--sky); border-radius: 34px; padding: 32px 26px 26px; overflow: hidden; display: grid; gap: 14px; }
.starter .t { margin: 0; font: 800 clamp(40px, 4.6vw, 54px)/.92 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.starter .t em { display: block; font: italic 400 1em/1 var(--font-accent); text-transform: none; margin-top: 4px; }
.starter .lead { margin: 0; font-size: 15.5px; line-height: 1.55; }
.starter .time { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin: 0; }
.starter .time .ico { width: 18px; height: 18px; }
.starter .panel.started .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.starter .panel.started .lead, .starter .panel.started .time { display: none; }
.starter .panel.started { padding-top: 18px; }
.starter .so-far { background: var(--white); border-radius: 22px; padding: 12px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1.5px var(--rule); min-width: 0; }
.starter .so-far-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; padding: 2px 2px 0 4px; }
.starter .page-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.starter .page-tabs button { flex: none; border: 0; border-radius: 999px; background: var(--pale); padding: 6px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.starter .page-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.starter .mini { position: relative; border-radius: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; box-shadow: inset 0 0 0 1px var(--rule); background: var(--cream); }
.starter .mini-sizer { position: relative; }
.starter .mini-scale { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.starter .link-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.starter .link-btn .ico { width: 16px; height: 16px; }
.starter .seg { display: inline-flex; background: var(--pale); border-radius: 999px; padding: 3px; }
.starter .seg button { border: 0; background: none; border-radius: 999px; padding: 5px 11px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.starter .seg button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.starter .buoy { position: absolute; right: 12px; bottom: -10px; width: 90px; height: auto; display: none; }
.starter .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.starter .steps button { width: 100%; display: grid; justify-items: center; gap: 4px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--white) 55%, transparent); padding: 8px 4px 7px; font-weight: 700; font-size: 12px; cursor: pointer; }
.starter .steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-body); font-style: normal; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .steps button[aria-current="step"] { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .steps button[aria-current="step"] i { background: var(--ink); color: var(--white); }
.starter .panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; padding-right: 92px; }
.starter .panel-foot p { margin: 0; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.starter .reset-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; }
.starter .reset-ask .btn { padding: 8px 13px; font-size: 11.5px; }
@media (max-width: 1000px) {
  .starter .panel-foot { padding-right: 0; }
}
.starter .form { display: grid; gap: 14px; }
.starter .grp { margin: 0; border: 0; padding: 26px 28px 28px; background: var(--white); border-radius: 26px; box-shadow: inset 0 0 0 1.5px var(--rule); min-width: 0; }
.starter .grp > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; font: 800 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.starter .grp > legend + * { clear: both; }
.starter .num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); font: 700 15px var(--font-body); }
.starter .intro { margin: 4px 0 0; color: var(--muted); line-height: 1.5; max-width: 600px; }
.starter .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 18px; }
.starter .fld { display: grid; gap: 8px; align-content: start; min-width: 0; }
.starter .fld.wide { grid-column: 1 / -1; }
.starter .lbl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; font-size: 13.5px; padding: 0; }
.starter .opt { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.starter .help { margin: 0; font-size: 12.5px; color: var(--muted); }
.starter .sub { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.starter .stack { display: grid; gap: 10px; }
.starter .stack .tiles + .sub { margin-top: 8px; }
.starter .in { position: relative; display: flex; gap: 8px; }
.starter input[type="text"], .starter input[type="email"], .starter input[type="url"], .starter textarea { width: 100%; font-size: 16px; color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.starter input::placeholder, .starter textarea::placeholder { color: #8b95a3; }
.starter input:hover, .starter textarea:hover { border-color: rgba(13, 24, 38, .4); }
.starter input:focus, .starter textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cornflower) 30%, transparent); }
.starter textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.starter .in.pre input { padding-left: 32px; }
.starter .prefix { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-weight: 700; color: var(--muted); pointer-events: none; }
.starter fieldset.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.starter .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.starter .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.starter .tile { position: relative; cursor: pointer; }
.starter .tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.starter .tile > span { display: grid; gap: 8px; justify-items: start; align-content: start; height: 100%; padding: 14px; border-radius: 18px; background: var(--pale); box-shadow: inset 0 0 0 1.5px transparent; transition: background-color .15s, box-shadow .15s; }
.starter .tile .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--white); flex: none; }
.starter .tile b { font-size: 14px; line-height: 1.25; }
.starter .tile small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.starter .tile:hover > span { box-shadow: inset 0 0 0 1.5px rgba(13, 24, 38, .3); }
.starter .tile input:checked + span { background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .tile input:checked + span .ic { background: var(--ink); color: var(--white); }
.starter .tile input:focus-visible + span { outline: 3px solid var(--cornflower); outline-offset: 3px; }
.starter .tile .tick { position: absolute; top: 50%; translate: 0 -50%; right: 12px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); display: grid; place-items: center; }
.starter .tile .tick svg { width: 12px; height: 12px; opacity: 0; }
.starter .tile input:checked ~ .tick { background: var(--ink); }
.starter .tile input:checked ~ .tick svg { opacity: 1; stroke: var(--white); }
.starter .tile.soon > span { background: var(--soon); }
.starter .feat { display: flex; flex-direction: column; min-width: 0; }
.starter .feat > .tile { flex: 1; }
.starter .feat > .tile > span { border-radius: 18px 18px 0 0; }
.starter .tile.fixed > span { background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--ink); cursor: default; }
.starter .tile.fixed .ic { background: var(--ink); color: var(--white); }
.starter .cfg { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; margin-top: -1.5px; padding: 9px 12px; border-radius: 0 0 18px 18px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.starter .cfg .ico { width: 16px; height: 16px; }
.starter .cfg b { font-weight: 800; }
.starter .cfg-go { margin-left: auto; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.starter .cfg:hover { background: var(--pale); }
.starter .designer { position: fixed; z-index: 18; inset: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--white); border-radius: 26px; box-shadow: 0 0 0 1.5px var(--ink), 0 30px 60px -20px rgba(13, 24, 38, .45); overflow: hidden; }
@media (min-width: 1001px) {
  .starter .designer { left: calc(max(16px, (100vw - 1280px) / 2 + 16px) + 528px); right: max(16px, calc((100vw - 1280px) / 2 + 16px)); }
}
.starter .designer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; box-shadow: inset 0 -1.5px 0 var(--rule); }
.starter .designer-top h2 { margin: 0; font: 800 26px/1 var(--font-display); text-transform: uppercase; }
.starter .designer-top p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.starter .designs { overflow-y: auto; padding: 16px 22px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; background: var(--cream); }
.starter .design { position: relative; cursor: pointer; display: grid; gap: 10px; padding: 10px 10px 14px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule); }
.starter .design input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.starter .design:hover { box-shadow: inset 0 0 0 1.5px rgba(13, 24, 38, .35); }
.starter .design:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); background: var(--sky); }
.starter .design:has(input:focus-visible) { outline: 3px solid var(--cornflower); outline-offset: 3px; }
.starter .design-shot { position: relative; height: 210px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); background: var(--cream); pointer-events: none; }
.starter .design-scale { position: absolute; top: 0; left: 0; width: 1000px; transform-origin: 0 0; }
.starter .design-shot::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, rgba(251, 248, 243, .9)); }
.starter .design-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.starter .design-name b { font-size: 15px; }
.starter .design-name small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.starter .design .now { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--white); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.starter .designer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px; box-shadow: inset 0 1.5px 0 var(--rule); }
.starter .designer-foot p { margin: 0; font-size: 13px; color: var(--muted); max-width: 46ch; }
@media (max-width: 640px) {
  .starter .designs { grid-template-columns: minmax(0, 1fr); padding-inline: 14px; }
  .starter .designer-top { padding: 16px 16px 10px; }
  .starter .designer-foot { padding: 12px 16px; }
  .starter .design-shot { height: 190px; }
}
.starter .picked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.starter .picked .tile { flex: 1 1 220px; max-width: 340px; }
.starter .picked .tile > span { cursor: default; }
.starter .tile .badge.ok { background: var(--pistachio); }
.starter .tile.compact > span { display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 12px; }
.starter .tile.compact.radio > span { padding-right: 12px; }
.starter .tile.compact .tx { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.starter .tile.compact small { font-size: 12px; }
.starter .badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--butter); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.starter .swatch { display: flex; gap: 4px; }
.starter .swatch i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .aa { font-size: 26px; line-height: 1; }
.starter .look-demo { width: 100%; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-radius: 12px; background: #fbf8f3; color: #0d1826; box-shadow: inset 0 0 0 1px var(--rule); }
.starter .look-demo b { font-size: 30px; line-height: 1; }
.starter .look-demo i { width: 54px; height: 20px; background: #0d1826; }
.starter .look-demo.clean b { font: 700 28px "Inter Tight", sans-serif; }
.starter .look-demo.clean i { border-radius: 999px; }
.starter .look-demo.warm { border-radius: 22px; background: #f6ede2; }
.starter .look-demo.warm b { font: 700 30px Fraunces, Georgia, serif; }
.starter .look-demo.warm i { border-radius: 999px; background: #b4553a; }
.starter .look-demo.bold { border-radius: 4px; background: #ffd33d; box-shadow: inset 0 0 0 2.5px #0d1826; }
.starter .look-demo.bold b { font: 800 34px "Barlow Condensed", sans-serif; text-transform: uppercase; }
.starter .look-demo.bold i { border-radius: 3px; }
.starter .look-demo.elegant { border-radius: 0; background: #f7f3ee; }
.starter .look-demo.elegant b { font: 500 34px "Cormorant Garamond", Georgia, serif; }
.starter .look-demo.elegant i { border-radius: 0; height: 18px; background: none; box-shadow: inset 0 0 0 1px #0d1826; }
.starter .look-demo.natural { border-radius: 30px; background: #e8eddc; }
.starter .look-demo.natural b { font: 800 28px Nunito, sans-serif; color: #2f4a3a; }
.starter .look-demo.natural i { border-radius: 999px; background: #2f4a3a; }
.starter .look-demo.dark { background: #15181c; color: #f1efe9; }
.starter .look-demo.dark b { font: 800 28px "Inter Tight", sans-serif; }
.starter .look-demo.dark i { border-radius: 8px; background: #ff6a2b; }
.starter .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.starter .chip { position: relative; cursor: pointer; }
.starter .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.starter .chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--pale); box-shadow: inset 0 0 0 1.5px transparent; transition: background-color .15s, box-shadow .15s; }
.starter .chip span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--white); transition: box-shadow .15s; }
.starter .chip.box span::before { border-radius: 4px; }
.starter .chip:hover span { box-shadow: inset 0 0 0 1.5px rgba(13, 24, 38, .3); }
.starter .chip input:checked + span { background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .chip input:checked + span::before { box-shadow: inset 0 0 0 4.5px var(--ink); }
.starter .chip input:disabled + span { cursor: default; opacity: .75; }
.starter .chip input:focus-visible + span { outline: 3px solid var(--cornflower); outline-offset: 3px; }
.starter .chip .x { border: 0; background: var(--white); width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; margin-left: -6px; position: relative; z-index: 1; }
.starter .more { border-radius: 18px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--rule); }
.starter .more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 14px 16px; font-weight: 700; font-size: 14px; }
.starter .more > summary::-webkit-details-marker { display: none; }
.starter .more > summary .chev { transition: rotate .15s; width: 18px; height: 18px; margin-left: auto; }
.starter .more[open] > summary .chev { rotate: 180deg; }
.starter .more > div { display: grid; gap: 18px; padding: 4px 16px 18px; }
.starter .upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.starter .upload .thumb { width: 64px; height: 64px; border-radius: 16px; background: var(--pale); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.starter .upload .thumb img { width: 100%; height: 100%; object-fit: contain; }
.starter .upload label.btn { cursor: pointer; }
.starter .upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.starter .colors { display: flex; flex-wrap: wrap; gap: 12px; }
.starter .colors label { display: grid; gap: 4px; justify-items: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.starter .colors input { width: 48px; height: 48px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.starter .colors input::-webkit-color-swatch-wrapper { padding: 0; }
.starter .colors input::-webkit-color-swatch { border: 1.5px solid var(--ink); border-radius: 50%; }
.starter .toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.starter .toggle input { width: 20px; height: 20px; accent-color: var(--ink); }
.starter .btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 22px; font: 800 13.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--white); cursor: pointer; text-decoration: none; }
.starter .btn .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.starter .btn.light { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .btn.small { padding: 10px 16px; font-size: 12px; }
.starter .btn.big { padding: 16px 26px; font-size: 14px; }
.starter .send { display: grid; justify-items: start; gap: 12px; padding: 8px 4px 0; }
.starter .fine { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 460px; }
.starter .kit { display: grid; gap: 18px; }
.starter .kit-head { display: flex; gap: 14px; align-items: center; }
.starter .kit-head .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--pistachio); display: grid; place-items: center; flex: none; }
.starter .kit h2 { margin: 0; font: 800 32px/1 var(--font-display); text-transform: uppercase; }
.starter .kit h3 { margin: 0 0 10px; font: 800 20px/1 var(--font-display); text-transform: uppercase; }
.starter .shot { position: relative; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--rule); background: var(--cream); }
.starter .shot-scale { position: absolute; top: 0; left: 0; width: 1200px; transform-origin: 0 0; pointer-events: none; }
.starter .sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.starter .sum div { background: var(--pale); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.starter .sum dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.starter .sum dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.starter .list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.starter .list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.starter .list li .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--cornflower); }
.starter .pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.starter .pages li { display: inline-flex; gap: 6px; align-items: center; background: var(--pale); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; }
.starter .next { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.starter .next li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.starter .next .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tone); font-weight: 800; font-size: 13.5px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.starter .next strong { display: block; font-size: 15px; padding-top: 4px; }
.starter .next p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.starter .team { border-radius: 18px; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--rule); }
.starter .team > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 14px; }
.starter .team > div { padding: 0 16px 16px; display: grid; gap: 6px; font-size: 13.5px; }
.starter .team p { margin: 0; line-height: 1.9; }
.starter .team code { font: 500 12.5px ui-monospace, Consolas, monospace; background: var(--white); border-radius: 6px; padding: 1px 6px; box-shadow: inset 0 0 0 1px var(--rule); }
.starter .row-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.starter .status { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 1.4em; }
.starter .status.bad { color: #b3261e; }
.starter input[aria-invalid="true"] { border-color: #b3261e; }
.starter .kit .kit-contact, .starter .fld > .fields { margin-top: 0; }
.starter .overlay { position: fixed; inset: 0; z-index: 20; background: rgba(13, 24, 38, .55); display: grid; padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px)); }
.starter .sheet { background: var(--white); border-radius: 24px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; max-width: 1240px; width: 100%; margin: 0 auto; }
.starter .sheet-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; }
.starter .sheet-top b { font: 800 20px/1 var(--font-display); text-transform: uppercase; }
.starter .sheet .page-tabs { padding: 4px 16px 10px; box-shadow: inset 0 -1.5px 0 var(--rule); }
.starter .close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pale); display: grid; place-items: center; cursor: pointer; }
.starter .sheet-body { overflow: auto; background: var(--pale); padding: 16px; }
.starter .frame { margin: 0 auto; width: 100%; max-width: 1200px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--rule); background: var(--cream); transition: max-width .2s; }
.starter .frame.phone { max-width: 390px; }
.starter .toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); translate: -50% 0; z-index: 15; display: flex; gap: 12px; align-items: center; width: max-content; max-width: calc(100vw - 32px); background: var(--ink); color: var(--white); border-radius: 999px; padding: 8px 8px 8px 18px; font-weight: 600; font-size: 14px; box-shadow: 0 12px 30px -12px rgba(13, 24, 38, .6); }
@media (min-width: 1001px) {
  .starter .toast { left: max(32px, calc((100vw - 1280px) / 2 + 32px)); translate: none; max-width: 468px; width: auto; border-radius: 22px; }
}
.starter .toast button { flex: none; border: 0; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; }
@media (max-width: 1000px) {
  .starter .page { grid-template-columns: minmax(0, 1fr); padding-block: 26px 60px; }
  .starter .side { position: static; }
}
@media (min-width: 1001px) {
  .starter .buoy { display: block; }
}
@media (max-width: 640px) {
  .starter .grp { padding: 22px 16px 24px; border-radius: 22px; }
  .starter .fields, .starter .sum { grid-template-columns: minmax(0, 1fr); }
  .starter .tiles, .starter .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .starter .tile.compact > span { padding: 10px 30px 10px 10px; gap: 8px; }
  .starter .tile.compact.radio > span { padding-right: 10px; }
  .starter .tile.compact .ic { width: 34px; height: 34px; }
  .starter .tile .tick { right: 8px; width: 18px; height: 18px; }
  .starter .tile.compact b { font-size: 13px; }
  .starter .tile.compact small { font-size: 11.5px; }
  .starter .badge { font-size: 9.5px; letter-spacing: .03em; padding: 2px 6px; }
  .starter .panel { border-radius: 26px; padding: 24px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .starter * { transition: none !important; }
}
.starter .site { --s-ink: #0d1826; --s-bg: #fbf8f3; --s-primary: #0d1826; --s-accent: #ff6a2b; --s-soft: #a6d4f5; --s-card: #ffffff; --s-muted: #5a6573; --s-rule: color-mix(in srgb, var(--s-ink) 11%, transparent);
  --s-head: "Inter Tight", system-ui, sans-serif; --s-body: "Inter Tight", system-ui, sans-serif; --s-head-weight: 700; --s-head-case: none; --s-head-track: -.01em; --s-h1: 6.2cqi;
  --s-r: 18px; --s-r-img: 20px; --s-r-btn: 999px; --s-card-line: 1px; --s-eyebrow-track: .14em;
  container-type: inline-size; background: var(--s-bg); color: var(--s-ink); font: 400 15px/1.55 var(--s-body); text-align: left; }
.starter .site * { box-sizing: border-box; }
.starter .site.look-warm { --s-head: Fraunces, Georgia, serif; --s-r: 26px; --s-r-img: 30px; }
.starter .site.look-bold { --s-head: "Barlow Condensed", "Arial Narrow", sans-serif; --s-head-weight: 800; --s-head-case: uppercase; --s-head-track: 0; --s-h1: 8.4cqi; --s-r: 4px; --s-r-img: 6px; --s-r-btn: 6px; --s-card-line: 2px; --s-rule: var(--s-ink); }
.starter .site.look-elegant { --s-head: "Cormorant Garamond", Georgia, serif; --s-head-weight: 600; --s-h1: 7cqi; --s-r: 0; --s-r-img: 0; --s-r-btn: 0; --s-eyebrow-track: .32em; }
.starter .site.look-natural { --s-head: Nunito, "Segoe UI", sans-serif; --s-body: Nunito, "Segoe UI", sans-serif; --s-head-weight: 800; --s-r: 30px; --s-r-img: 220px 220px 26px 26px; }
.starter .site.look-dark { --s-bg: #121417; --s-ink: #f1efe9; --s-card: #1b1f24; --s-muted: #a7adb4; --s-soft: #2a3038; --s-head-weight: 800; --s-r: 14px; --s-r-img: 14px; --s-r-btn: 10px; }
.starter .site h2, .starter .site h3, .starter .site .s-h1 { font-family: var(--s-head); font-weight: var(--s-head-weight); text-transform: var(--s-head-case); letter-spacing: var(--s-head-track); line-height: 1.06; margin: 0; text-wrap: balance; }
.starter .site p { margin: 0; }
.starter .s-wrap { padding: 56px 40px; display: grid; gap: 22px; }
.starter .s-wrap.tight { padding-block: 34px; }
.starter .s-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: var(--s-eyebrow-track); text-transform: uppercase; color: var(--s-accent); }
.starter .s-h1 { font-size: clamp(30px, var(--s-h1), 70px); }
.starter .site h2 { font-size: clamp(24px, 3.8cqi, 40px); }
.starter .site h3 { font-size: 19px; }
.starter .s-lead { font-size: 17px; color: var(--s-muted); max-width: 52ch; }
.starter .s-head { display: grid; gap: 10px; max-width: 640px; }
.starter .s-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.starter .s-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: var(--s-r-btn); font-weight: 700; font-size: 14px; background: var(--s-primary); color: var(--s-bg); border: 2px solid var(--s-primary); }
.starter .s-btn.alt { background: transparent; color: var(--s-primary); }
.starter .s-btn.accent { background: var(--s-accent); border-color: var(--s-accent); color: #0d1826; }
.starter .look-elegant .s-btn { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-width: 1px; }
.starter .look-bold .s-btn { text-transform: uppercase; letter-spacing: .04em; }
.starter .look-dark .s-btn { background: var(--s-accent); border-color: var(--s-accent); color: #0d1826; }
.starter .look-dark .s-btn.alt { background: transparent; color: var(--s-ink); border-color: var(--s-ink); }
.starter .s-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.starter .s-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starter .s-card { background: var(--s-card); border: var(--s-card-line) solid var(--s-rule); border-radius: var(--s-r); padding: 20px; display: grid; gap: 8px; align-content: start; }
.starter .s-card p { color: var(--s-muted); font-size: 14px; }
.starter .look-elegant .s-card { background: transparent; border-width: 0 0 1px; padding: 18px 0; }
.starter .s-ico { width: 44px; height: 44px; border-radius: calc(var(--s-r) * .6); background: color-mix(in srgb, var(--s-soft) 70%, var(--s-bg)); display: grid; place-items: center; color: var(--s-primary); }
.starter .look-dark .s-ico { color: var(--s-accent); }
.starter .s-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.starter .s-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.starter .s-photo { position: relative; border-radius: var(--s-r-img); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: radial-gradient(120% 90% at 20% 15%, color-mix(in srgb, var(--s-soft) 85%, white), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--s-primary) 50%, var(--s-soft)), color-mix(in srgb, var(--s-accent) 40%, var(--s-soft))); }
.starter .look-dark .s-photo { background: radial-gradient(120% 90% at 20% 15%, #3a4048, transparent 60%), linear-gradient(135deg, #20252b, color-mix(in srgb, var(--s-accent) 35%, #20252b)); }
.starter .s-photo.tall { aspect-ratio: 4 / 5; }
.starter .s-photo.sq { aspect-ratio: 1; }
.starter .s-photo.alt2 { background: linear-gradient(160deg, color-mix(in srgb, var(--s-accent) 45%, var(--s-soft)), color-mix(in srgb, var(--s-primary) 35%, var(--s-bg))); }
.starter .s-photo.alt3 { background: linear-gradient(20deg, color-mix(in srgb, var(--s-soft) 80%, var(--s-bg)), color-mix(in srgb, var(--s-primary) 60%, var(--s-soft))); }
.starter .site .s-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.starter .s-video img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: s-drift 10s ease-in-out infinite alternate; }
.starter .s-video b { position: relative; z-index: 1; }
@keyframes s-drift { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-3%, -2%); } }
.starter .site .s-photo.s-map { background: color-mix(in srgb, var(--s-soft) 30%, var(--s-bg)); }
.starter .s-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.starter .m-water { fill: none; stroke: color-mix(in srgb, #5aa9e6 50%, var(--s-soft)); stroke-width: 22; stroke-linecap: round; }
.starter .m-park { fill: color-mix(in srgb, #8cc084 42%, var(--s-bg)); }
.starter .m-case { fill: none; stroke: color-mix(in srgb, var(--s-ink) 14%, transparent); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.starter .m-road { fill: none; stroke: var(--s-card); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.starter .m-minor { fill: none; stroke: var(--s-card); stroke-width: 4; stroke-linecap: round; }
.starter .m-zone { fill: color-mix(in srgb, var(--s-accent) 14%, transparent); stroke: var(--s-accent); stroke-width: 2.5; stroke-dasharray: 8 7; }
.starter .m-dot { fill: var(--s-primary); stroke: var(--s-card); stroke-width: 3; }
.starter .m-pin { fill: var(--s-accent); stroke: var(--s-card); stroke-width: 3; }
.starter .m-pin-hole { fill: var(--s-card); }
.starter .m-label { font: 700 15px var(--s-body); fill: var(--s-ink); paint-order: stroke; stroke: var(--s-bg); stroke-width: 5px; stroke-linejoin: round; }
.starter .m-label.big { font-size: 19px; font-weight: 800; }
.starter .m-street { font: 700 10.5px var(--s-body); letter-spacing: .08em; fill: var(--s-muted); }
.starter .look-dark .m-road, .starter .look-dark .m-minor { stroke: #3a414b; }
.starter .look-dark .m-case { stroke: rgba(0, 0, 0, .35); }
.starter .look-dark .m-park { fill: #22312a; }
.starter .look-dark .m-water { stroke: #213a52; }
.starter .look-dark .m-dot { fill: var(--s-ink); }
.starter .s-photo span { position: absolute; left: 12px; bottom: 12px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, #fbf8f3 88%, transparent); color: #0d1826; border-radius: 999px; padding: 3px 10px; }
.starter .s-sample { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.starter .site [data-sec] { position: relative; }
.starter .site [data-sec].s-flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 10px var(--s-accent); animation: s-flash 1.8s ease-out forwards; }
@keyframes s-flash { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
.starter .s-bar { background: var(--s-primary); color: var(--s-bg); text-align: center; font-size: 13px; font-weight: 600; padding: 9px 16px; }
.starter .look-dark .s-bar { background: var(--s-accent); color: #0d1826; }
.starter .s-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px; background: var(--s-bg); border-bottom: 1px solid var(--s-rule); }
.starter .look-bold .s-nav { border-bottom-width: 2px; }
.starter .s-nav.center { flex-direction: column; gap: 10px; }
.starter .s-logo { display: flex; align-items: center; gap: 10px; font: var(--s-head-weight) 21px/1 var(--s-head); text-transform: var(--s-head-case); color: var(--s-primary); }
.starter .look-dark .s-logo { color: var(--s-ink); }
.starter .s-logo img { height: 38px; width: auto; max-width: 170px; object-fit: contain; }
.starter .s-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; font-weight: 600; align-items: center; }
.starter .s-links .on { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--s-accent); }
.starter .s-burger { display: grid; gap: 4px; width: 24px; }
.starter .s-burger i { height: 2.5px; border-radius: 2px; background: var(--s-ink); }
.starter .s-burger.phone { display: none; }
.starter .s-call { white-space: nowrap; }
.starter .s-call .short { display: none; }
.starter .s-hero-full { position: relative; min-height: 470px; display: grid; align-items: end; }
.starter .s-hero-full > .s-photo { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.starter .s-hero-wide { padding: 22px 40px 0; }
.starter .s-frame { position: relative; min-height: 480px; border-radius: calc(var(--s-r) + 6px); overflow: hidden; display: grid; align-items: end; }
.starter .site .s-fill { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.starter .site .s-fill span { top: 14px; bottom: auto; }
.starter .site .s-fill .s-dots { top: auto; bottom: 14px; }
.starter .site .s-fill.s-video { place-items: center end; padding-right: 16%; }
.starter .s-hero-card { position: relative; margin: 40px; max-width: 560px; background: color-mix(in srgb, var(--s-bg) 93%, transparent); border-radius: var(--s-r); padding: 28px; display: grid; gap: 16px; }
.starter .s-slides { position: relative; aspect-ratio: 4 / 5; border-radius: var(--s-r-img); overflow: hidden; }
.starter .s-slides .s-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; animation: s-fade 12s infinite; opacity: 0; }
.starter .s-slides .s-photo:nth-child(2) { animation-delay: 4s; }
.starter .s-slides .s-photo:nth-child(3) { animation-delay: 8s; }
.starter .s-dots { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 5px; z-index: 2; }
.starter .s-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fbf8f3; opacity: .85; }
@keyframes s-fade { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
.starter .s-video { position: relative; aspect-ratio: 4 / 5; border-radius: var(--s-r-img); overflow: hidden; background: linear-gradient(110deg, color-mix(in srgb, var(--s-primary) 70%, black), color-mix(in srgb, var(--s-soft) 60%, var(--s-primary)), color-mix(in srgb, var(--s-primary) 70%, black)); background-size: 220% 100%; animation: s-pan 9s ease-in-out infinite alternate; display: grid; place-items: center; }
.starter .s-video b { width: 66px; height: 66px; border-radius: 50%; background: color-mix(in srgb, #fbf8f3 90%, transparent); display: grid; place-items: center; }
.starter .s-video b::after { content: ""; border-left: 18px solid #0d1826; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.starter .s-video span { position: absolute; left: 12px; bottom: 12px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, #fbf8f3 88%, transparent); color: #0d1826; border-radius: 999px; padding: 3px 10px; }
@keyframes s-pan { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .starter .s-slides .s-photo { animation: none; }
  .starter .s-slides .s-photo:first-child { opacity: 1; }
  .starter .s-video, .starter .s-video img { animation: none; }
}
.starter .s-pagehead { background: color-mix(in srgb, var(--s-soft) 30%, var(--s-bg)); padding-block: 64px 48px; }
.starter .look-bold .s-pagehead { background: var(--s-primary); color: var(--s-bg); }
.starter .look-bold .s-pagehead .s-lead { color: color-mix(in srgb, var(--s-bg) 80%, transparent); }
.starter .s-soft { background: color-mix(in srgb, var(--s-soft) 32%, var(--s-bg)); }
.starter .s-dark { background: var(--s-primary); color: var(--s-bg); }
.starter .look-dark .s-dark { background: var(--s-card); color: var(--s-ink); }
.starter .s-dark .s-lead { color: color-mix(in srgb, currentColor 78%, transparent); }
.starter .s-price { font: var(--s-head-weight) 32px/1 var(--s-head); color: var(--s-primary); }
.starter .look-dark .s-price { color: var(--s-accent); }
.starter .s-card.pick { border-color: var(--s-primary); border-width: 2px; }
.starter .s-stars { color: var(--s-accent); letter-spacing: 2px; }
.starter .s-who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.starter .s-who i { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--s-soft) 70%, var(--s-bg)); }
.starter .s-faq { display: grid; border-top: 1px solid var(--s-rule); }
.starter .s-faq div { padding: 15px 0; border-bottom: 1px solid var(--s-rule); display: grid; gap: 6px; }
.starter .s-faq b { display: flex; justify-content: space-between; gap: 12px; }
.starter .s-faq b::after { content: "+"; color: var(--s-muted); }
.starter .s-faq .open b::after { content: "−"; }
.starter .s-form { display: grid; gap: 10px; background: var(--s-card); border-radius: var(--s-r); padding: 22px; border: var(--s-card-line) solid var(--s-rule); }
.starter .s-input { height: 44px; border-radius: calc(var(--s-r) * .6); border: 1.5px solid color-mix(in srgb, var(--s-ink) 18%, transparent); background: var(--s-bg); display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--s-muted); }
.starter .s-input.area { height: 92px; align-items: flex-start; padding-top: 10px; }
.starter .s-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.starter .s-cal i { aspect-ratio: 1; border-radius: 9px; background: color-mix(in srgb, var(--s-ink) 6%, transparent); display: grid; place-items: center; font-size: 11px; font-style: normal; color: var(--s-muted); }
.starter .s-cal i.on { background: var(--s-card); border: 1.5px solid var(--s-primary); color: var(--s-ink); }
.starter .s-cal i.pick { background: var(--s-primary); color: var(--s-bg); }
.starter .look-dark .s-cal i.on { border-color: var(--s-accent); }
.starter .look-dark .s-cal i.pick { background: var(--s-accent); color: #0d1826; }
.starter .s-times { display: flex; flex-wrap: wrap; gap: 8px; }
.starter .s-times span { border: 1.5px solid color-mix(in srgb, var(--s-ink) 22%, transparent); border-radius: 999px; padding: 5px 13px; font-size: 13px; }
.starter .s-times span.pick { background: var(--s-primary); color: var(--s-bg); border-color: var(--s-primary); }
.starter .s-menu { display: grid; gap: 12px; }
.starter .s-menu div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--s-ink) 22%, transparent); padding-bottom: 10px; }
.starter .s-menu small { display: block; color: var(--s-muted); }
.starter .s-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.starter .s-news { display: flex; gap: 10px; flex-wrap: wrap; }
.starter .s-news .s-input { flex: 1; min-width: 180px; }
.starter .s-pop-card { max-width: 320px; margin-left: auto; background: var(--s-card); border: 2px solid var(--s-primary); border-radius: var(--s-r); padding: 18px; display: grid; gap: 8px; }
.starter .s-hours { display: grid; gap: 6px; font-size: 14px; }
.starter .s-hours div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--s-rule); padding-bottom: 6px; }
.starter .s-person { display: grid; gap: 6px; }
.starter .s-person .s-photo { aspect-ratio: 1; }
.starter .s-ticks { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starter .s-ticks div { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.starter .s-ticks div::before { content: "✓"; color: var(--s-accent); font-weight: 800; }
.starter .s-sched { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.starter .s-sched > div { display: grid; gap: 6px; align-content: start; }
.starter .s-sched b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--s-muted); }
.starter .s-sched span { background: var(--s-card); border: var(--s-card-line) solid var(--s-rule); border-radius: calc(var(--s-r) * .6); padding: 8px; font-size: 12.5px; font-weight: 600; }
.starter .s-sched small { display: block; font-weight: 400; color: var(--s-muted); }
.starter .s-event { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--s-rule); }
.starter .s-event .d { text-align: center; font: var(--s-head-weight) 26px/1 var(--s-head); }
.starter .s-event .d small { display: block; font: 700 11px var(--s-body); letter-spacing: .1em; color: var(--s-accent); }
.starter .s-foot { padding: 40px; display: grid; gap: 16px; background: var(--s-ink); color: var(--s-bg); }
.starter .look-dark .s-foot { background: #0b0c0e; color: var(--s-ink); }
.starter .s-foot p, .starter .s-foot small { color: color-mix(in srgb, currentColor 72%, transparent); }
.starter .s-foot .s-logo { color: inherit; }
.starter .s-social { display: flex; flex-wrap: wrap; gap: 8px; }
.starter .s-social span { border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.starter .p-card { --tint: var(--s-soft); position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; background: color-mix(in srgb, var(--tint) 34%, var(--s-bg)); border: 2px solid var(--s-ink); border-radius: calc(var(--s-r) + 8px); box-shadow: 5px 5px 0 var(--s-ink); }
.starter .p-card p { color: color-mix(in srgb, var(--s-ink) 78%, transparent); font-size: 14px; }
.starter .s-grid > .p-card:nth-child(3n+2), .starter .p-tint-2 { --tint: var(--s-accent); }
.starter .s-grid > .p-card:nth-child(3n), .starter .p-tint-3 { --tint: color-mix(in srgb, var(--s-primary) 55%, var(--s-soft)); }
.starter .p-ico { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--s-ink); background: var(--s-card); display: grid; place-items: center; color: var(--s-ink); }
.starter .p-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.starter .p-link { font-weight: 800; font-size: 13.5px; }
.starter .p-sticker { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 2px solid var(--s-ink); border-radius: 999px; background: var(--s-accent); color: #0d1826; font-weight: 800; font-size: 12.5px; rotate: -4deg; white-space: nowrap; }
.starter .v-playful .s-eyebrow { justify-self: start; background: color-mix(in srgb, var(--s-accent) 22%, var(--s-bg)); color: var(--s-ink); border-radius: 999px; padding: 4px 12px; }
.starter .p-photo { position: relative; }
.starter .p-photo > .s-photo { border: 2px solid var(--s-ink); box-shadow: 7px 7px 0 var(--s-ink); rotate: -2deg; }
.starter .p-photo > .p-sticker { position: absolute; right: 10px; top: -10px; rotate: 6deg; font-size: 14px; padding: 7px 15px; }
.starter .p-bubble:nth-child(odd) { rotate: -1.2deg; }
.starter .p-bubble:nth-child(even) { rotate: 1.2deg; }
.starter .p-bubble::after { content: ""; position: absolute; left: 30px; bottom: -13px; width: 22px; height: 22px; background: inherit; border: solid var(--s-ink); border-width: 0 2px 2px 0; rotate: 45deg; }
.starter .p-who { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-left: 14px; font-size: 13px; font-weight: 700; }
.starter .p-who i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--s-ink); background: var(--s-soft); }
.starter .p-reviews { display: grid; gap: 20px 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.starter .p-polaroids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 6px; }
.starter .p-pol { margin: 0; background: #fffdf8; padding: 10px 10px 12px; border: 2px solid var(--s-ink); box-shadow: 4px 4px 0 var(--s-ink); display: grid; gap: 8px; }
.starter .p-pol:nth-child(3n+1) { rotate: -2.5deg; }
.starter .p-pol:nth-child(3n+2) { rotate: 1.5deg; }
.starter .p-pol:nth-child(3n) { rotate: -1deg; }
.starter .site .p-pol .s-photo { border-radius: 2px; }
.starter .p-pol figcaption { font: 700 13px var(--s-body); color: #0d1826; text-align: center; }
.starter .p-faq { display: grid; gap: 12px; }
.starter .p-faq > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid var(--s-ink); border-radius: 999px; background: var(--s-card); font-weight: 700; }
.starter .p-faq > div i { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--s-ink); display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--s-accent); color: #0d1826; }
.starter .p-faq > .p-card { border-radius: calc(var(--s-r) + 8px); display: grid; justify-content: stretch; }
.starter .p-team { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; }
.starter .site .p-team .s-photo { aspect-ratio: 1; }
.starter .p-team > div { display: grid; justify-items: center; gap: 10px; }
.starter .site .p-team .s-photo { width: 76%; border-radius: 50%; border: 2px solid var(--s-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--s-soft) 70%, var(--s-bg)), 0 0 0 10px var(--s-ink); }
.starter .p-team .p-sticker { justify-self: center; background: var(--s-card); color: var(--s-ink); margin-top: 10px; }
.starter .p-team > div:nth-child(2) .p-sticker { rotate: 3deg; background: var(--s-accent); color: #0d1826; }
.starter .p-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.starter .p-seal { width: 150px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--s-ink); box-shadow: 4px 4px 0 var(--s-ink); background: color-mix(in srgb, var(--s-soft) 45%, var(--s-bg)); display: grid; place-content: center; justify-items: center; gap: 6px; padding: 18px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.25; }
.starter .p-seal:nth-child(even) { background: color-mix(in srgb, var(--s-accent) 35%, var(--s-bg)); rotate: 4deg; }
.starter .p-seal:nth-child(3) { rotate: -5deg; }
.starter .p-seal i { width: 34px; height: 34px; border-radius: 50%; background: var(--s-ink); color: var(--s-bg); display: grid; place-items: center; font-style: normal; }
.starter .p-price { position: absolute; top: 12px; right: 12px; z-index: 1; rotate: 5deg; }
.starter .p-card > .s-photo { border: 2px solid var(--s-ink); }
.starter .p-steps { display: flex; flex-wrap: wrap; gap: 10px; }
.starter .p-steps .p-sticker { rotate: 0deg; background: var(--s-card); color: var(--s-ink); }
.starter .p-steps .p-sticker:nth-child(2) { rotate: -3deg; background: var(--s-accent); color: #0d1826; }
.starter .p-steps .p-sticker:nth-child(3) { rotate: 2deg; }
.starter .p-steps .p-sticker b { width: 20px; height: 20px; border-radius: 50%; background: var(--s-ink); color: var(--s-bg); display: grid; place-items: center; font-size: 11px; }
.starter .v-playful .s-form { border: 2px solid var(--s-ink); box-shadow: 6px 6px 0 var(--s-ink); border-radius: calc(var(--s-r) + 8px); background: color-mix(in srgb, var(--s-soft) 30%, var(--s-bg)); }
.starter .v-playful .s-input { border: 2px solid var(--s-ink); background: var(--s-card); }
.starter .v-playful .s-btn { border-color: var(--s-ink); box-shadow: 3px 3px 0 var(--s-ink); }
.starter .v-playful.s-center { text-align: center; justify-items: center; }
.starter .p-narrow { max-width: 620px; width: 100%; justify-items: center; text-align: center; }
.starter .p-narrow .s-news, .starter .e-narrow { width: 100%; }
.starter .e-narrow { max-width: 520px; }
.starter .e-gap { margin-top: 14px; }
.starter .site .e-plain { background: transparent; border: 0; padding: 0; }
.starter .v-playful.s-center .s-head { justify-items: center; }
.starter .v-editorial { gap: 30px; }
.starter .v-editorial h2 { font-size: clamp(28px, 4.6cqi, 50px); }
.starter .e-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.starter .e-num { font: var(--s-head-weight) 15px/1.4 var(--s-head); color: var(--s-accent); letter-spacing: .04em; }
.starter .e-rows > div { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--s-ink); }
.starter .e-rows > div:last-child { border-bottom: 1px solid var(--s-ink); }
.starter .e-rows p, .starter .e-rows small { color: var(--s-muted); font-size: 14px; }
.starter .e-rows.two > div { grid-template-columns: 56px minmax(0, 1fr); }
.starter .e-rows.price > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.starter .e-rows .s-price { font-size: 26px; }
.starter .e-big { font: var(--s-head-weight) clamp(26px, 4.4cqi, 48px)/1.12 var(--s-head); text-transform: var(--s-head-case); letter-spacing: var(--s-head-track); text-wrap: balance; max-width: 26ch; }
.starter .e-quote { max-width: 30ch; }
.starter .e-minor > div { border-top: 1px solid var(--s-ink); padding-top: 14px; display: grid; gap: 8px; }
.starter .e-minor p { color: var(--s-muted); }
.starter .e-sign { font: italic 600 16px var(--s-head); }
.starter .e-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.starter .site .e-mosaic .s-photo { aspect-ratio: 1; border-radius: calc(var(--s-r-img) * .5); }
.starter .site .e-mosaic .s-photo:first-child { grid-column: span 2; grid-row: span 2; }
.starter .e-faq > div { padding: 20px 0; border-top: 1px solid var(--s-ink); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; }
.starter .e-faq > div:last-child { border-bottom: 1px solid var(--s-ink); }
.starter .e-faq p { grid-column: 2; color: var(--s-muted); }
.starter .e-person { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--s-ink); }
.starter .e-person:last-child { border-bottom: 1px solid var(--s-ink); }
.starter .site .e-person .s-photo { border-radius: 50%; aspect-ratio: 1; }
.starter .e-person p { color: var(--s-muted); font-size: 14px; }
.starter .e-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 48px; max-width: 900px; width: 100%; margin: 0 auto; }
.starter .e-menu > div { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; }
.starter .e-menu > div::after { content: ""; order: 1; flex: 1; border-bottom: 1.5px dotted color-mix(in srgb, var(--s-ink) 45%, transparent); }
.starter .e-menu b:last-child { order: 2; }
.starter .e-menu small { display: block; color: var(--s-muted); font-weight: 400; }
.starter .v-editorial.s-center { justify-items: center; text-align: center; }
.starter .e-alt { display: grid; gap: 40px; }
.starter .e-alt > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.starter .e-alt > div:nth-child(even) > .s-photo { order: 2; }
.starter .e-line { border: 0; border-bottom: 1.5px solid var(--s-ink); border-radius: 0; background: transparent; padding-left: 0; }
.starter .e-contact { display: grid; gap: 6px; }
.starter .e-cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starter .e-contact b { font: var(--s-head-weight) clamp(20px, 2.8cqi, 32px)/1.15 var(--s-head); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--s-accent); overflow-wrap: anywhere; }
.starter .v-spot { background: var(--s-primary); color: var(--s-bg); }
.starter .v-spot .s-lead, .starter .v-spot p { color: color-mix(in srgb, currentColor 80%, transparent); }
.starter .v-spot .s-eyebrow { color: var(--s-accent); }
.starter .v-spot .s-btn { background: var(--s-accent); border-color: var(--s-accent); color: #0d1826; }
.starter .v-spot .s-ico { background: color-mix(in srgb, var(--s-bg) 16%, transparent); color: var(--s-bg); }
.starter .look-dark .v-spot { background: color-mix(in srgb, var(--s-accent) 20%, var(--s-bg)); color: var(--s-ink); }
.starter .look-dark .v-spot .s-ico { color: var(--s-ink); }
.starter .v-spot.s-center { justify-items: center; text-align: center; }
.starter .sp-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-top: 22px; }
.starter .sp-more > div { display: flex; gap: 14px; align-items: flex-start; }
.starter .sp-more small { display: block; opacity: .78; font-size: 13.5px; }
.starter .sp-score { display: grid; justify-items: center; gap: 6px; }
.starter .sp-score b { font: var(--s-head-weight) 64px/1 var(--s-head); }
.starter .sp-score .s-stars { font-size: 22px; }
.starter .v-spot .e-big { max-width: 24ch; }
.starter .sp-dots { display: flex; gap: 7px; }
.starter .sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .35; }
.starter .sp-dots i:first-child { opacity: 1; }
.starter .sp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 30%; gap: 12px; overflow: hidden; padding: 0 0 44px 40px; }
.starter .site .sp-strip .s-photo { aspect-ratio: 3 / 4; }
.starter .sp-big { position: relative; min-height: 420px; display: grid; align-items: end; border-radius: var(--s-r-img); overflow: hidden; }
.starter .sp-big > .s-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.starter .sp-big .s-hero-card { margin: 22px; }
.starter .sp-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.starter .sp-nums > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: 16px; font-size: 18px; font-weight: 700; }
.starter .sp-nums span { font: var(--s-head-weight) 44px/1 var(--s-head); color: var(--s-accent); }
.starter .sp-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.starter .sp-specs span { border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.starter .v-spot .s-price { color: inherit; font-size: 44px; }
.starter .v-spot .s-form, .starter .v-spot .s-hero-card { color: var(--s-ink); }
@container (max-width: 640px) {
  .starter .p-team { gap: 12px; }
  .starter .p-team .p-sticker { font-size: 10.5px; padding: 3px 8px; white-space: normal; }
  .starter .p-reviews, .starter .e-cols, .starter .e-cols.even, .starter .e-alt > div, .starter .sp-more, .starter .sp-nums, .starter .e-menu { grid-template-columns: minmax(0, 1fr); }
  .starter .p-polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .starter .e-rows > div, .starter .e-rows.price > div { grid-template-columns: 40px minmax(0, 1fr); }
  .starter .e-rows > div > :nth-child(3) { grid-column: 2; }
  .starter .e-rows.price > div { grid-template-columns: minmax(0, 1fr) auto; }
  .starter .e-rows.price > div > p { grid-column: 1 / -1; grid-row: 2; }
  .starter .e-person { grid-template-columns: 60px minmax(0, 1fr); }
  .starter .e-person > p { grid-column: 2; }
  .starter .e-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter .e-alt > div:nth-child(even) > .s-photo { order: 0; }
  .starter .sp-strip { grid-auto-columns: 62%; padding-left: 20px; }
  .starter .p-seal { width: 128px; font-size: 12px; }
  .starter .sp-big { min-height: 380px; }
}
@container (max-width: 640px) {
  .starter .s-wrap { padding: 38px 20px; }
  .starter .s-nav { padding: 14px 20px; }
  .starter .s-grid, .starter .s-grid.two, .starter .s-split { grid-template-columns: minmax(0, 1fr); }
  .starter .s-split { gap: 24px; }
  .starter .s-links.full { display: none; }
  .starter .s-burger.phone { display: grid; }
  .starter .s-call { min-height: 36px; padding: 0 14px; font-size: 13px; }
  .starter .s-call .long { display: none; }
  .starter .s-call .short { display: inline; }
  .starter .s-hero-full { min-height: 400px; }
  .starter .s-hero-card { margin: 16px; padding: 20px; }
  .starter .s-hero-wide { padding: 12px 14px 0; }
  .starter .s-frame { min-height: 420px; }
  .starter .site .s-fill.s-video { place-items: start end; padding: 14px; }
  .starter .s-slides, .starter .s-video { aspect-ratio: 4 / 3; }
  .starter .s-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter .s-ticks { grid-template-columns: minmax(0, 1fr); }
  .starter .s-sched { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter .s-pagehead { padding-block: 44px 32px; }
  .starter .s-foot { padding: 30px 20px; }
}
/* Phone preview: a real 390px phone at full size, centred, never stretched. */
.starter .mini.is-phone .mini-scale { box-shadow: 0 0 0 1px var(--rule); }
.starter .fine a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }