/* ============================================================================
   Drenin V5 · the package showroom (markup rendered from offer.config.json)
   A warm stone room with the hex floor faintly underfoot. Three package cards
   on the left; the chosen example in a dark display case on the right.
   The active card is always dark ink with an amber edge, whatever the tier;
   inactive cards are warm paper; Growth keeps its Featured flag in every state.
   State changes only colors, never sizes: a card's height is the same active
   or not, so scroll-linked selection can never move the page.
   ========================================================================== */

/* ── the room ─────────────────────────────────────────────────────────────── */
.offer{background:
    radial-gradient(55% 38% at 80% 16%,rgba(255,232,196,.6),transparent 70%),
    radial-gradient(70% 40% at 10% 0%,rgba(255,255,255,.55),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#EEE7DB,#E4DACA 60%,#E6DDCF)}
.showroom{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,44px)}
/* the hex floor, continued into daylight: pressed faintly into the stone behind the cards */
.showroom::before{content:"";position:absolute;z-index:-1;inset:-40px -3vw -60px;pointer-events:none;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M14 1h24l12 21.5L38 44H14L2 22.5zM14 46h24l12 21.5L38 89H14L2 67.5z' fill='none' stroke='%23BDAE94' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/36px 62px;
  -webkit-mask:radial-gradient(60% 55% at 70% 40%,#000,transparent 75%);mask:radial-gradient(60% 55% at 70% 40%,#000,transparent 75%)}
@media (min-width:1080px){.showroom{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.plans{display:grid;gap:26px;align-content:start}

/* ── the cards ────────────────────────────────────────────────────────────── */
.plan{--p-fg:var(--char-0);--p-soft:var(--char-1);--p-mute:var(--char-2);--p-line:rgba(92,72,40,.17);--p-well:rgba(255,255,255,.5);--p-sw:rgba(20,23,28,.2);
  position:relative;isolation:isolate;padding:28px 28px 26px;border-radius:22px;color:var(--p-fg);background-color:#F8F4EC;
  box-shadow:0 0 0 1px var(--p-line) inset,0 1px 0 rgba(255,255,255,.8) inset,0 24px 46px -34px rgba(70,50,20,.55),0 2px 6px -3px rgba(70,50,20,.18);
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.plan::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(90% 55% at 0% 0%,rgba(244,168,58,.16),transparent 60%),linear-gradient(170deg,#1B2029 0%,#11151B 55%,#0C0F14 100%)}
.plan.is-featured{box-shadow:0 0 0 1.5px rgba(153,87,10,.55) inset,0 1px 0 rgba(255,255,255,.8) inset,0 30px 56px -36px rgba(90,56,10,.55),0 2px 6px -3px rgba(70,50,20,.18)}
.plan.is-active{--p-fg:var(--silver-0);--p-soft:var(--silver-1);--p-mute:#A9B2BE;--p-line:rgba(196,203,213,.16);--p-well:rgba(255,255,255,.045);--p-sw:rgba(238,240,243,.26);
  background-color:#10141A;color-scheme:dark;
  box-shadow:0 0 0 1.5px rgba(244,168,58,.8) inset,0 36px 70px -34px rgba(20,14,4,.8),0 3px 10px -4px rgba(20,14,4,.4)}
.plan.is-active::before{opacity:1}
.showroom.is-live .plan:not(.is-active){cursor:pointer}
.showroom.is-live .plan:not(.is-active):hover{box-shadow:0 0 0 1.5px rgba(20,23,28,.4) inset,0 1px 0 rgba(255,255,255,.8) inset,0 28px 50px -34px rgba(70,50,20,.6),0 2px 6px -3px rgba(70,50,20,.18)}
.showroom.is-live .plan.is-featured:not(.is-active):hover{box-shadow:0 0 0 1.5px rgba(153,87,10,.9) inset,0 1px 0 rgba(255,255,255,.8) inset,0 30px 56px -36px rgba(90,56,10,.6)}
.plan :focus-visible{outline-color:var(--p-fg)}
.plan.is-active :focus-visible{outline-color:var(--amber)}
/* a short amber lead from the active card toward the stage */
@media (min-width:1080px){.plan.is-active::after{content:"";position:absolute;top:44px;right:-26px;width:26px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,168,58,.9),rgba(244,168,58,0))}}
.plan .flag{top:-13px;left:24px}

.plan-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem}
.plan h3{font:800 1.9rem/1 var(--font);font-stretch:118%;letter-spacing:.005em;color:var(--p-fg)}
.plan .price{color:var(--p-fg)}
.plan .price small{color:var(--p-mute)}
.plan-line{margin:.6rem 0 1.1rem;font:500 1.06rem/1.45 var(--font);color:var(--p-soft)}
.plan-acts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.3rem}
.plan-acts .btn{min-height:44px;font-size:.93rem;color:var(--p-fg)}
.plan .plan-see[aria-pressed="true"]{box-shadow:0 0 0 2px var(--amber) inset;background:rgba(244,168,58,.14)}
.plan:not(.is-active) .plan-see[aria-pressed="true"]{box-shadow:0 0 0 2px var(--char-0) inset;background:rgba(20,23,28,.07)}
.incl-h{margin:0 0 .6rem;padding-top:1.05rem;border-top:1px solid var(--p-line);font:700 .8rem/1.2 var(--font);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
.plan .incl{margin:0 0 1.35rem;color:var(--p-soft)}
.plan-ex{display:none}

/* ── the optional extras: two switches per card, off by default ──────────── */
.extras{margin:0 0 1.2rem;padding:0;border:0;min-width:0;display:grid;gap:10px}
.extras-h{padding:0;margin:0 0 .15rem;font:700 .8rem/1.2 var(--font);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
.extras-h span{display:block;margin-top:.3rem;font:500 .9rem/1.4 var(--font);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--p-soft)}
.extra{position:relative;padding:13px 15px 13px;border-radius:15px;background:var(--p-well);box-shadow:0 0 0 1px var(--p-line) inset;transition:background-color .25s,box-shadow .25s}
.extra:has(.x-in:checked){background:rgba(244,168,58,.12);box-shadow:0 0 0 1.5px rgba(244,168,58,.75) inset}
.plan:not(.is-active) .extra:has(.x-in:checked){background:rgba(244,168,58,.16);box-shadow:0 0 0 1.5px rgba(153,87,10,.7) inset}
.x-in{position:absolute;opacity:0;width:44px;height:26px;margin:0;top:13px;left:15px;cursor:pointer}
.x-lab{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:4px 12px;cursor:pointer}
.x-sw{position:relative;width:44px;height:26px;border-radius:13px;background:var(--p-sw);transition:background-color .2s}
.x-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s var(--ease)}
.x-in:checked + .x-lab .x-sw{background:var(--amber)}
.x-in:checked + .x-lab .x-sw::after{transform:translateX(18px)}
.x-in:focus-visible + .x-lab .x-sw{outline:3px solid var(--p-fg);outline-offset:3px}
.plan.is-active .x-in:focus-visible + .x-lab .x-sw{outline-color:var(--amber)}
.x-name{font:720 1.02rem/1.25 var(--font);color:var(--p-fg)}
.x-promise{display:block;font:560 .88rem/1.3 var(--font);color:var(--p-soft)}
.x-rate{justify-self:end;text-align:right;font:720 1.02rem/1.25 var(--font);color:var(--p-fg);white-space:nowrap}
.x-cad{font-weight:560;font-size:.86rem;color:var(--p-soft)}
.x-prop{display:block;margin-top:.15rem;font:650 .8rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--p-mute);white-space:normal}
.x-care .x-cad{color:#1F6B66}
.plan.is-active .x-care .x-cad{color:#7FD1C8}
.x-desc{padding:.55rem 0 0 56px;font-size:.9rem;line-height:1.5;color:var(--p-soft)}
.x-desc p{margin:0 0 .35rem}
.x-desc p:last-child{margin-bottom:0}
.x-desc b{font-weight:700;color:var(--p-fg)}
.x-status{display:inline-block;margin:.15rem .6rem .15rem 0;padding:.18rem .5rem;border-radius:6px;font-size:.82rem;line-height:1.35;color:var(--p-fg);background:rgba(153,87,10,.12)}
.plan.is-active .x-status{background:rgba(244,168,58,.14)}
.x-clock{display:inline-block;vertical-align:baseline}
.x-clock[open]{display:block}
.x-clock summary{cursor:pointer;width:max-content;max-width:100%;font-weight:650;color:var(--p-fg);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.x-clock[open] summary{margin-bottom:.35rem}
.x-clock p{margin:0 0 .35rem}
/* Signature Priority: inquiry only, so a mark sits where a switch would (Reed, 2026-10-01) */
.x-lab-ask{cursor:default}
.x-ico{display:grid;place-items:center;width:44px;height:26px;color:var(--p-mute)}
.plan.is-active .x-ico{color:var(--amber)}
.plan .x-ask-btn{margin-top:.6rem;color:var(--p-fg)}   /* .plan: outranks the light chapter's .day a */

/* ── the selection summary: build, priority and care on their own lines ──── */
.plan-sum{padding:16px 18px 18px;border-radius:16px;background:var(--p-well);box-shadow:0 0 0 1px var(--p-line) inset}
.sum-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;margin:0 0 .5rem;font:700 .8rem/1.2 var(--font);font-stretch:90%;letter-spacing:.08em;text-transform:uppercase;color:var(--p-mute)}
.sum-h span{font-weight:560;letter-spacing:.02em;text-transform:none;font-stretch:100%}
.sum-lines{list-style:none;margin:0 0 .6rem;padding:0;display:grid}
.sum-row{display:flex;justify-content:space-between;gap:1rem;padding:.34rem 0;border-top:1px dashed var(--p-line);font-size:.94rem;line-height:1.35;color:var(--p-mute)}
.sum-row:first-child{border-top:0}
.sum-row span:last-child{text-align:right}
.sum-row.is-on{color:var(--p-fg)}
.sum-row.is-on span:first-child{font-weight:650}
.sum-est{margin:.2rem 0 .2rem;padding-top:.55rem;border-top:1.5px solid var(--p-fg);font:650 1.02rem/1.4 var(--font);color:var(--p-fg)}
.sum-fine{margin:0 0 .9rem;font-size:.84rem;line-height:1.45;color:var(--p-mute)}
.sum-cta{width:100%}
@media (min-width:700px){.sum-cta{width:auto}}
.tiers-foot{margin:2px 2px 0;font-size:.9rem;line-height:1.55;color:var(--char-2)}

/* ── the stage: a dark display case, sticky beside the cards ─────────────── */
.stage{min-width:0}
@media (min-width:1080px){.stage{position:sticky;top:96px}}
.case{position:relative;isolation:isolate;padding:16px;border-radius:26px;color:var(--silver-0);color-scheme:dark;
  background:radial-gradient(80% 50% at 70% 0%,rgba(244,168,58,.13),transparent 70%),linear-gradient(165deg,#1A1F27,#0E1116 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 60px 100px -60px rgba(40,26,6,.85),0 20px 40px -26px rgba(40,26,6,.5)}
.case::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M14 1h24l12 21.5L38 44H14L2 22.5zM14 46h24l12 21.5L38 89H14L2 67.5z' fill='none' stroke='%23C4CBD5' stroke-opacity='.08' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/30px 52px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 60%);mask:linear-gradient(180deg,#000,transparent 60%)}
.frame{margin:0;border-radius:14px;overflow:hidden;background:#FBFAF7;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 26px 50px -28px rgba(0,0,0,.9)}
.chrome{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;background:linear-gradient(#F9F7F3,#ECE7DF);border-bottom:1px solid #DCD4C7}
.chrome .dots{display:flex;gap:6px}.chrome .dots i{width:10px;height:10px;border-radius:50%;background:#D5CEC2}
.chrome .dots i:first-child{background:#E0594A}.chrome .dots i:nth-child(2){background:#E6B53E}.chrome .dots i:nth-child(3){background:#53B45C}
.screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#11151C}
.shot{position:absolute;inset:0;opacity:0;visibility:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot.is-on{opacity:1;visibility:visible}
.shot.is-in{opacity:1;visibility:visible;z-index:2}
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.stage-cap{padding:16px 6px 4px;min-height:7.4em}
.cap-tier{margin:0 0 .35rem;font:760 .82rem/1.2 var(--font);font-stretch:96%;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.cap-tier span{margin-left:.5rem;font-weight:560;letter-spacing:.02em;text-transform:none;color:var(--silver-1)}
.cap-text{margin:0;font-size:.97rem;line-height:1.5;color:var(--silver-1)}
.cap-text b{color:var(--silver-0);font-weight:700}
.stage-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin:12px 6px 4px}
.btn-case{background:var(--stone-0);color:var(--char-0)!important;box-shadow:0 12px 24px -14px rgba(0,0,0,.8)}
.btn-case:hover{background:#fff;transform:translateY(-2px)}
.stage-fine{font-size:.86rem;color:#A9B2BE}
.case :focus-visible{outline-color:var(--amber)}
/* short laptop screens (a 1366x768 laptop gives a browser about 650 px; zoomed to 125% it gives about 526): the
   case stays sticky and in view by getting wider and slimmer, never by letting go. Under 700 px it also caps its
   own height to the window, and the screen gives up height first, so the caption and the button always fit */
@media (min-width:1080px) and (max-height:820px){.screen{aspect-ratio:16/9}.stage-cap{min-height:0}.cap-text{font-size:.92rem}}
@media (min-width:1080px) and (max-height:700px){
  .stage{top:84px}
  .case{padding:12px;display:flex;flex-direction:column;max-height:calc(100vh - 96px);max-height:calc(100svh - 96px)}
  .frame{display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
  .chrome,.stage-cap,.stage-acts{flex:none}
  .screen{aspect-ratio:2/1;flex:0 1 auto;min-height:120px}
  .stage-cap{padding:10px 4px 0}
  .cap-text{font-size:.88rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .stage-acts{margin:8px 4px 2px}
  .btn-case{min-height:44px;padding:0 1.1rem;font-size:.94rem}
  .stage-fine{display:none}
}

/* ── how each example arrives on the stage ───────────────────────────────── */
/* scrolling: a quick crossfade (cheap, on the compositor) */
.screen[data-fx="fade"] .shot.is-in{animation:sr-fade .34s var(--ease) both}
@keyframes sr-fade{from{opacity:0}to{opacity:1}}
/* a deliberate choice plays the example's own reveal. Core, the painter: a roller pass lays the new site down */
.screen[data-fx="core"] .shot.is-in{animation:v5-roll .85s var(--ease-io) both}
.screen[data-fx="core"] .fx{opacity:1;animation:v5-roller .85s var(--ease-io) both}
.screen[data-fx="core"] .fx::after{content:"";position:absolute;top:-3%;bottom:-3%;right:0;width:30px;border-radius:7px;
  background:repeating-linear-gradient(0deg,#C38E1F 0 5px,#D9A233 5px 10px);box-shadow:10px 0 22px rgba(0,0,0,.28),-2px 0 0 rgba(255,255,255,.35) inset}
@keyframes v5-roll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes v5-roller{from{transform:translateX(-100%)}to{transform:translateX(30px)}}
/* Growth, the landscape studio: its site plan is drawn over the stage, then the site fills in beneath it */
.screen[data-fx="growth"] .shot.is-in{animation:v5-plan 1.05s var(--ease-io) both}
.screen[data-fx="growth"] .fx{opacity:1;animation:v5-grid 1.05s var(--ease-io) both;
  background:rgba(237,232,223,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 625' fill='none' stroke='%231F4540' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 70H370V240H70Z'/%3E%3Cpath d='M370 120H580V270H370Z'/%3E%3Cpath d='M520 270C540 350 610 390 700 400S820 440 842 500M560 270C580 340 640 372 712 380S846 420 872 490'/%3E%3Ccircle cx='858' cy='548' r='62'/%3E%3Ccircle cx='858' cy='548' r='18'/%3E%3Cpath d='M760 110q22-26 48-8q30-14 44 16q30 8 18 38q16 26-12 42q-6 32-40 26q-22 24-46 2q-32 6-36-26q-28-16-8-42q-8-32 32-48z'/%3E%3Ccircle cx='150' cy='330' r='34'/%3E%3Ccircle cx='215' cy='372' r='26'/%3E%3Ccircle cx='120' cy='404' r='22'/%3E%3Cpath d='M260 300C330 280 420 330 430 400S360 480 290 452S210 330 260 300Z'/%3E%3Cpath d='M600 470C650 450 720 480 730 540S670 610 620 590S560 490 600 470Z'/%3E%3C/svg%3E") center/86% auto no-repeat}
@keyframes v5-plan{0%{opacity:0;filter:grayscale(1) sepia(.35) hue-rotate(70deg) contrast(1.5) brightness(1.2)}
  35%{opacity:1;filter:grayscale(1) sepia(.35) hue-rotate(70deg) contrast(1.5) brightness(1.2)}100%{opacity:1;filter:none}}
@keyframes v5-grid{0%{opacity:0;clip-path:circle(0% at 32% 42%)}40%{opacity:1;clip-path:circle(140% at 32% 42%)}100%{opacity:0;clip-path:circle(140% at 32% 42%)}}
/* Signature, the lighting studio: the lights go down, then one comes on */
.screen[data-fx="signature"] .shot.is-out{animation:v5-dim 1.15s ease both}
.screen[data-fx="signature"] .shot.is-in{animation:v5-light 1.15s var(--ease-io) both}
.screen[data-fx="signature"] .fx{opacity:1;mix-blend-mode:screen;animation:v5-glow 1.15s ease both;
  background:radial-gradient(28% 40% at 66% 58%,rgba(255,196,120,.75),rgba(255,160,70,.2) 55%,transparent 75%)}
@keyframes v5-dim{0%{filter:none}30%,100%{filter:brightness(.12)}}
@keyframes v5-light{0%,25%{clip-path:circle(0% at 66% 58%)}100%{clip-path:circle(125% at 66% 58%)}}
@keyframes v5-glow{0%,22%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

/* ── below the two-column layout: no stage; every card carries its own example ── */
@media (max-width:1079px){
  .stage{display:none}
  .plan-see{display:none}
  .plan-ex{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 1.3rem}
  .plan-shot{display:block;border-radius:14px;overflow:hidden;background:#11151C;box-shadow:0 0 0 1px rgba(20,23,28,.18),0 20px 34px -22px rgba(40,28,10,.55)}
  .plan-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
  .plan-cap{margin:0;font-size:.93rem;line-height:1.5;color:var(--p-soft)}
  .plan-cap b{color:var(--p-fg)}
  .plan.is-active .plan-shot{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 34px -22px rgba(0,0,0,.8)}
}
@media (max-width:700px){
  .plans{gap:30px}
  .plan{padding:24px 18px 20px;border-radius:20px}
  .plan h3{font-size:1.65rem}
  .plan-acts .btn{flex:1 1 auto}
  /* the phone example stands in a phone: portrait, beside its caption */
  .plan-ex{grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:center;gap:16px}
  .plan-shot{border-radius:22px;padding:5px;background:#0D1015;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 22px 36px -22px rgba(40,28,10,.7)}
  .plan-shot img{aspect-ratio:390/844;border-radius:17px}
  .extra{padding:12px 12px}
  .x-in{left:12px;top:12px}
  .x-lab{grid-template-columns:44px minmax(0,1fr);row-gap:6px}
  .x-rate{grid-column:2;justify-self:start;text-align:left}
  .x-desc{padding-left:0;padding-top:.7rem}
  .sum-row{font-size:.92rem}
  .x-clock summary{display:flex;align-items:center;min-height:44px}
  .plan .incl{font-size:.94rem;gap:.32rem}
  .plan-ex{grid-template-columns:minmax(0,36%) minmax(0,1fr)}
  .plan-cap .cap-more{display:none}
  .plan-sum{padding:14px 14px 16px}
  .sum-fine{margin-bottom:.7rem}
}
@media (max-width:360px){
  .plan{padding:22px 14px 18px}
  .plan-ex{grid-template-columns:minmax(0,1fr)}
  .plan-shot{max-width:190px}
}

@media (prefers-reduced-motion:reduce){
  .plan,.plan::before,.extra,.x-sw,.x-sw::after{transition:none!important}
  .screen .shot,.screen .fx{animation:none!important}
}

/* ── the inquiry form's V5 fields: package, "how ready are you", the two extras ── */
.composer .from-room{margin:0;padding:.7rem .9rem;border-radius:10px;background:#FFF1D9;box-shadow:0 0 0 1px rgba(153,87,10,.3) inset;
  font-size:.94rem;line-height:1.45;color:#4A3000}
.composer .c-extras{display:block;margin:0;padding:.85rem 1rem .9rem;border:0;border-radius:12px;background:rgba(20,23,28,.035);box-shadow:0 0 0 1px var(--day-line) inset}
.composer .c-extras legend{float:left;width:100%;padding:0;margin:0 0 .55rem;font:680 .92rem/1.2 var(--font);color:var(--char-0)}
.composer .c-extras legend span{color:var(--char-2);font-weight:500}
.composer .c-check{clear:both;display:flex;align-items:center;gap:.65rem;padding:.3rem 0;font:650 .95rem/1.3 var(--font);cursor:pointer}
.composer .c-check input{display:block;width:20px;height:20px;margin:0;flex:none;accent-color:var(--amber-deep);cursor:pointer}
.composer .c-check span{color:var(--char-2);font-weight:500}