/* /checkout/ and /make/ on the shared site design system (site.css, body class "hm fl").
   Type: 13 / 16 / 20 / 25 / 31. Space: 8-pt. Green = actions and checks only. Every flow class is .fl-*. */
body.fl{padding-bottom:48px;overflow-x:hidden}
.fl-hd{border-bottom:1px solid var(--line);background:var(--bg)}
.fl-hd .hm-in{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.fl-bk{font:500 15px/1 Inter,sans-serif;color:var(--muted)!important;text-decoration:none;padding:14px 0}
.fl-bk:hover{color:var(--ink)!important;text-decoration:underline}
.fl-bk[hidden]{display:none}
/* layout: phone = strip on top, then the step. laptop = step left, sticky card right */
.fl-lay{display:flex;flex-direction:column;gap:16px;padding:16px 0 0}
.fl-main{min-width:0;max-width:560px;width:100%}
.fl-solo .fl-main{margin:48px auto 0}
.fl-sc{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;gap:16px;align-items:center}
.fl-sc-cv{width:64px;flex:none}
.fl-sc-cv canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:6px;background:#0b0d0e}
.fl-sc-b{min-width:0;flex:1;display:grid;position:relative}
.fl-sc-k,.fl-sc-tk,.fl-sc-p,.fl-sc .hm-assure{display:none}
.fl-sc-a{font:700 16px/1.3 Inter,sans-serif;color:var(--ink);padding-right:56px}
.fl-sc-v{font:400 13px/1.4 Inter,sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-sc-d{font:400 13px/1.4 Inter,sans-serif;color:var(--muted)}
.fl-sc-for{font:600 13px/1.4 Inter,sans-serif;color:var(--soft)}
.fl-sc-for:empty{display:none}
.fl-sc-ok{position:absolute;right:0;bottom:0;font:600 13px/1.4 Inter,sans-serif;color:var(--accent)}
.fl-sc-b::after{content:attr(data-price);position:absolute;right:0;top:0;font:700 16px/1.3 Inter,sans-serif;color:var(--ink)}
.fl-h{font:800 25px/1.15 Inter,sans-serif;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.hm .fl-h{font-size:25px;line-height:1.15;margin:0 0 8px}
.hm .fl-p{font-size:16px;line-height:1.5;color:var(--soft);margin:0 0 24px}
.hm .fl-fine{color:var(--muted);font-size:13px;line-height:1.5;margin:16px 0 0}
.fl-ex{color:var(--muted);font-size:13px;margin:8px 0 0}
.fl-l,.fl-sl2{display:block;margin:24px 0 8px;font:600 15px/1.3 Inter,sans-serif;color:var(--ink)}
.fl-sl2{color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.fl-opt2{color:var(--muted);font-weight:500;font-size:13px;margin-left:8px}
.fl-in{width:100%;min-height:52px;background:var(--raised);border:1.5px solid var(--line2);border-radius:12px;color:var(--ink);padding:12px 16px;font:400 16px/1.35 Inter,sans-serif;-webkit-appearance:none;appearance:none;display:block}
.fl-in:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(79,174,106,.18)}
textarea.fl-in{resize:vertical;min-height:120px}
.fl-in::placeholder{color:#6f6b64}
.fl-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;background:var(--accent);color:var(--on-hot);border:0;border-radius:999px;padding:0 28px;font:700 16px/1.2 Inter,sans-serif;text-decoration:none;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.fl-btn.ghost{background:none;border:1.5px solid var(--line2);color:var(--ink)}
.fl-btn[disabled]{opacity:.4;cursor:default}
.fl-btn.fl-hide{display:none}
.fl-btn+.fl-btn{margin-top:8px}
#fl-go.fl-btn{margin-top:24px}
.fl-link{background:none;border:0;color:var(--muted);font:500 15px/1 Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:12px 8px;min-height:44px}
.fl-link:hover{color:var(--ink)}
.fl-err{color:#ff8f7a;font-size:15px;margin:16px 0 0}
.fl-err:empty{display:none}
/* stepper: 1 Order . 2 Message . 3 Cover . 4 Delivery */
.fl-steps{list-style:none;display:flex;margin:0 0 24px;padding:0;gap:8px}
.fl-steps li{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:var(--muted);font:600 13px/1 Inter,sans-serif;border-top:3px solid var(--line);padding-top:8px}
.fl-steps li.on{color:var(--ink);border-top-color:var(--accent)}
.fl-steps li.past{color:var(--soft);border-top-color:var(--accent)}
.fl-sl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-sn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--raised);border:1px solid var(--line2);font-size:13px;flex:none}
.fl-steps li.on .fl-sn,.fl-steps li.past .fl-sn{background:var(--accent);color:var(--on-hot);border-color:var(--accent)}
@media (max-width:420px){.fl-steps{gap:4px}.fl-steps li{gap:4px;font-size:12px}.fl-sn{width:20px;height:20px;font-size:12px}}
/* choices */
.fl-choice{display:grid;gap:8px;grid-template-columns:1fr;margin:24px 0 0}
.fl-opt{text-align:left;background:var(--raised);border:1.5px solid var(--line2);border-radius:12px;padding:16px;color:var(--ink);cursor:pointer;font:inherit;display:block;width:100%;min-height:64px}
.fl-opt b{display:block;font:700 16px/1.3 Inter,sans-serif}
.fl-opt span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.fl-opt.on{border-color:var(--accent)}
.fl-opt.on b::after{content:" ✓";color:var(--accent)}
/* the mock of the opening screen */
.fl-mock{position:relative;background:#000;border:1px solid var(--line);border-radius:16px;padding:24px 16px;margin:0 0 8px;text-align:center;overflow:hidden}
.fl-mock-ring{width:48px;height:48px;border-radius:50%;border:2px solid var(--accent);margin:0 auto 16px;box-shadow:0 0 0 8px rgba(79,174,106,.12);animation:flp 2.2s ease-in-out infinite}
.fl-mock-from{font:700 25px/1.1 Inter,sans-serif}
.fl-mock-sub{color:var(--muted);font-size:13px;margin-top:8px}
@keyframes flp{50%{box-shadow:0 0 0 16px rgba(79,174,106,0)}}
@media (prefers-reduced-motion:reduce){.fl-mock-ring{animation:none}}
/* starters + prompt */
.fl-starters{display:grid;gap:8px}
.fl-st{text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px 16px;font:400 15px/1.4 Inter,sans-serif;cursor:pointer;min-height:48px}
.fl-st:hover,.fl-st:active{border-color:var(--accent)}
.fl-card{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:8px 16px;margin:24px 0 0}
.fl-card .fl-sl2{margin-top:16px}
.fl-prompt{font:italic 400 20px/1.4 "Source Serif 4",Georgia,serif;color:var(--ink);margin:0 0 8px}
/* recorder */
.fl-recbox{margin:24px 0 0;text-align:center}
.fl-big{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:72px;background:var(--accent);color:var(--on-hot);border:0;border-radius:999px;font:700 20px/1 Inter,sans-serif;cursor:pointer}
.fl-big[disabled]{opacity:.6}
.fl-big.on{background:#e5533d;color:#fff}
.fl-dot{width:16px;height:16px;border-radius:50%;background:#e5533d;box-shadow:0 0 0 3px rgba(11,13,14,.25)}
.fl-sq{width:16px;height:16px;border-radius:3px;background:#fff}
.fl-time{color:var(--muted);font-size:13px;margin:16px 0 0;font-variant-numeric:tabular-nums}
.fl-time.warn{color:#ffb35c}
.fl-meter{display:flex;align-items:center;justify-content:center;gap:3px;height:44px;margin:16px 0 0}
.fl-meter i{display:block;width:5px;height:6px;border-radius:3px;background:var(--accent)}
.fl-row3{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 8px}
.fl-row3 .fl-btn+.fl-btn{margin-top:0}
.fl-saved{background:rgba(79,174,106,.1);border:1px solid #2c5a3a;border-radius:12px;padding:16px;text-align:left;margin-bottom:8px;color:var(--soft)}
.fl-saved b{color:var(--ink)}
/* cover */
.fl-bigcv{width:min(100%,280px);margin:0 auto 8px}
.fl-bigcv canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:8px;background:var(--raised);box-shadow:0 16px 32px rgba(0,0,0,.5)}
.fl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl-tile{background:var(--raised);border:2px solid var(--line);border-radius:12px;padding:8px;color:var(--ink);cursor:pointer;font:600 13px/1.2 Inter,sans-serif;text-align:center}
.fl-tile canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:8px;background:#0b0d0e;margin-bottom:8px}
.fl-tile.on{border-color:var(--accent)}
.fl-tile.on span::after{content:" ✓";color:var(--accent)}
.fl-phrow{display:flex;align-items:center;gap:8px}
.fl-phrow .fl-btn{flex:1}
/* nav */
.fl-nav{margin-top:32px}
.fl-nav2{display:flex;justify-content:space-between;margin-top:8px}
/* done */
.fl-next{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:16px}
.fl-next li{display:flex;gap:16px;align-items:flex-start}
.fl-next b{display:block;color:var(--ink)}
.fl-next li div{color:var(--soft);font-size:15px}
.fl-next .fl-sn{margin-top:2px;background:var(--accent);color:var(--on-hot);border-color:var(--accent)}
.fl-share{display:flex;gap:8px;align-items:center}
.fl-share .fl-in{flex:1;font-size:15px}
.fl-share .fl-btn{width:auto;min-width:96px}
.fl-edit{margin-top:32px;border-top:1px solid var(--line);padding-top:8px}
.fl-edit .fl-link{padding:12px 16px 12px 0}
.hm .fl-fine .fl-link{padding:0 2px;min-height:0;font-size:13px;display:inline}
.fl-paynote{text-align:center}
@media (min-width:900px){
  .fl-lay{display:grid;grid-template-columns:minmax(0,560px) 360px;grid-template-areas:"main side";justify-content:space-between;gap:48px;padding:32px 0 0;align-items:start}
  .fl-main{grid-area:main}
  .fl-sc{grid-area:side;position:sticky;top:24px;flex-direction:column;align-items:stretch;gap:0;padding:24px}
  .fl-sc-cv{width:100%}
  .fl-sc-cv canvas{border-radius:8px;box-shadow:0 16px 32px rgba(0,0,0,.5)}
  .fl-sc-b{margin-top:24px;display:block;position:static}
  .fl-sc-b::after{display:none}
  .fl-sc-k{display:block;font:600 13px/1.4 Inter,sans-serif;color:var(--muted);margin-bottom:8px}
  .fl-sc-a{font:700 20px/1.3 Inter,sans-serif;padding:0}
  .fl-sc-v,.fl-sc-d{font-size:15px;color:var(--soft);white-space:normal}
  .fl-sc-for{display:none}
  .fl-sc-tk{display:block;margin-top:16px;padding:12px 16px;border-radius:8px;background:#f1ead8;color:#1f6b38;font:800 13px/1.3 Inter,sans-serif;letter-spacing:1.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fl-sc-tk b{font-weight:800;color:#2a2a24}
  .fl-sc-tk.empty b{color:#8b8573}
  .fl-sc-p{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--soft)}
  .fl-sc-p b{font:800 25px/1 Inter,sans-serif;color:var(--ink)}
  .fl-sc-ok{position:static;display:block;margin-top:8px;font-size:15px}
  .fl-sc .hm-assure{display:grid;gap:8px;margin-top:16px}
  .hm .fl-h{font-size:31px}
  .fl-tiles{grid-template-columns:repeat(3,1fr)}
  .fl-bigcv{width:240px}
}
.fl .fl-btn{color:var(--on-hot)}
.fl .fl-btn.ghost{color:var(--ink)}
.fl-kick{font:600 13px/1.4 Inter,sans-serif;color:var(--hot-ink);margin:0 0 8px}
/* designeye r2: on phones the message step's choice is a two-option switch and the preview is a slim banner, so Record sits in the first screen;
   on laptops the summary card is the cover preview, so the step's own big preview is hidden there */
.fl-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl-opt{min-height:56px;padding:12px 14px}
.fl-opt span{display:none}
.fl-opt.on span{display:block}
@media (max-width:899px){
  .fl-mock{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 16px}
  .fl-mock-ring{width:32px;height:32px;margin:0;flex:none;box-shadow:0 0 0 5px rgba(79,174,106,.12)}
  .fl-mock-from{font-size:18px}
  .fl-mock-sub{margin-top:2px}
}
@media (min-width:900px){.fl-bigcv{display:none}}
.fl-opt.on span{display:none}
.fl-opt{text-align:center;display:flex;align-items:center;justify-content:center}
.fl-opt.on b::after{content:""}
.fl-opt.on{background:rgba(79,174,106,.12)}