/* Figures and step rhythm for the guide articles.
 *
 * Written by hand, linked into every article by scripts/build-guide-layout.mjs,
 * and paired with the markup in scripts/guide-figures.mjs. The pages are drawn
 * at zoom .8 (.85 on phones), so every size here reads about a fifth smaller
 * on screen.
 *
 * Colours are tokens so a dark guide page only has to redefine this block.
 * The guide pages themselves are light only today (the canvas export hard
 * codes its own colours inline), so there is no dark block yet: a dark card
 * on a light page would be worse than neither.
 *
 * House rules that apply here: no backdrop-filter or blur, no 1px outlines
 * around cards (cards separate by fill and shadow), hairlines only between
 * rows, photos cropped with object-fit:cover at a fixed ratio, never stretched.
 */
:root{
  --gf-ink:#21192a;--gf-muted:#6a6170;--gf-card:#fff;--gf-stage:#f6f4ef;--gf-stage-yes:#eef3e0;
  --gf-yel:#f7e27c;--gf-pink:#f8b9dc;--gf-green:#bfd08f;--gf-blue:#b9caf3;--gf-peach:#f8c9a3;--gf-lilac:#ece8f3;
  --gf-shadow:0 34px 60px -38px rgba(33,25,42,.55);--gf-shadow-sm:0 18px 34px -24px rgba(33,25,42,.5);
  --gf-r:32px;--gf-r-sm:24px;
}

/* ---------------------------------------------------------- rhythm */

main.art{gap:72px !important}
main.art>section[aria-label="Steps"]{gap:36px !important}
.art article.step{padding:48px 52px 52px;gap:26px}
.art article.step>h3{max-width:28ch}
.gs-body{display:grid;gap:44px}
.gs-copy{display:flex;flex-direction:column;gap:30px;min-width:0}
.gs-paras{display:flex;flex-direction:column;gap:18px;max-width:66ch}
.art article.step .gs-paras>p{font-size:21px;line-height:1.6}
.gs-copy>.tip{align-self:flex-start;max-width:min(100%,480px);margin:6px 0 0 10px;font-size:17px}
.gs-side{display:flex;justify-content:center}
.gs-below{display:flex;flex-direction:column;gap:48px;margin-top:10px}
@media (min-width:1080px){
  /* With no phone beside it, the tip takes the space to the right of the
     paragraphs instead of leaving half the card empty. */
  .gs-body:not(.has-side) .gs-copy{display:grid;grid-template-columns:minmax(0,66ch) minmax(240px,440px);column-gap:64px;align-items:start}
  .gs-body:not(.has-side) .gs-paras{grid-row:1/span 3}
  .gs-body:not(.has-side) .gs-copy>.tip{grid-column:2;grid-row:1;margin:36px 0 0}
  .gs-body:not(.has-side) .gs-copy>.gf-easy{grid-column:2;margin:34px 0 0 4px}
  .gs-body:not(.has-side) .gs-copy>.tip+.gf-easy{margin-top:38px}
  /* The side figure gets a capped column. With auto it sized to the image's
     natural width (840px for a card) and squeezed the copy into a strip. */
  .gs-body.has-side{grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:start;gap:72px}
  .gs-body.has-side .gs-side{padding-top:6px}
}
@media (max-width:700px){
  main.art{gap:52px !important}
  .art article.step{padding:28px 20px 30px !important;gap:20px}
  .art article.step .gs-paras>p{font-size:19px;line-height:1.55}
  .gs-body{gap:32px}
  .gs-below{gap:36px;margin-top:4px}
  .gs-copy>.tip{margin-left:4px;max-width:none}
}

/* "We make this easy": what MyWrap does for the host on this step. Green
   where the pro tip is pink or blue, a fatter rounded sticker with no tape,
   tilted the other way, with the starburst W stamped on its corner so the two
   never read as the same card. */
