/* Food safety plan: the landing, the start flow's additions, the plan page and the print view.
   Tokens and buttons come from brand/brand.css; the app shell (appbar, cards, tiles, actionbar) from app.css. */

/* ---------- product header (the service's own, not the brand menu) ---------- */
.ph{position:sticky;top:0;z-index:30;background:rgb(253 251 249 / .96);box-shadow:0 1px 0 var(--line)}
.ph .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.ph-name{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;align-items:center}
.ph-name b{font-size:20px;letter-spacing:-.02em;font-weight:750}
.ph-name small{font-size:16px;color:var(--ink-2);font-weight:500}
.ph .btn{margin-left:auto;min-height:44px;padding:0 20px}

/* ---------- landing ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)}
.hero h1{margin-bottom:18px;max-width:13ch}
.hero .lead{max-width:34ch}
.find{display:flex;gap:8px;padding:6px;border-radius:var(--r-btn);background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-2);max-width:540px}
.find input{flex:1;min-width:0;min-height:52px;border-radius:var(--r-btn);box-shadow:none;padding:0 18px;background:transparent}
.find input:focus{box-shadow:none}
.find:focus-within{box-shadow:0 0 0 2px var(--ink),var(--shadow-2)}
.find .btn{flex:none;padding:0 24px}
.find-hint{margin:14px 0 0;font-size:16px;color:var(--ink-2)}
.sheets{position:relative;display:grid;place-items:center;padding:32px 20px 40px;border-radius:36px;background:var(--sunk);overflow:hidden}
.sheets figure{margin:0;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow-3);overflow:hidden}
.sheets img{display:block;width:100%;height:auto}
.sheets .a{width:min(78%,330px);rotate:-2deg;z-index:1}
.sheets .b{width:min(88%,420px);margin:-34px 0 0 22%;rotate:1.5deg}
.sheets figcaption{position:absolute;left:-9999px}
.sheets .tag{margin:16px 0 0;font-size:16px;color:var(--ink-2);justify-self:end}
.band{padding:64px 4px}
@media (min-width:900px){.band{padding:104px 4px}}
.band.sunk{background:var(--sunk)}
.band h2{max-width:22ch}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--surface);font-weight:700;font-size:18px}
.steps b{display:block;font-size:20px;letter-spacing:-.01em;margin-bottom:2px}
.steps span{color:var(--ink-2)}
.price{display:grid;gap:10px;padding:28px 24px;border-radius:32px;background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.price .amt{display:flex;align-items:baseline;gap:10px;margin:0}
.price .amt b{font-size:clamp(2.4rem,2rem + 1vw,2.75rem);line-height:1;letter-spacing:-.035em;font-weight:760;font-variant-numeric:tabular-nums}
.price .amt span{color:var(--ink-2)}
.price p{margin:0}
.price .btn{margin-top:10px}

/* ---------- start flow ---------- */
.q{margin:0 0 22px}
.q:last-child{margin-bottom:0}
.q>p{font-weight:600;font-size:17px;margin:0 0 10px}
.q .seg{margin:0}
.src-note{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--sunk);font-size:16px;font-weight:600}
.src-note[hidden]{display:none}
.pane[hidden]{display:none}
.wait-note{color:var(--ink-2)}

/* ---------- plan page ---------- */
.plan-main{width:min(100% - 2 * var(--gutter),640px);margin:0 auto;padding:28px 0 56px}
.plan-main h1{font-size:clamp(2.1rem,1.7rem + 2vw,3rem);margin-bottom:8px}
.plan-main .lead{margin-bottom:20px}
.logs{list-style:none;margin:0;padding:0}
.logs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 0;box-shadow:0 1px 0 var(--line)}
.logs li:last-child{box-shadow:none}
.logs b{font-size:17px}
.logs small{grid-column:1;font-size:16px;color:var(--ink-2)}
.logs .btn{grid-row:1 / span 2;grid-column:2;min-height:44px;padding:0 18px}
.kinds{display:grid;gap:0;margin:14px 0 4px}
.kinds div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:12px 0;box-shadow:0 1px 0 var(--line)}
.kinds div:last-child{box-shadow:none}
.kinds b{font-size:17px}
.kinds span{font-size:16px;color:var(--ink-2)}
.kinds em{grid-row:1 / span 2;grid-column:2;font-style:normal;font-size:16px;color:var(--ink-2);align-self:center;white-space:nowrap}
.buy{display:grid;gap:10px;margin-top:20px}
.buy .amt{display:flex;align-items:baseline;gap:10px}
.buy .amt b{font-size:2.2rem;line-height:1;letter-spacing:-.03em;font-weight:760}
.buy .amt span{color:var(--ink-2)}
.buy .small{margin:0}
.ready-box{display:grid;gap:14px}
.ready-box .btn{width:100%}
.again textarea{min-height:110px}
.again .btn{margin-top:12px;width:100%}
.save-line{display:grid;gap:10px;margin-top:6px}
.save-line .row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ok{color:var(--ok);font-weight:650}

@media (min-width:1024px){
  .plan-main{width:min(100% - 2 * var(--gutter),1040px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
  .plan-main>h1,.plan-main>.lead,.plan-main>.err,.plan-main>.legal-mini{grid-column:1 / -1}
  .plan-main>.pane.l{grid-column:1}.plan-main>.pane.r{grid-column:2;position:sticky;top:88px}
}
@media (max-width:1023px){.plan-main.paid{display:flex;flex-direction:column}.plan-main.paid .pane.r{order:1;margin-bottom:16px}.plan-main.paid .pane.l{order:2}.plan-main.paid .err{order:3}.plan-main.paid .legal-mini{order:4}}
@media (max-width:900px){.hero,.two{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:none}}
@media (max-width:560px){.find{display:grid;border-radius:24px}.find .btn{width:100%}.ph-name small{display:none}}

/* ---------- print view ---------- */
body.print{background:#fff}
.bar-print{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px var(--gutter);background:var(--sunk);box-shadow:0 1px 0 var(--line)}
.bar-print .btn{min-height:44px}
.bar-print a{color:var(--ink);font-weight:600}
.doc{width:min(100% - 2 * var(--gutter),860px);margin:0 auto;padding:24px 0 64px}
.doc section{margin:0 0 48px}
.doc h2{font-size:28px;margin:0 0 14px;padding-bottom:10px;box-shadow:0 2px 0 var(--ink)}
.doc h3{font-size:19px;margin:22px 0 8px}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin:0 0 6px}
.doc table{font-size:16px;margin:0 0 18px}
.doc th{background:var(--sunk)}
.doc .cover{padding:80px 0}
.doc .cover h1{font-size:44px}
.tbl{overflow-x:auto}
.sheet h2{box-shadow:none;margin:0}
.sheet .lim{margin:0 0 6px;color:var(--ink-2)}
.sheet table td{height:30px}
.sheet table th,.sheet table td{border:1px solid var(--line-strong);padding:4px 6px}
.lines p{margin:0;height:26px;box-shadow:0 1px 0 var(--line-strong)}
@media print{
  .bar-print,.noprint{display:none!important}
  body.print{font-size:11pt}
  .doc{width:auto;padding:0}
  .doc section{break-before:page;margin:0}
  .doc section:first-child{break-before:auto}
  .doc h2{font-size:20pt}
  .doc table{font-size:9pt}
  .doc .sheet{page:sheet;break-before:page}
  .doc .sheet table td{height:20px}
  .doc .sheet table th,.doc .sheet table td{padding:2px 4px;font-size:8.5pt}
  @page{margin:14mm}
  @page sheet{size:landscape;margin:10mm}
  a{color:inherit}
}