/* Four starting points. Keep this after the base layout styles. */
.start-grid.preset-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;isolation:isolate}
.preset-grid .start-card{min-width:0;min-height:470px;padding:25px 24px 24px;overflow:visible;border:0;border-right:1px solid var(--line)}
.preset-grid .start-card:last-child{border-right:0}
.preset-grid .start-card:focus-within{background:#2b2b23}
.preset-grid .start-card .card-top{position:static;font-size:9px;letter-spacing:1px}
.preset-grid .start-card .card-arrow{position:static;flex-shrink:0}
.preset-grid .card-arrow svg{width:19px;height:19px}
.preset-grid .start-card .preset-visual{position:relative;inset:auto;width:100%;height:142px;margin:12px 0 18px;flex-shrink:0;pointer-events:none}
.preset-grid .start-card h3{font-size:25px;letter-spacing:-.6px;margin:0 0 12px;line-height:1.25;max-width:100%}
.preset-grid #preset-zero-title{text-wrap:balance}
.preset-grid .start-card p{font-size:11px;line-height:1.85;max-width:100%;margin:0 0 22px}
.preset-grid .start-card .card-price{margin-top:0;padding-top:17px;gap:12px;flex-wrap:wrap}
.preset-grid .card-price strong{font-size:28px;white-space:nowrap}
.preset-grid .card-price small{font-size:9px;white-space:nowrap}
.preset-select{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;background:transparent;border:0;cursor:pointer}
.preset-select:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.preset-select:focus-visible~.card-top .card-arrow{background:var(--accent);color:var(--black);border-color:var(--accent);transform:rotate(45deg)}

.record-visual{position:relative;width:116px;height:116px;display:grid;place-items:center;color:var(--accent)}
.record-ring{position:absolute;inset:0;border:1px solid #8f907749;border-radius:50%;transition:transform .5s,border-color .5s}
.record-ring-inner{inset:14px;border-color:#ff683945}
.record-microphone{width:49px;height:49px;transition:transform .5s}
.preset-card:hover .record-ring,.preset-card:focus-within .record-ring{transform:scale(.94);border-color:#ff683970}
.preset-card:hover .record-ring-inner,.preset-card:focus-within .record-ring-inner{transform:scale(1.12)}
.preset-card:hover .record-microphone,.preset-card:focus-within .record-microphone{transform:translateY(-3px)}

.preset-grid .preset-card .text-lines i{transition:background-color .65s ease}
.preset-grid .preset-card:hover .text-lines i,.preset-grid .preset-card:focus-within .text-lines i{background-color:var(--accent)}

/* The orange filament stays warm; the grey bulb lights up on hover or focus. */
.preset-grid .preset-card .idea-visual{color:#92958b;transform:none;transition:color .65s ease}
.preset-grid .preset-card .idea-visual svg{animation:idea-float 4.8s ease-in-out infinite;transform-origin:50% 65%}
@keyframes idea-float{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
.preset-grid .preset-card .idea-visual .idea-filament{stroke:var(--accent);transition:filter .65s ease}
.preset-grid .preset-card .idea-visual .idea-halo{stroke:#92958b30;filter:drop-shadow(0 0 0 transparent);transition:stroke .65s ease,filter .65s ease}
.preset-grid .preset-card .idea-visual .idea-glass{fill:#92958b05;transition:fill .65s ease}
.preset-grid .preset-card .idea-visual .idea-rays{opacity:.35;transition:opacity .65s ease}
.preset-grid .preset-card:hover .idea-visual,.preset-grid .preset-card:focus-within .idea-visual{color:var(--accent)}
.preset-grid .preset-card:hover .idea-visual .idea-halo,.preset-grid .preset-card:focus-within .idea-visual .idea-halo{stroke:#ff673b55;filter:drop-shadow(0 0 6px #ff673b50)}
.preset-grid .preset-card:hover .idea-visual .idea-glass,.preset-grid .preset-card:focus-within .idea-visual .idea-glass{fill:#ff673b16}
.preset-grid .preset-card:hover .idea-visual .idea-filament,.preset-grid .preset-card:focus-within .idea-visual .idea-filament{filter:drop-shadow(0 0 3px #ff673b45)}
.preset-grid .preset-card:hover .idea-visual .idea-rays,.preset-grid .preset-card:focus-within .idea-visual .idea-rays{opacity:.9}

/* Sibling buttons keep the package action and the explanatory icons independent. */
.preset-inclusions{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:auto 0 13px auto;width:max-content;max-width:100%;overflow:visible}
.preset-inclusion{position:relative;display:block;line-height:1}
.preset-service-icon{display:grid;place-items:center;width:34px;height:36px;padding:7px;background:transparent;border:1px solid transparent;border-radius:3px;color:#74786b;transition:background .2s,border-color .2s,color .2s}
.preset-service-icon svg{width:20px;height:20px}
.preset-inclusion.is-included .preset-service-icon{color:var(--accent)}
.preset-service-icon:hover,.preset-service-icon:focus-visible,.preset-inclusion.is-tip-open .preset-service-icon{background:#ffffff08;border-color:#ffffff26}
.preset-service-icon:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.preset-service-tooltip{position:absolute;z-index:5;right:0;bottom:calc(100% + 9px);width:max-content;max-width:185px;padding:11px 13px;background:var(--cream);border:1px solid #fff3;box-shadow:0 8px 25px #0005;color:var(--black);font-size:10px;font-weight:600;line-height:1.4;white-space:normal;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none}
.preset-service-tooltip::after{content:"";position:absolute;right:11px;top:100%;width:7px;height:7px;background:var(--cream);transform:translateY(-4px) rotate(45deg)}
.preset-service-tooltip small{display:block;margin-top:4px;color:#646956;font-size:9px;font-weight:400}
.preset-inclusion:not(.is-tip-dismissed):hover .preset-service-tooltip,.preset-inclusion:not(.is-tip-dismissed):focus-within .preset-service-tooltip,.preset-inclusion.is-tip-open .preset-service-tooltip{opacity:1;visibility:visible;transform:translateY(0)}

@media(max-width:1279px) and (min-width:601px){
  .start-grid.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .preset-grid .start-card{min-height:420px;padding:27px 30px}
  .preset-grid .start-card:nth-child(2n){border-right:0}
  .preset-grid .start-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .preset-grid .start-card .preset-visual{height:132px}
  .preset-grid .start-card h3{font-size:27px}
  .preset-grid .start-card p{font-size:12px}
}
@media(max-width:600px){
  .start-grid.preset-grid{grid-template-columns:1fr}
  .preset-grid .start-card{padding:23px 23px 22px;min-height:345px;border-right:0;border-bottom:1px solid var(--line)}
  .preset-grid .start-card:last-child{border-bottom:0}
  .preset-grid .start-card .card-top{font-size:9px}
  .preset-grid .start-card .preset-visual{height:105px;margin:9px 0 14px}
  .preset-grid .start-card h3{font-size:26px;margin:0 0 10px}
  .preset-grid .start-card p{font-size:12px;margin:0 0 18px;max-width:360px}
  .preset-grid .start-card .card-price{padding-top:15px;flex-wrap:nowrap}
  .preset-grid .card-price strong{font-size:29px}
  .preset-grid .card-price small{font-size:10px}
  .preset-grid .preset-visual .text-lines{width:130px;padding:12px 17px}
  .preset-grid .text-lines i{margin:9px 0;height:2px}
  .preset-grid .preset-visual .wave-bars{height:65px;width:80%;gap:4px}
  .preset-grid .wave-bars i{width:4px}
  .preset-grid .preset-visual .creation-orbit{width:93px;height:93px}
  .preset-grid .creation-orbit::before{inset:13px}
  .preset-grid .creation-orbit::after{inset:28px}
  .preset-grid .record-visual{width:98px;height:98px}
  .preset-inclusions{gap:3px;margin-bottom:10px}
  .preset-service-icon{width:44px;height:44px;padding:11px}
}
@media(prefers-reduced-motion:reduce){
  .preset-grid .preset-card .idea-visual,.preset-grid .preset-card .idea-visual svg{animation:none;transition:none;transform:none}
  .preset-grid .preset-card:hover .idea-visual,.preset-grid .preset-card:focus-within .idea-visual{transform:none}
  .preset-grid .record-ring,.preset-grid .record-microphone,.preset-grid .preset-service-tooltip{transition:none;transform:none}
  .preset-grid .preset-card .text-lines i{transition:none}
  .preset-grid .preset-card .idea-visual :is(.idea-halo,.idea-glass,.idea-rays,.idea-filament){animation:none;transition:none}
}