.gf-easy{position:relative;align-self:flex-start;display:flex;flex-direction:column;gap:12px;width:100%;max-width:min(100%,480px);margin:14px 0 0 10px;padding:30px 30px 28px 32px;border-radius:36px 36px 36px 12px;background:var(--gf-green);color:var(--gf-ink);rotate:1.6deg;box-shadow:0 22px 40px -24px rgba(33,25,42,.55),inset 0 -5px 0 rgba(33,25,42,.08);box-sizing:border-box}
.ez-mark{position:absolute;right:-16px;top:-22px;width:62px;height:62px;color:var(--gf-ink);rotate:-10deg}
.ez-mark>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:24px;font-weight:700;color:var(--gf-green)}
.ez-h{font-size:24px;line-height:1.05;font-weight:700;letter-spacing:-.02em;padding-right:36px}
.gf-easy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gf-easy li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.42;font-weight:500}
.gf-easy li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:999px;background:var(--gf-ink)}
@media (max-width:700px){.gf-easy{margin:10px 0 0 2px;max-width:none;padding:26px 22px 22px 24px;rotate:1deg}.ez-mark{right:-6px;width:54px;height:54px}.ez-h{font-size:22px}}

/* --------------------------------------------------------- figures */

.gf{margin:0;display:flex;flex-direction:column;gap:16px;min-width:0}
.gf-k-side{align-items:center}
.gf-cap{font-size:15px;line-height:1.45;font-weight:500;color:var(--gf-muted);max-width:52ch}
.gf-k-side .gf-cap{max-width:300px;text-align:center}
.gf img{display:block}


/* Rows: two or three photos at one ratio. */
.gf-row{display:grid;gap:18px}
.gf-row.n2{grid-template-columns:1fr 1fr}
.gf-row.n3{grid-template-columns:repeat(3,1fr)}
.gf-row .ph{position:relative;display:block;aspect-ratio:var(--r,4/3);border-radius:var(--gf-r);overflow:hidden;background:var(--gf-stage)}
.gf-row img{width:100%;height:100%;object-fit:cover}
.ph-l{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;background:var(--gf-card);color:var(--gf-ink);font-size:14px;font-weight:700}
@media (max-width:700px){
  .gf-row{gap:10px}
  .gf-row .ph{border-radius:var(--gf-r-sm)}
  .gf-row.n3{grid-template-columns:1fr 1fr}
  .gf-row.n3 .ph:first-child{grid-column:1/-1;aspect-ratio:3/2}
}

.gf-wide{aspect-ratio:21/9;border-radius:var(--gf-r);overflow:hidden;background:var(--gf-stage)}
.gf-wide img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.gf-wide{aspect-ratio:4/3;border-radius:var(--gf-r-sm)}}

/* Polaroids on a warm stage. */
.gf-pol{display:flex;justify-content:center;align-items:center;padding:44px 24px 40px;border-radius:var(--gf-r);background:var(--gf-stage)}
.gf-pol .pl{position:relative;display:flex;flex-direction:column;gap:10px;width:min(30%,300px);margin:0 -10px;padding:12px 12px 14px;border-radius:24px;background:var(--gf-card);box-shadow:var(--gf-shadow),0 4px 14px -8px rgba(33,25,42,.25);box-sizing:border-box}
.gf-pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:15px}
.gf-pol .pl>span{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:21px;line-height:1.1;text-align:center;color:var(--gf-ink)}
.gf-pol .p0{rotate:-5deg}
.gf-pol .p1{rotate:2deg;translate:0 -16px;z-index:1}
.gf-pol .p2{rotate:6deg}
@media (max-width:700px){
  .gf-pol{padding:30px 10px 26px;border-radius:var(--gf-r-sm)}
  .gf-pol .pl{width:36%;margin:0 -7px;padding:7px 7px 9px;border-radius:16px;gap:6px}
  .gf-pol img{border-radius:10px}
  .gf-pol .pl>span{font-size:15px}
}

