/* ===== made-solid/packages: the package selector (build/blocks/package-selector/style.css) and the section around it:
   Home (homepage v6: large heading + the swinging "Just listed" sign), Pricing (heading + line + sign), town pages
   (areas-sarasota .tn-pk: heading and line side by side). Every rule scoped under .packages. Loaded only where the block is. ===== */
  .packages{padding:var(--space-2xl) 0}
  .packages .pk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-m);align-items:end;margin-bottom:var(--space-l)}
  /* Large (Home): the big heading beside the sign */
  .packages .pk-h--large{max-width:min(1030px,100%);font-size:clamp(2.6rem,1.2rem + 4.6vw,6rem);letter-spacing:var(--track-display);line-height:1}
  /* Standard heading (Pricing, town pages): the pages' .h2 */
  .packages .pk-h--std{font-size:clamp(2.3rem,1.3rem + 3.4vw,4.6rem);letter-spacing:var(--track-display);line-height:1}
  .packages .pk-line{font-size:var(--fs-lead);line-height:1.45;color:var(--plot-slate);text-wrap:balance}
  /* Stacked (Pricing): heading with a line under it, beside the sign */
  .packages--stacked{padding:calc(var(--space-2xl) + 30px) 0 var(--space-xl)}
  .packages--stacked .pk-h--std{max-width:18ch}
  .packages--stacked .pk-line{margin-top:var(--space-m);max-width:46ch}
  .packages--large .pk-line{margin-top:var(--space-m);max-width:46ch}
  /* Side by side (town pages): heading left, line right, no sign (areas-sarasota .head-b) */
  .packages .pk-head--split{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-m) var(--grid-gutter)}
  .packages .pk-head--split .pk-h{grid-column:1 / span 6;max-width:14ch}
  .packages .pk-head--split .pk-line{grid-column:8 / span 5}
  /* a town page's packages run straight into the town-services list (one section in the mockup, .tn-pk + .svc-wrap) */
  .packages--split:has(+ .town-services){padding-bottom:0}
  .packages--split + .town-services{padding-top:clamp(64px,7vw,112px)}
  .packages .pk-anchor{display:block;height:0}
  .packages .sign{width:clamp(170px,17vw,260px);aspect-ratio:360/380;position:relative;margin-right:clamp(0px,3vw,48px)}
  .packages .sign svg{width:100%;height:100%;overflow:visible;display:block}
  .packages .pk-more{margin-top:calc(var(--space-l) + 6px)}
  .packages .fan .ph picture{display:block;width:100%;height:100%}
  .packages .fan .ph img{width:100%;height:100%;object-fit:cover}
  .packages .pk-s[hidden],.packages .pk-a[hidden]{display:none}
  /* package selector: the tabs drive the composition; nothing is only a list */
  .packages .pk-bar{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin:36px 0 22px}
  .packages .tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:#E7E0D4}
  .packages .tab{position:relative;font:inherit;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,.95rem + .5vw,1.4rem);letter-spacing:-.01em;
    color:var(--plot-slate);background:transparent;border:0;border-radius:999px;min-height:56px;padding:0 clamp(22px,2.4vw,36px);cursor:pointer;
    transition:background-color .35s var(--ease-settle),color .35s}
  .packages .tab:hover{color:var(--plot-ink)}
  .packages .tab[aria-selected="true"]{background:var(--plot-ink);color:var(--plot-bone)}
  .packages .tab:focus-visible{outline:2px solid var(--plot-ink);outline-offset:3px}
  .packages .pk-price{position:relative}
  .packages .pk-buy{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}
  /* the price and the Order button are the section's two loud things (Nicolas, 09-29): the price a size up, the button the one
     accent in the section. Window-glow, not #FF7900: orange stays off light grounds (brand rule, 09-28). */
  .packages .pk-price{font-family:var(--font-display);font-weight:600;font-size:clamp(3.6rem,2.3rem + 3.8vw,5.9rem);letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--plot-ink)}
  /* the "$" a size down: the price is one store span ("$375"), so the first letter carries the old .cur style */
  .packages .pk-price .price{display:inline-block}
  .packages .pk-price .price::first-letter{font-size:.55em;vertical-align:.62em;margin-right:2px;letter-spacing:0}
  .packages .pk-buy .btn{min-width:190px;min-height:60px;font-size:18px;--btn-bg:var(--plot-glow);--btn-text:var(--plot-ink);box-shadow:0 10px 24px -12px rgba(184,134,47,.7)}
  /* .packages prefix: block styles can print before base.css, whose [data-ground=bone] .btn:hover has the same weight */
  .packages .pk-buy .btn:hover{background:#F0C98E;border-color:#F0C98E;color:var(--plot-ink)}
  .packages .pk-foot{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:10px 40px;flex-wrap:wrap;
    border-top:1px solid #ECE6DC;padding-top:clamp(18px,2vw,24px);margin-top:4px}
  .packages .pk-add{margin:0;font-size:15px;color:var(--plot-slate);text-wrap:pretty}
  .packages .pk-add .alc{color:var(--plot-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--plot-line-light);margin-left:10px;white-space:nowrap}
  .packages .pk-add .alc:hover{text-decoration-color:currentColor}
  .packages .pk-stage{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center;
    background:#fff;border-radius:24px;padding:clamp(24px,3vw,44px);box-shadow:0 1px 2px rgba(20,17,14,.06),0 30px 60px -30px rgba(20,17,14,.25);min-height:470px}
  /* the photo stack fans out. 09-30 review: Basic shows seven cards, Pro nine, Plus eleven, packed closer as there are more,
     so the fan keeps one width. view.js sets --gap (px per card) and --rot (deg per card); these defaults are Pro, the first paint. */
  .packages .fan{position:relative;height:360px;--gap:29;--rot:3.9;--gm:1;--rm:1}
  .packages .fan .ph{position:absolute;display:block;left:50%;top:44%;width:66%;height:auto;aspect-ratio:3/2;overflow:hidden;background:#fff;border-radius:10px;border:5px solid #fff;
    box-shadow:0 14px 26px -12px rgba(20,17,14,.45);--kk:var(--k);
    transform:translate(-50%,-50%) rotate(calc(var(--kk) * var(--rot) * var(--rm) * 1deg)) translateX(calc(var(--kk) * var(--gap) * var(--gm) * 1px));
    transition:transform 900ms var(--ease-settle),opacity .45s var(--ease-settle)}
  /* the cards a package doesn't show tuck under the outermost visible card and fade (Pro hides one a side, Basic two) */
  .packages .fan[data-n="9"] .ph:nth-of-type(1){--kk:-4;opacity:0}
  .packages .fan[data-n="9"] .ph:nth-of-type(11){--kk:4;opacity:0}
  .packages .fan[data-n="7"] .ph:nth-of-type(-n+2){--kk:-3;opacity:0}
  .packages .fan[data-n="7"] .ph:nth-of-type(n+10){--kk:3;opacity:0}
  /* the deck bumps when the package changes: up and settle going bigger, down and settle going smaller. A short ripple,
     left to right, on the independent translate property so it never fights the fan's transform. */
  .packages .fan.bump-up .ph{animation:deckUp 640ms cubic-bezier(.3,.7,.3,1) both;animation-delay:calc((var(--k) + 5) * 16ms)}
  .packages .fan.bump-down .ph{animation:deckDown 560ms cubic-bezier(.3,.7,.3,1) both;animation-delay:calc((5 - var(--k)) * 13ms)}
  @keyframes deckUp{0%{translate:0 0}32%{translate:0 -14px}64%{translate:0 3px}84%{translate:0 -1px}100%{translate:0 0}}
  @keyframes deckDown{0%{translate:0 0}34%{translate:0 7px}70%{translate:0 -2px}100%{translate:0 0}}
  .packages .fan .count{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;align-items:baseline;gap:8px;background:var(--plot-ink);color:var(--plot-bone);
    border-radius:999px;padding:8px 20px 9px}
  .packages .fan .count b{font-family:var(--font-display);font-weight:600;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
  .packages .fan .count span{font-size:17px}
  /* deliverables: included cards sit solid; the ones not in this package step back to an outline that says where they are */
  .packages .dls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .packages .dl{position:relative;border-radius:14px;background:#F6F2EB;padding:10px;display:flex;flex-direction:column;gap:10px;transition:background-color .5s,box-shadow .5s}
  .packages .dl .md{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#EDE7DD;transition:opacity .5s var(--ease-settle),transform .7s var(--ease-settle)}
  .packages .dl .md picture{display:block;width:100%;height:100%}
  .packages .dl .md img{width:100%;height:100%;object-fit:cover;display:block}
  .packages .dl .lb{display:flex;flex-direction:column;gap:1px;padding:0 4px 4px}
  .packages .dl .lb b{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25}
  .packages .dl .nt{font-size:15px;color:var(--plot-slate);line-height:1.35}
  .packages .dl .paper{position:absolute;inset:0;display:grid;place-items:center;background:#fff}
  .packages .dl .paper svg{width:82%}
  .packages .dl .tour{position:absolute;inset:0;display:grid;place-items:center;background:#1E1A16}
  /* the tour icon: a small plan tilted into 3D. Four stacked copies of the same drawing give the walls height. */
  .packages .dl .tour{perspective:520px;overflow:hidden}
  .packages .dl .tour .t3{position:relative;width:62%;aspect-ratio:4/3;transform-style:preserve-3d;transform:translateY(8%) rotateX(56deg) rotateZ(-32deg)}
  .packages .dl .tour .t3 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .packages .dl .tour .t3 .w0{transform:translateZ(0);opacity:.35}
  .packages .dl .tour .t3 .w1{transform:translateZ(4px);opacity:.45}
  .packages .dl .tour .t3 .w2{transform:translateZ(8px);opacity:.6}
  .packages .dl .tour .t3 .w3{transform:translateZ(12px)}
  .packages .dl .pair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3px}
  .packages .dl .pair img{height:100%;min-height:0}
  .packages .dl .play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(243,238,230,.94)}
  .packages .dl .play::after{content:"";position:absolute;left:16px;top:12px;border-left:12px solid var(--plot-ink);border-top:8px solid transparent;border-bottom:8px solid transparent}
  .packages .dl .dur{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:13px;color:#fff;background:rgba(0,0,0,.6);border-radius:6px;padding:1px 6px}
  /* the Marketing Kit reads as a printed flyer on paper (lightened twice in the 09-29 reviews) */
  .packages .dl .kit{position:absolute;inset:0;background:#FBF8F3;box-shadow:inset 0 0 0 1px #E6DED1;padding:8%;display:flex;flex-direction:column;gap:6%}
  .packages .dl .kit .kt-top{height:52%;border-radius:5px;overflow:hidden}
  .packages .dl .kit .kt-top picture,.packages .dl .pair picture{display:block;height:100%;min-height:0}
  .packages .dl .kit i{height:7px;border-radius:4px;background:rgba(20,17,14,.62);width:60%}
  .packages .dl .kit i.s{background:rgba(20,17,14,.14);width:84%} .packages .dl .kit i.s2{background:rgba(20,17,14,.14);width:70%}
  .packages .dl[hidden]{display:none}
  .packages .dl.out{background:transparent;box-shadow:inset 0 0 0 1.5px #DDD5C8}
  .packages .dl.out .md{opacity:0;transform:translateY(10px) scale(.94)}
  .packages .dl.out .lb b{color:#7E756A} /* darkened from #9D958A (2.96:1) to pass WCAG AA on the white stage: 4.53:1 (Nicolas, 2026-10-11) */
  .packages .dl.part .md{opacity:.55}
  .packages .dl.in .md{opacity:1;transform:none}
  .packages .dl.pop-in{animation:dlIn .7s var(--ease-settle)}
  @keyframes dlIn{from{transform:translateY(14px)}to{transform:none}}
  .packages .pk-sum{margin:0;font-size:17px;line-height:1.45;color:var(--plot-ink);max-width:62ch;text-wrap:pretty}
  .packages .pk-sum b{font-family:var(--font-display);font-weight:600;margin-right:4px}
  .packages .pk-sum .wyg{white-space:nowrap;margin-left:6px;color:var(--plot-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--plot-line-light)}
  .packages .pk-sum .wyg:hover{text-decoration-color:currentColor}
  @media (max-width:760px){
    .packages .pk-bar{flex-direction:column;align-items:stretch;margin-top:40px}
    .packages .tabs{justify-content:space-between}
    .packages .tab{flex:1;padding:0 10px;min-height:52px}
      .packages .pk-foot{flex-direction:column;gap:8px}
    .packages .pk-buy{justify-content:space-between;margin-top:22px}
    .packages .pk-buy .btn{flex:1;min-width:0}
    .packages .pk-stage{grid-template-columns:1fr;padding:18px;min-height:0}
    .packages .fan{height:240px}
    .packages .fan{--gm:.5;--rm:.85}
    .packages .dls{grid-template-columns:1fr 1fr}
    .packages .dl .nt{font-size:14px}
    .packages .pk-head{grid-template-columns:1fr}
    .packages--stacked{padding-top:var(--space-2xl)}
    .packages .sign{display:none}   /* 2026-10-03 phone review: the "Just listed" sign beside the selector is hidden on phones, every page */
    /* 2026-10-03 phone review (homepage): on phones the picker (tabs, price, Order button) sits UNDER the content it changes */
    .packages .pk{display:flex;flex-direction:column}
    .packages .pk-bar{order:1;margin:22px 0 0}
    /* Pricing (stacked) keeps the picker ABOVE the card on phones, under the intro line (pages/pricing.html) */
    .packages--stacked .pk{display:block}   /* plain flow, so the bar's top margin meets the heading's as in the mockup */
    .packages--stacked .pk-bar{margin:40px 0 22px}
  }
  @media (max-width:1080px){
    .packages .pk-head--split .pk-h,.packages .pk-head--split .pk-line{grid-column:1 / -1}
  }