:root{
      --offwhite:#FAF9F6;--oat:#F0ECE3;--ink:#1A1F1E;--ink-soft:rgba(26,31,30,.68);
      --icy:#D4FBFF;--icy-soft:#EAFDFF;--yellow:#FFE7A0;--yellow-deep:#F5D678;
      --serif:'Fraunces',Georgia,'Times New Roman',serif;--serif-axes:'SOFT' 100,'WONK' 0,'opsz' 48;--display:var(--serif);--body:'Poppins',Arial,sans-serif;
      --radius:22px;--shadow:0 18px 44px -18px rgba(26,31,30,.16);
      --shadow-soft:0 10px 30px -14px rgba(26,31,30,.12);--ease:cubic-bezier(.22,.8,.24,1);--page-max:1920px;
    }
    *{box-sizing:border-box}html,body{height:100%;margin:0}
    /* Same ceiling as the rest of the site: past a large monitor the page
       stops growing and sits centred. */
    body{background:var(--offwhite);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;max-width:var(--page-max);margin-inline:auto}
    button,input{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent;cursor:pointer}
    :focus-visible{outline:3px solid #74c7d3;outline-offset:3px;border-radius:6px}
    .quiz-shell{height:100dvh;display:grid;grid-template-rows:72px minmax(0,1fr) 44px}
    /* Equal 1fr side columns so the middle column is centred on the PAGE.
       With `auto 1fr auto` the wider logo (137px) vs lang toggle (76px) pushed
       the middle column ~30px right, so the progress bar never lined up with
       the centred panel below it. */
    .quiz-header{padding:0 24px;display:grid;grid-template-columns:1fr minmax(0,520px) 1fr;align-items:center;gap:26px;background:rgba(250,249,246,.9);border-bottom:1px solid rgba(26,31,30,.06)}
    .quiz-brand{display:flex;align-items:center;border:0;background:transparent;padding:0;justify-self:start}
    .quiz-header .lang-toggle{justify-self:end}
    .quiz-brand img{display:block;height:28px;width:auto}
    /* The bar keeps the centred middle column; the dog counter sits to its
       right without pushing it off centre, so it is absolutely placed. */
    .quiz-progress-wrap{position:relative;justify-self:center;width:100%;max-width:520px;display:flex;align-items:center}
    .quiz-progress{height:6px;background:var(--oat);border-radius:99px;overflow:hidden;width:100%}
    .dog-counter{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)}
    @media (max-width:820px){.dog-counter{position:static;transform:none;margin-left:12px}}
    .quiz-progress span{display:block;height:100%;background:var(--yellow-deep);border-radius:99px;transition:width .4s var(--ease)}
    .lang-toggle{display:flex;background:var(--oat);border-radius:999px;padding:3px}
    .lang-toggle button{font-size:.76rem;font-weight:600;padding:5px 11px;border-radius:999px;border:0;background:transparent;color:var(--ink-soft);transition:all .2s}
    .lang-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(26,31,30,.1)}
    /* Reserve the scrollbar gutter on BOTH sides. Without this the scrollbar
       only eats space on the right, so the panel centres ~7px left of the
       header and progress bar (which sit outside this scroll box), and shifts
       between steps that do and do not scroll. */
    .quiz-content{overflow-y:auto;scrollbar-gutter:stable both-edges;padding:clamp(36px,6vh,72px) clamp(24px,8vw,120px)}
    .quiz-panel{max-width:760px;margin:0 auto;animation:panelIn .4s var(--ease)}
    .result-panel{max-width:900px}
    .quiz-step{margin:0 0 18px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}
    .quiz-step::before{content:'';width:26px;height:2px;background:var(--ink);opacity:.35;border-radius:2px}
    .quiz-panel h1,.quiz-panel h2{margin:0 0 20px;font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:clamp(2.6rem,5.4vw,4.2rem);letter-spacing:-.01em;line-height:.98}
    .quiz-panel h1 em,.quiz-panel h2 em{font-style:normal;position:relative;white-space:nowrap;z-index:0;display:inline-block}
    .quiz-panel h1 em::after,.quiz-panel h2 em::after{content:'';position:absolute;left:0;right:0;bottom:.05em;height:.26em;background:var(--yellow);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
    .quiz-helper{margin:0 0 28px;max-width:560px;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
    /* Confirms an answer changed the plan. [hidden] must win over display:flex. */
    .quiz-feedback{margin:16px 0 0;display:flex;align-items:flex-start;gap:9px;max-width:560px;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
    .quiz-feedback[hidden]{display:none}
    .quiz-feedback::before{content:'';width:7px;height:7px;margin-top:.45em;border-radius:50%;background:var(--yellow-deep);flex:none}
    /* Fill the panel. Capped at 600px it sat 80px left of the centred panel
       while the heading spanned the full 760px, so step 1 read as off-centre
       against every other step. The breed step already used full width. */
    .big-input{display:block;margin:34px 0 26px;background:#fff;border-radius:var(--radius);padding:18px 24px 14px;box-shadow:var(--shadow-soft);transition:box-shadow .25s var(--ease)}
    .big-input:focus-within{box-shadow:var(--shadow),0 0 0 3px var(--icy)}
    .big-input span,.compact-input span,.postcode-label,.delivery-day-field legend{display:block;margin-bottom:5px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
    .big-input input{width:100%;border:0;outline:0;background:transparent;padding:4px 0;font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.1}
    input::placeholder{color:rgba(26,31,30,.22)}
    .quiz-next{min-width:180px;min-height:52px;border:0;background:var(--yellow);border-radius:999px;padding:14px 26px;font-weight:600;box-shadow:0 12px 26px -12px rgba(245,214,120,.9);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;display:inline-flex;align-items:center;justify-content:center;gap:10px}
    .quiz-next:hover:not(:disabled){background:var(--yellow-deep);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(245,214,120,.95)}
    .quiz-next:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
    .quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:32px}
    .back-button{border:0;background:transparent;font-weight:600;padding:12px 0;color:var(--ink-soft);transition:color .2s}
    .back-button:hover{color:var(--ink)}
    .choice-grid{display:grid;gap:14px}.three-choices{grid-template-columns:repeat(3,1fr)}.two-choices{grid-template-columns:repeat(2,1fr)}
    .choice{background:#fff;border:0;min-height:130px;padding:24px;border-radius:var(--radius);text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:8px;box-shadow:var(--shadow-soft);transition:transform .22s var(--ease),background .22s,box-shadow .22s var(--ease)}
    .choice:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .choice.selected{background:var(--yellow);box-shadow:var(--shadow)}
    .choice span{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.7rem;line-height:1}
    .choice small{line-height:1.4;color:var(--ink-soft);font-size:.85rem}
    .choice.selected small{color:rgba(26,31,30,.75)}
    .choice-list{display:grid;gap:12px}
    .choice-list .choice{min-height:92px;flex-direction:row;align-items:center;gap:20px}
    .choice-list .choice span{flex:0 0 150px}
    .weight-input{width:min(400px,100%);height:120px;margin:32px 0 10px;background:#fff;border:0;border-radius:var(--radius);display:flex;align-items:center;padding:20px 30px;box-shadow:var(--shadow-soft);transition:box-shadow .25s var(--ease)}
    .weight-input:focus-within{box-shadow:var(--shadow),0 0 0 3px var(--yellow)}
    .weight-input input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:4rem}
    .weight-input span{font-size:1.3rem;font-weight:600}
    /* Deliberately quiet: a text button, not a call to action. Most households
       have one dog and should not have to read past this. */
    .more-dogs{display:block;margin:0 0 22px;padding:0;border:0;background:none;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
    .more-dogs:hover{color:var(--ink)}
    .dog-count{margin:0 0 24px;padding:16px 18px;border-radius:16px;background:var(--oat)}
    .dog-count-q{display:block;margin-bottom:10px;font-size:.9rem;font-weight:600}
    .dog-count-opts{display:flex;flex-wrap:wrap;gap:8px}
    .dog-count-opt{min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:#fff;font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--shadow-soft);transition:background .15s var(--ease)}
    .dog-count-opt.is-on{background:var(--yellow)}
    .dog-count-one{margin-top:12px;padding:0;border:0;background:none;font:inherit;font-size:.82rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
    .sex-grid{margin:6px 0 26px}
    .sex-grid .choice{min-height:84px}
    .breed-field{position:relative;max-width:600px}
    .breed-field .big-input{max-width:none;margin-bottom:14px}
    .breed-suggestions{position:absolute;z-index:4;top:calc(100%, 16px);left:0;right:0;max-height:300px;overflow-y:auto;background:#fff;border:0;border-radius:18px;box-shadow:var(--shadow)}
    .breed-suggestions button{width:100%;min-height:48px;padding:11px 18px;border:0;border-bottom:1px solid rgba(26,31,30,.06);background:transparent;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left}
    .breed-suggestions button:last-child{border-bottom:0}
    .breed-suggestions button:hover,.breed-suggestions button:focus-visible{background:var(--icy-soft);outline:0}
    .quick-links{display:flex;gap:10px;flex-wrap:wrap}
    .quick-links button{border:0;background:var(--oat);border-radius:99px;padding:9px 16px;font-size:.8rem;font-weight:600;transition:background .2s}
    .quick-links button:hover{background:var(--oat-deep,#E6E0D2)}
    .quick-links button.is-on{background:var(--sun,#FBE38B)}
    /* The optional "which breeds" block under the mixed-breed button. */
    .breed-mix{max-width:600px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(26,31,30,.08)}
    /* .quiz-panel h2 is the step-headline size. This is a sub-question inside a
       step, so it needs the same selector weight to sit below the headline. */
    .quiz-panel .breed-mix-q{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.6rem;line-height:1.1;margin:0 0 6px}
    .breed-mix .breed-field{margin-top:14px}
    .breed-mix .compact-input{margin:0}
    .breed-mix-full{margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
    .breed-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .breed-chip{display:inline-flex;align-items:center;gap:8px;background:var(--oat);border-radius:99px;padding:8px 8px 8px 16px;font-size:.85rem;font-weight:600}
    .breed-chip button{width:26px;height:26px;border:0;border-radius:50%;background:rgba(26,31,30,.08);font-size:1rem;line-height:1;cursor:pointer}
    .breed-chip button:hover,.breed-chip button:focus-visible{background:rgba(26,31,30,.16);outline:0}
    .contact-fields,.delivery-fields{display:grid;gap:16px;max-width:640px;margin-top:30px}
    /* First and last name side by side on a desktop, stacked on a phone. */
    .name-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media (max-width:560px){.name-row{grid-template-columns:1fr}}
    .compact-input{display:block;border:0;border-radius:18px;padding:14px 20px 12px;background:#fff;box-shadow:var(--shadow-soft);transition:box-shadow .25s var(--ease),background .25s}
    .compact-input:focus-within{background:var(--icy-soft);box-shadow:var(--shadow)}
    .compact-input input{width:100%;border:0;outline:0;background:transparent;font-family:var(--body);font-weight:500;font-size:1.05rem;padding:4px 0}
    .field-error{display:block;margin-top:6px;color:#9a4a30;font-size:.74rem;line-height:1.4;font-family:var(--body);font-weight:500}
    .postcode-field{position:relative}
    .postcode-trigger{width:100%;min-height:74px;padding:14px 20px;border:0;border-radius:18px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;text-align:left;box-shadow:var(--shadow-soft);transition:background .25s,box-shadow .25s var(--ease)}
    .postcode-trigger.has-value{background:var(--icy-soft)}
    .postcode-trigger:focus-visible{box-shadow:var(--shadow)}
    .postcode-trigger strong{font-family:var(--body);font-weight:600;font-size:1.15rem}
    .postcode-trigger small{color:var(--ink-soft)}
    .postcode-options{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 8px);max-height:280px;overflow-y:auto;border:0;border-radius:18px;background:#fff;box-shadow:var(--shadow)}
    .postcode-options button{width:100%;min-height:48px;padding:10px 18px;border:0;border-bottom:1px solid rgba(26,31,30,.06);background:transparent;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;text-align:left}
    .postcode-options button:hover,.postcode-options button:focus-visible{background:var(--icy-soft);outline:0}
    .postcode-options button strong{font-family:var(--body);font-weight:600;font-size:1rem}
    .delivery-day-field{margin:4px 0 0;padding:0;border:0;animation:panelIn .3s var(--ease)}
    .delivery-day-field p{margin:0 0 10px;font-size:.8rem;color:var(--ink-soft)}
    .delivery-day-field>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .delivery-day{width:100%;min-height:80px;padding:14px 18px;border:0;border-radius:18px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;box-shadow:var(--shadow-soft)}
    .delivery-day.selected{background:var(--yellow);box-shadow:var(--shadow)}
    .delivery-day span{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.4rem}
    .delivery-day small{color:var(--ink-soft)}
    .building-plan{text-align:center}
    .building-dog{width:126px;height:126px;margin:0 auto 26px;background:var(--icy);border:0;border-radius:50%;display:grid;place-items:center;animation:breathe 1.6s var(--ease) infinite;box-shadow:var(--shadow-soft)}
    .building-dog img{width:64px;height:auto}
    .building-plan .quiz-step{justify-content:center}
    .building-plan ul{max-width:540px;margin:32px auto 0;padding:0;list-style:none;text-align:left}
    .building-plan li{padding:15px 0;border-bottom:1px solid rgba(26,31,30,.08);opacity:.25;transform:translateX(-8px);transition:opacity .9s var(--ease),transform .9s var(--ease);display:flex;align-items:center}
    .building-plan li span{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:14px;background:var(--icy);border-radius:50%;font-size:.8rem;flex:none;transform:scale(.55);opacity:.45;transition:transform .55s var(--ease) .18s,opacity .55s var(--ease) .18s,background .4s}
    .building-plan li.done{opacity:1;transform:none}
    .building-plan li.done span{transform:scale(1);opacity:1;background:var(--yellow)}
    .puppy-result{text-align:center}
    .puppy-result .quiz-step{justify-content:center}
    .puppy-icon{width:110px;height:110px;margin:0 auto 24px;border:0;border-radius:50%;background:var(--icy);display:grid;place-items:center;box-shadow:var(--shadow-soft)}
    .puppy-icon img{width:56px;height:auto}
    .puppy-result>p:not(.quiz-step){max-width:620px;margin:0 auto 28px;line-height:1.65;color:var(--ink-soft)}
    .puppy-waitlist{max-width:600px;margin:24px auto 0;display:grid;grid-template-columns:1fr auto;gap:12px;text-align:left}
    .puppy-waitlist .puppy-born{grid-column:1/-1}
    .puppy-waitlist select{width:100%;border:0;outline:0;background:transparent;padding:6px 0;font-size:1rem;font-family:inherit;color:inherit}
    .puppy-waitlist label{background:#fff;border-radius:18px;padding:12px 18px 10px;box-shadow:var(--shadow-soft)}
    .puppy-waitlist label span{display:block;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
    .puppy-waitlist input{width:100%;border:0;outline:0;background:transparent;padding:6px 0;font-size:1rem}
    .waitlist-success,.checkout-note{padding:14px 18px;background:var(--icy-soft);border:0;border-radius:14px;font-size:.8rem;line-height:1.5;text-align:center;color:var(--ink-soft)}
    .waitlist-success{max-width:600px;margin:22px auto!important}
    /* The simplified result page. The sentence IS the headline, so both lines
       share ONE font (the body face, like the reference) instead of mixing the
       handwritten display face with body text. Overrides .quiz-panel h1. */
    .quiz-panel h1.result-line,.result-panel .result-dayprice{
      margin:0;font-family:var(--body);font-weight:600;letter-spacing:0;
      font-size:clamp(1.3rem,2.7vw,1.95rem);line-height:1.4;
    }
    .quiz-panel h1.result-line{margin-bottom:14px}
    /* Day price for comprehension, the real recurring amount right under it, and
       the first delivery last. Nothing about the charge is hidden until payment. */
    .result-prices{margin:0 0 18px}
    .result-panel .result-dayprice{margin-bottom:6px}
    /* Start week. The zone still decides the weekday, this only picks which week. */
    /* Yellow marker behind whatever matters, never a second font or colour. */
    .quiz-panel h1.result-line em,.result-panel .result-dayprice em{
      font-style:normal;position:relative;z-index:0;display:inline-block;white-space:nowrap;
    }
    .quiz-panel h1.result-line em::after,.result-panel .result-dayprice em::after{
      content:'';position:absolute;left:-.09em;right:-.09em;bottom:.02em;height:.44em;
      background:var(--yellow);z-index:-1;border-radius:5px;transform:rotate(-.5deg);
    }
    /* The week, as a quiet card between the price and the recipes. */
    .result-week{margin:0 0 22px;padding:14px 18px;border-radius:14px;background:var(--icy-soft)}
    .result-week-label{margin:0 0 4px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
    .result-week-line{margin:0;font-size:.98rem;line-height:1.5}
    .result-week-then{margin:4px 0 0;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
    .result-profile{margin:12px 0 24px 78px;text-transform:capitalize;font-size:.84rem;color:var(--ink-soft)}
    .result-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
    .result-grid>div{min-height:126px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-soft)}
    .result-grid span,.result-price>span{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
    .result-grid strong{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.8rem}
    .result-grid small{font-size:.72rem;color:var(--ink-soft)}
    .result-main{background:var(--icy)!important}
    .result-main strong{font-size:2.9rem}
    /* Several dogs means several of the same panel, so they need air between
       them and the closing block needs no top rule of its own. */
    .result-panel + .result-panel{margin-top:clamp(28px,4vw,52px);padding-top:clamp(28px,4vw,52px);border-top:1px solid rgba(26,31,30,.1)}
    .result-tail{margin-top:clamp(24px,3vw,40px)}
    .result-puppy{margin:22px 0 0;padding:12px 16px;border-radius:14px;background:var(--oat);font-size:.86rem;max-width:52ch}
    .recipe-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    /* The card is a plain container: the pick control and the ingredients
       expander are separate interactive elements, so neither swallows the other. */
    .rc-card{position:relative;border-radius:18px;background:#fff;display:flex;flex-direction:column;text-align:left;box-shadow:var(--shadow-soft);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
    /* Tall enough to show most of the bag, the way the homepage cards do. A
       fixed height rather than an aspect ratio, so a one-column phone layout
       does not turn the window into half a screen. */
    .rc-window{position:relative;height:clamp(200px,26vh,277px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
    /* One neutral window for every recipe. It used to be tinted per recipe id,
       which meant a recipe added in the dashboard got no background at all.
       The pack art carries the tint, so the window does not need to. */
    .rc-card .rc-window{background:linear-gradient(180deg,#F7F5F0,#FDFCFA)}
    .rc-window svg{width:54%;transform:translateY(8%);filter:drop-shadow(0 16px 20px rgba(26,31,30,.16))}
    .rc-window .rc-photo{width:100%;height:96%;object-fit:contain;object-position:bottom;display:block;filter:drop-shadow(0 18px 22px rgba(26,31,30,.16))}
    .rc-card.soon .rc-window .rc-photo{filter:drop-shadow(0 18px 22px rgba(26,31,30,.1)) saturate(.7);opacity:.9}
    .rc-body{padding:12px 14px 10px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;flex:1}
    .rc-body strong{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.4rem}
    /* Foot of the card: the pick control on the left, the bag count on the
       right, on one line. */
    .rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(26,31,30,.08)}
    .rc-count{margin:0;padding-right:14px;font-size:.8rem;font-weight:600;white-space:nowrap}
    .rc-card:hover:not(.soon){transform:translateY(-2px);box-shadow:var(--shadow)}
    .rc-card.selected{box-shadow:0 0 0 3px var(--yellow-deep),var(--shadow)}
    .rc-card.soon{opacity:.62}
    /* Ingredients: collapsed by default, opened only if the customer asks. */
    .rc-ing{margin-top:8px;width:100%}
    .rc-ing summary{cursor:pointer;font-size:.72rem;font-weight:600;color:var(--ink-soft);list-style:none;display:inline-flex;align-items:center;gap:5px;padding:2px 0;border-bottom:2px solid var(--yellow)}
    .rc-ing summary::-webkit-details-marker{display:none}
    .rc-ing summary::after{content:'+';font-weight:700}
    .rc-ing[open] summary::after{content:'\2212'}
    .rc-ing ul{margin:8px 0 0;padding:0;list-style:none;font-size:.7rem;line-height:1.5;color:var(--ink-soft)}
    /* Pick control at the foot of the card, like the old site's checkbox row. */
    .rc-pick{flex:1;min-width:0;margin:0;padding:11px 14px;border:0;background:transparent;font:inherit;font-size:.8rem;font-weight:600;text-align:left;cursor:pointer;display:flex;align-items:center;gap:9px}
    .rc-pick:hover{background:var(--oat)}
    .rc-box{width:19px;height:19px;flex:none;border:2px solid rgba(26,31,30,.28);border-radius:6px;display:grid;place-items:center;font-size:.7rem;line-height:1}
    .rc-card.selected .rc-box{background:var(--ink);border-color:var(--ink);color:#fff}
    .recipe-soon-tag{position:absolute;top:10px;left:10px;z-index:1;min-height:18px;padding:4px 9px;border-radius:99px;background:#fff;font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);box-shadow:0 4px 12px rgba(26,31,30,.12)}
    .recipe-note{font-size:.72rem;color:var(--ink-soft)}
    /* Day price sits beside the 28-day total, never instead of it. */
    .result-price{margin-top:14px;background:var(--yellow);border:0;border-radius:var(--radius);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 12px 26px -12px rgba(245,214,120,.9)}
    .result-price>span{color:rgba(26,31,30,.75)}
    .result-price strong{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:2.2rem}
    .result-price small{font-weight:500;letter-spacing:0;text-transform:none}
    .result-disclaimer{margin:15px 0 0;font-size:.76rem;line-height:1.55;color:var(--ink-soft)}
    .result-support{margin:8px 0 0;font-size:.76rem;line-height:1.55;color:var(--ink-soft)}
    .checkout-button{margin-top:20px;width:100%}
    .checkout-note{margin:14px 0 0}
    .result-back{display:block;margin:10px auto 0;font-size:.82rem}
    .quiz-footer{border-top:1px solid rgba(26,31,30,.06);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--ink-soft)}
    @keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
    @keyframes breathe{50%{transform:scale(1.05) rotate(2deg)}}
    @media(max-width:980px){.result-grid{grid-template-columns:1fr 1fr}.result-main{grid-column:1/-1}}
    @media(max-width:700px){
      .quiz-shell{grid-template-rows:64px minmax(0,1fr) calc(38px + env(safe-area-inset-bottom))}
      .quiz-header{padding:0 16px;gap:14px}.quiz-brand img{height:24px}
      .quiz-content{padding:38px 20px 55px}
      .quiz-panel h1,.quiz-panel h2{font-size:2.5rem}
      .three-choices,.two-choices{grid-template-columns:1fr}
      .choice{min-height:96px}.three-choices .choice{min-height:88px}
      .choice-list .choice{flex-direction:column;align-items:flex-start;gap:6px}
      .choice-list .choice span{flex:none}
      .puppy-waitlist{grid-template-columns:1fr}
      .quiz-actions{align-items:stretch}.quiz-actions .quiz-next{flex:1;min-width:0}
      .result-profile{margin-left:0}
      .result-grid{grid-template-columns:1fr}.result-main{grid-column:auto}
      .result-price{align-items:flex-start;flex-direction:column;gap:12px}
      .recipe-options{grid-template-columns:1fr}
      .quiz-footer{padding:0 16px;font-size:.56rem}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Out-of-zone entry in the postcode list: clearly a different kind of choice. */
.postcode-other{border-top:1px solid rgba(26,31,30,.08);color:var(--ink-soft);font-weight:600}
.postcode-other strong{font-weight:600}

    /* Nutrition bubbles + plain-text ingredients on the recipe cards.
       Mirrors base.css / app.css: the quiz is a standalone shell with its own
       stylesheet, so shared components have to be repeated here. */
    .rc-body .nutri{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 8px}
    .rc-body .nutri-item{flex:1 1 calc(33.333% - 3px);background:var(--oat);border-radius:9px;padding:5px 2px;text-align:center;min-width:0}
    .rc-body .nutri-item b{display:block;font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:.92rem;line-height:1.1}
    .rc-body .nutri-item span{display:block;font-size:.48rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);line-height:1.2}
    .rc-body .ingredients{margin:0;font-size:.7rem;line-height:1.5;color:var(--ink-soft)}
    /* "Sjá innihald": the declaration on demand, so the cards stay the same
       height until somebody asks for it. */
    .rc-ing{width:100%;margin-top:2px}
    .rc-ing summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0;font-size:.72rem;font-weight:600;color:var(--ink-soft);list-style:none}
    .rc-ing summary::-webkit-details-marker{display:none}
    .rc-ing summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s var(--ease)}
    .rc-ing[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
    .rc-ing summary:hover{color:var(--ink)}
    .rc-ing summary:focus-visible{outline:3px solid #74c7d3;outline-offset:2px;border-radius:6px}
    .rc-ing .ingredients{margin-top:4px}

/* ---------- aukavöruskrefið ----------
   Cards adapt to however many products are active: one looks deliberate, six
   wrap. Nothing here knows a product name. */
.addon-panel .quiz-help{color:var(--ink-soft);margin:6px 0 18px}
.ao-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.ao-card{display:flex;gap:16px;background:#fff;border:1px solid #E8E3D8;border-radius:16px;padding:14px}
/* The picture is the product. At 74px it was a thumbnail beside the words; a
   treat is bought by the look of it, so it gets room to be looked at. */
.ao-art{flex:none;width:118px;height:118px;border-radius:12px;overflow:hidden;background:#F0ECE3}
.ao-art img{width:100%;height:100%;object-fit:cover;display:block}
.ao-noimg{display:block;width:100%;height:100%;background:linear-gradient(135deg,#F0ECE3,#FDFCFA)}
.ao-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ao-body strong{font-size:.98rem}
.ao-note{font-size:.82rem;color:var(--ink-soft);line-height:1.35}
.ao-price{font-size:.86rem;font-weight:600}
@media(max-width:520px){.ao-card{flex-direction:column}.ao-art{width:100%;height:180px}}

.result-week-foot{margin:18px 0 0;font-size:.84rem;line-height:1.5;color:var(--ink-soft);text-align:center}

    /* The volume rides quietly beside the grams: an approximation next to an
       exact figure should not look equally exact. */
    .result-dl{font-style:normal;font-weight:500;color:var(--ink-soft);white-space:nowrap}

    /* Two halves of one page. Splitting the add-ons across two steps would
       have made the journey longer, which is the opposite of the point. */
    .ao-section{margin:0 0 28px}
    .ao-section h2{margin:0;font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.5rem;line-height:1.1}
    /* Advice, offered at the size of advice. The stepper beside it stays the
       customer's decision. */

    /* ---- the declaration, on a card and in its dialog ---------------- */
    /* The short list under a name: what is in the food, no percentages. */
    .rc-short{font-size:.78rem;line-height:1.45;color:var(--ink-soft)}
    /* "Skoða" opens the declaration. Same control on a recipe and on a treat,
       because it opens the same dialog either way. */
    .q-see{align-self:flex-start;margin-top:6px;border:0;background:none;padding:4px 0;font:inherit;font-size:.76rem;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
    .q-see:hover{opacity:.7}
    .q-see:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
    /* display:flex on a class beats the browser's own [hidden]{display:none},
       so this dialog is added to and removed from the document instead of
       being hidden, and there is only ever one of it. */
    .q-info{position:fixed;inset:0;z-index:9999;background:rgba(26,31,30,.55);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
    .q-info-box{position:relative;background:var(--offwhite,#FAF9F6);border-radius:20px;max-width:520px;width:100%;padding:0 0 28px;box-shadow:0 40px 80px -30px rgba(26,31,30,.6);outline:none;max-height:calc(100vh - 40px);overflow-y:auto}
    .q-info-box h3{font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.9rem;line-height:1.05;margin:24px 28px 0}
    .q-info-box h4{margin:18px 28px 6px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
    .q-info-box .ingredients{margin:0 28px;font-size:.94rem;line-height:1.65}
    .q-info-add{font-size:.82rem;color:var(--ink-soft)}
    .q-info-nutri{margin:0 28px 4px}
    .q-info-nutri .nutri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
    .q-info-nutri .nutri-item{background:#fff;border:1px solid rgba(26,31,30,.08);border-radius:12px;padding:9px 6px;text-align:center;min-width:0;box-shadow:none;flex:none}
    .q-info-nutri .nutri-item b{display:block;font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.05rem;line-height:1.1}
    .q-info-nutri .nutri-item span{display:block;font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);line-height:1.25}
    .q-info-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(250,249,246,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(26,31,30,.18)}
    .q-info-x:hover{background:#fff}
    .q-info-x:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
    @media (max-width:520px){.q-info-box h3{font-size:1.5rem;margin:20px 20px 0}.q-info-box h4,.q-info-box .ingredients,.q-info-nutri{margin-left:20px;margin-right:20px}}

    /* ---- the add-on step: two questions, four buttons ---------------- */
    /* A card is a kind, not a quantity. It only becomes a control when there is
       more than one kind to choose between. */
    .ao-card.is-choosable{cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
    .ao-card.is-choosable:hover{border-color:rgba(26,31,30,.3)}
    .ao-card.is-choosable:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
    .ao-card.is-choosable.is-picked{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
    .ao-art{position:relative}
    .ao-state{margin:0 0 6px;font-size:.86rem;color:var(--ink-soft)}
    .ao-state.is-on{color:var(--ink);font-weight:600}
    .ao-recurnote{font-weight:400;font-size:.8rem;color:var(--ink-soft)}
    .q-info-lead{margin-top:14px}
    /* One way onward and one way past it. The skip is a link so the page has a
       single thing to press. */
    .ao-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:6px}
    .ao-foot .checkout-button{flex:1 1 260px;margin-bottom:0}
    .ao-skip{border:0;background:none;padding:8px 2px;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
    .ao-skip:hover{color:var(--ink)}
    .ao-skip:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}

    /* ---- the add-on step: cards with a tick, and nothing else ------- */
    /* The whole card is the control, so the tick never has to be aimed at. */
    .ao-card{position:relative;padding-right:52px}
    .ao-card.is-choosable{cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
    .ao-card.is-choosable:hover{border-color:rgba(26,31,30,.32)}
    .ao-card.is-choosable:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
    .ao-card.is-picked{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
    /* An empty ring, not an empty space: the customer can see there is
       something to tick before they have ticked it. */
    .ao-check{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;border:2px solid rgba(26,31,30,.24);background:#fff;display:grid;place-items:center;font-size:.8rem;line-height:1;color:transparent}
    .ao-card.is-picked .ao-check{background:var(--ink);border-color:var(--ink);color:#fff}
    .ao-price{font-size:.86rem;font-weight:600}
    /* Said once, under what was picked, and nowhere else. */
    .ao-state{margin:2px 0 4px;font-size:.9rem}
    .ao-line{display:block;font-weight:600}
    .ao-recurnote{display:block;margin-top:4px;font-size:.82rem;font-weight:400;color:var(--ink-soft)}
    .ao-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px;margin-bottom:6px}
    .ao-foot .checkout-button{flex:1 1 260px;margin-bottom:0}
    .ao-skip{border:0;background:none;padding:8px 2px;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
    .ao-skip:hover{color:var(--ink)}
    .ao-skip:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
    .ao-section{margin:0 0 26px}
    .ao-section h2{margin:0 0 12px;font-family:var(--serif);font-variation-settings:var(--serif-axes);font-weight:500;font-size:1.5rem;line-height:1.1}