/* Before and after. */
.gf-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pr-s{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px 22px 36px;border-radius:var(--gf-r);background:var(--gf-stage)}
.pr-s.yes{background:var(--gf-stage-yes)}
.pr-l{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 12px;border-radius:999px;background:var(--gf-card);font-size:14px;font-weight:700;color:var(--gf-ink)}
.pr-l::before{content:"";width:9px;height:9px;border-radius:999px;background:#e0786f}
.pr-s.yes .pr-l::before{background:#5c8a2e}
@media (max-width:700px){.gf-pair{grid-template-columns:1fr;gap:12px}.pr-s{border-radius:var(--gf-r-sm);padding:20px 16px 28px}}

/* The printed sign. */
.sign{display:flex;flex-direction:column;align-items:center;gap:12px;width:270px;padding:26px 22px 22px;border-radius:26px;background:var(--gf-yel);color:var(--gf-ink);text-align:center;box-shadow:var(--gf-shadow-sm);box-sizing:border-box}
.sign.pink{background:var(--gf-pink)}.sign.green{background:var(--gf-green)}.sign.blue{background:var(--gf-blue)}
.sg-h{font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:25px;line-height:1.04;font-weight:700;letter-spacing:-.03em}
.sg-qr{display:block;width:140px;height:140px;padding:16px;border-radius:18px;background:#fff}
.sg-qr img{width:100%;height:100%}
.sg-s{font-size:14.5px;line-height:1.3;font-weight:700}
.sg-l{font-size:13px;font-weight:600;color:#5a4f63}
.sign.weak{background:var(--gf-lilac);gap:18px;padding-bottom:30px}
.sign.weak .sg-h{font-size:32px}
.sign.weak .sg-qr{padding:2px;background:transparent}
.gf-place{position:relative;aspect-ratio:16/9;border-radius:var(--gf-r);overflow:hidden;background:var(--gf-stage)}
.gf-place>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gf-place .sign{position:absolute;right:7%;bottom:9%;rotate:-3deg;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
@media (max-width:700px){
  .gf-place{aspect-ratio:4/5;border-radius:var(--gf-r-sm)}
  .gf-place .sign{left:50%;right:auto;bottom:6%;translate:-50% 0;width:230px;padding:20px 18px 18px}
  .gf-place .sg-qr{width:110px;height:110px}
}
.qrsw{display:block;width:170px;height:170px;padding:22px;border-radius:24px;background:#fff;box-shadow:var(--gf-shadow-sm)}
.qrsw img{width:100%;height:100%}
.qrsw.pale{background:#d9cdf0}
.qrsw.pale img{opacity:.22}

/* A sign up card and a question card. */
.fm{display:flex;flex-direction:column;gap:8px;width:100%;max-width:290px;padding:20px;border-radius:var(--gf-r-sm);background:var(--gf-card);box-shadow:var(--gf-shadow-sm);box-sizing:border-box}
.fm-t{font-size:17px;font-weight:700;margin-bottom:4px;color:var(--gf-ink)}
.fm-f{display:flex;align-items:center;height:44px;padding:0 16px;border-radius:14px;background:#f2f0eb;font-size:15px;color:#8a8290}
.qc{display:flex;flex-direction:column;gap:10px;width:100%;max-width:330px;padding:20px;border-radius:var(--gf-r-sm);background:var(--gf-card);box-shadow:var(--gf-shadow-sm);box-sizing:border-box;font-family:'Inter Tight',system-ui,sans-serif;color:#0d0d0d}
.qc .vote-q{font-size:19px}
.qc-o{display:flex;flex-direction:column;gap:6px}
.qc-o span{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#f1f3f7;font-size:14px;font-weight:700}

/* Hashtags and handles. */
.gf-tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tg{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;border-radius:28px;background:var(--gf-yel);color:var(--gf-ink);min-width:0}
.tg.pink{background:var(--gf-pink)}.tg.green{background:var(--gf-green)}.tg.blue{background:var(--gf-blue)}
.tg small{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.tg b{font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:26px;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}

/* Pull quote. */
.gf-quote{position:relative;margin:0;display:flex;flex-direction:column;gap:16px;max-width:780px;padding:44px 48px 38px;border-radius:var(--gf-r);background:var(--gf-pink);color:var(--gf-ink);overflow:hidden}
.gf-quote.yel{background:var(--gf-yel)}.gf-quote.green{background:var(--gf-green)}.gf-quote.blue{background:var(--gf-blue)}
.gf-quote .qm{position:absolute;right:28px;top:-18px;font-family:'Instrument Serif',Georgia,serif;font-size:180px;line-height:1;color:rgba(255,255,255,.6)}
.art .gf-quote>p{position:relative;margin:0;font-family:'Instrument Serif',Georgia,serif;font-size:40px !important;line-height:1.1 !important;color:var(--gf-ink) !important}
.gf-quote cite{position:relative;font-style:normal;font-size:15px;font-weight:700}
@media (max-width:700px){.gf-quote{padding:32px 26px 28px;border-radius:var(--gf-r-sm)}.art .gf-quote>p{font-size:30px !important}}

/* Mini stat cards. */
.gf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.st{display:flex;flex-direction:column;gap:6px;padding:22px 26px 26px;border-radius:28px;background:var(--gf-stage);color:var(--gf-ink)}
.st.yel{background:var(--gf-yel)}.st.green{background:var(--gf-green)}.st.pink{background:var(--gf-pink)}.st.soft{background:var(--gf-lilac)}.st.ink{background:var(--gf-ink);color:#fff}
.st small{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.st b{font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:50px;line-height:1;letter-spacing:-.04em;margin-top:6px}
.st span{font-size:15.5px;font-weight:600}

/* Four weeks. */
.gf-weeks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wk{display:flex;flex-direction:column;gap:8px;padding:16px 16px 20px;border-radius:28px;background:var(--gf-yel);color:var(--gf-ink)}
.wk.pink{background:var(--gf-pink)}.wk.green{background:var(--gf-green)}.wk.blue{background:var(--gf-blue)}
.wk img{order:-1;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px;margin-bottom:6px}
.wk small{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.wk b{font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.wk>span{font-size:14.5px;color:#4a4252}
@media (max-width:700px){.gf-weeks{grid-template-columns:1fr 1fr;gap:10px}.wk{border-radius:22px;padding:10px 10px 14px}.wk img{border-radius:14px}}

/* Checklist at the end of the steps. */
.gf-check{display:flex;flex-direction:column;gap:20px;padding:36px 40px 40px;border-radius:40px;background:var(--gf-ink);color:#fff}
.ck-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ck-h .disp{font-size:32px;font-weight:700;letter-spacing:-.03em}
.ck-h small{font-size:14px;font-weight:600;color:#c9c2cf}
.gf-check ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.gf-check li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px 8px 10px;border-radius:999px;background:rgba(255,255,255,.09);font-size:17px;font-weight:600;box-sizing:border-box}
.gf-check li i{flex:none;width:36px;height:36px;border-radius:999px;background:var(--gf-yel);color:var(--gf-ink);display:flex;align-items:center;justify-content:center}
.gf-check li:nth-child(2) i{background:var(--gf-pink)}.gf-check li:nth-child(3) i{background:var(--gf-green)}.gf-check li:nth-child(4) i{background:var(--gf-blue)}.gf-check li:nth-child(5) i{background:var(--gf-peach)}
.gf-check li:nth-child(7) i{background:var(--gf-pink)}
.gf-check li small{margin-left:auto;font-size:12px;font-weight:600;color:#c9c2cf;white-space:nowrap}
@media (max-width:700px){.gf-check{padding:28px 20px 24px;border-radius:32px}.ck-h .disp{font-size:26px}}

/* The pill and the asked-by label, shared by the sign up and question cards. */
.gf .pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:#f1f3f7;color:#0d0d0d;font-size:11.5px;font-weight:800;white-space:nowrap;box-sizing:border-box}
.gf .pill.dark{background:#0d0d0d;color:#fff}
.gf .pill.wide{width:100%;height:44px;font-size:13px}
.vote-k{align-self:flex-start;padding:4px 8px;border-radius:999px;background:#e9f3ff;color:#0a64d8;font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.vote-q{font-size:17px;line-height:1.12;font-weight:900;letter-spacing:-.03em}

/* ----------------------------------------------- the real screens */

/* Every product screen here is a picture of the real thing: the album from
   the dev server (/try-demo/launch and the demo album's save sheet) and the
   workspace boards from the design canvas, rendered at 3x and saved as WebP
   in /guides/figures by the render step described in
   scripts/guide-figures.mjs. Nothing is redrawn in CSS, so a screen can only
   go stale, never wrong in a new way. Images keep their width and height
   attributes and scale down with max-width, so nothing jumps and nothing is
   ever drawn larger than it was rendered. */
.gf-phone{position:relative;flex:none;width:min(100%,320px);padding:9px;border-radius:50px;background:#0d0d0d;box-shadow:0 44px 70px -40px rgba(33,25,42,.6);box-sizing:border-box}
.gf-phone img{width:100%;height:auto;border-radius:41px}
/* The stage a phone peeks out of: a pastel card that shows the top of the
   phone and cuts the rest off at its lower edge. */
.gf-peek{position:relative;display:flex;align-items:flex-start;justify-content:center;width:min(100%,420px);height:400px;padding:40px 24px 0;border-radius:var(--gf-r);background:var(--gf-stage);overflow:hidden;box-sizing:border-box}
.gf-peek .gf-phone{flex:none;width:300px;box-shadow:0 30px 60px -30px rgba(33,25,42,.45)}
.gf-peek.low{align-items:flex-end;padding:0 24px 40px}
.gf-slide{flex:none;width:min(100%,300px);filter:drop-shadow(0 30px 40px rgba(33,25,42,.22))}
.gf-slide img{width:100%;height:auto}
.gf-browser{position:relative;min-width:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--gf-shadow)}
.gf-browser .gf-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 16px;background:#ebe8e2}
.gf-browser .gf-bar i{width:11px;height:11px;border-radius:999px;background:#cfc9c0}
.gf-browser img{width:100%;height:auto}
.gf-strip{border-radius:var(--gf-r);padding:34px 30px;background:var(--gf-stage)}
.gf-strip img{width:100%;height:auto}

/* A zoom: the whole screen with a rounded mark where the detail comes from,
   and the detail itself, cut from the same 3x render, big and sharp. On the
   workspace the screen runs the full width and the detail sits over its
   lower edge on the right; beside a phone it simply sits next to it. */
.gf-zoom{display:grid;gap:28px;align-items:center}
.gf-zoom.desk{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.gf-zoom.phone{grid-template-columns:auto minmax(0,1fr);justify-items:center}
.gz-full{position:relative;min-width:0;width:100%}
.gf-zoom.phone .gz-full{width:auto}
.gz-mark{position:absolute;z-index:2;border-radius:14px;box-shadow:0 0 0 3px var(--gf-pink),0 0 0 7px rgba(248,185,220,.35);pointer-events:none}
.gf-zoom.phone .gz-mark{border-radius:10px}
.gz-detail{position:relative;z-index:3;min-width:0;width:100%;padding:16px;border-radius:28px;background:var(--gf-card);box-shadow:0 0 0 3px var(--gf-pink),var(--gf-shadow);box-sizing:border-box}
.gz-detail img{width:100%;height:auto;border-radius:16px}
.gf-zoom.desk .gz-detail{width:min(66%,760px);margin:-96px -14px 0 0}
.gf-zoom.desk .gz-detail.tall{width:min(42%,440px)}
@media (max-width:860px){
  .gf-zoom.desk .gz-detail{width:90%;margin:-40px -6px 0 0}
  .gf-zoom.desk .gz-detail.tall{width:72%}
}
@media (max-width:700px){
  .gf-zoom{gap:20px}
  .gf-zoom.phone{grid-template-columns:minmax(0,1fr)}
  .gf-zoom.phone .gf-peek{width:100%}
  .gf-peek{height:340px;padding-top:30px}
  .gf-peek.low{padding:0 24px 30px}
  .gf-peek .gf-phone{width:260px}
  .gz-detail{padding:10px;border-radius:22px}
  .gz-detail img{border-radius:12px}
  .gf-browser{border-radius:16px}
  .gf-browser .gf-bar{height:24px;padding:0 12px;gap:5px}
  .gf-browser .gf-bar i{width:8px;height:8px}
  .gf-strip{padding:18px 14px;border-radius:var(--gf-r-sm)}
}

@media (prefers-reduced-motion:reduce){.gf *{transition:none !important;animation:none !important}}