/* ============================================================
   FRAMElogic PROPOSAL, one stylesheet for every proposal
   ------------------------------------------------------------
   The same tokens as the questionnaire and the St. Paul Hub
   plan: paper, sage, green, gold and clay, 3px corners,
   Montserrat for anything structural, Inter to read, JetBrains
   Mono for the small viewfinder labels with a gold line and dot.
   Light only, because the brand is light.

   Mobile first. Most people open a proposal from a text, so
   the phone layout is the real one and the wide layout is the
   extra. 16px side gutters, nothing ever scrolls sideways.
   ============================================================ */

:root{
  --green:#627C58; --green-deep:#42553B; --ink:#26301F;
  --sage:#E9EDE4; --sage-2:#DDE4D5;
  --paper:#FAFAF6; --white:#FFFFFF;
  --text:#232921; --mute:#6C7367; --mute-dark:#C9D2C2;
  --line:rgba(38,48,31,.12); --line-2:rgba(38,48,31,.22);
  --gold:#C99A5B; --gold-deep:#A87735; --gold-ink:#8A6224;
  --gold-soft:#F5E6CE; --gold-wash:#FFFBF3; --gold-light:#E3C48F;
  --clay:#B4674A;
  --red:#C0392B; --red-soft:#FBEAE7;
  --r:3px;
  --shadow:0 24px 60px -24px rgba(38,48,31,.22);
  --shadow-gold:0 24px 60px -24px rgba(168,119,53,.35);
  --display:'Montserrat',"Helvetica Neue",Arial,sans-serif;
  --body:'Inter',"Helvetica Neue",Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%2342553B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%236C7367' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --cross-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 4.6l6.8 6.8M11.4 4.6l-6.8 6.8' fill='none' stroke='%23C0392B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --tick-grey:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.8' fill='none' stroke='%236C7367' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plus-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2' fill='none' stroke='%2326301F' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 10% -120px, rgba(245,230,206,.55), transparent 70%),
    radial-gradient(700px 520px at 100% 30%, rgba(233,237,228,.75), transparent 70%),
    var(--paper);
  background-repeat:no-repeat;
  color:var(--text);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Never name a class go, framing, framed, snap, captured, said, lit or out:
   wrapfx.js puts those on the confirmation overlay while it plays. */

/* FRAMElogic is always written exactly so, even inside a capitals label */
.fl{text-transform:none;letter-spacing:inherit}

/* ---------------- top bar ---------------- */
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,246,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.top-in{
  max-width:880px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px 12px;
}
.logo{
  font:800 21px/1 var(--display);letter-spacing:-.022em;color:var(--ink);
  text-decoration:none;display:inline-block;white-space:nowrap;flex:0 0 auto;
}
.logo span{color:var(--green)}
.logo small{font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--gold-deep);margin-left:3px}
.logo-sm{font-size:16px}
.made{
  display:inline-flex;align-items:center;gap:8px;min-width:0;
  font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);
  white-space:nowrap;
}
@media (min-width:600px){ .made{font-size:10.5px;letter-spacing:.14em} }
.made i{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.made > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* On a phone the names wrap onto a second line instead of being cut off,
   and the small .media gives them its room. */
@media (max-width:599px){
  .made{white-space:normal;text-align:right;line-height:1.35}
  .made > span{overflow:visible;text-overflow:clip}
  body:not(.plain) .top .logo small{display:none}
}
.read{height:3px;background:transparent}
.read i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .12s linear}

/* ---------------- page column ---------------- */
.wrap{
  max-width:880px;margin:0 auto;
  padding:18px 16px 40px;
  display:flex;flex-direction:column;gap:60px;
}
@media (min-width:760px){ .wrap{padding:30px 28px 64px;gap:84px} }

/* labels with the gold line and dot */
.eyebrow,.k,.hud,.hud-s{font-family:var(--mono);font-weight:500;text-transform:uppercase}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:11px;line-height:1.3;letter-spacing:.18em;color:var(--green-deep);
}
.eyebrow::before{content:"";flex:0 0 22px;height:1.5px;background:var(--gold)}
.eyebrow::after{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.eyebrow.center{justify-content:center}
.eyebrow > span{min-width:0}
/* a label that must not be missed (the ideas for their filming and posts):
   bigger and heavier, in gold ink, with a stronger line and dot */
.eyebrow.strong{font-size:12.5px;font-weight:700;letter-spacing:.11em;line-height:1.35;color:var(--gold-ink);gap:11px}
.eyebrow.strong::before{flex-basis:28px;height:3px;border-radius:2px;background:var(--gold)}
.eyebrow.strong::after{flex-basis:7px;width:7px;height:7px;background:var(--gold-deep)}
@media (min-width:760px){
  .eyebrow.strong{font-size:15px;letter-spacing:.14em;gap:14px}
  .eyebrow.strong::before{flex-basis:40px}
}
/* narrow phones (360 wide, common on Android): a little tighter, so the label keeps to one line */
@media (max-width:379px){ .eyebrow.strong{letter-spacing:.06em} }
.k{font-size:10.5px;line-height:1.25;letter-spacing:.16em;color:var(--gold-ink)}

.gold{
  background:linear-gradient(100deg,var(--green-deep) 0%,var(--gold-deep) 30%,var(--gold) 62%,var(--gold-light) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---------------- the frame (hero and the yes) ---------------- */
.frame{
  position:relative;padding:2px;border-radius:14px;
  background:linear-gradient(125deg,var(--green-deep) 0%,var(--green) 45%,var(--gold) 100%);
  box-shadow:var(--shadow);
}
.frame-in{
  position:relative;background:var(--paper);border-radius:12px;
  padding:26px 20px 22px;overflow:hidden;
}
.frame-in::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 280px at 0% 0%, var(--gold-wash), transparent 70%),
    radial-gradient(480px 300px at 100% 100%, var(--sage), transparent 70%);
}
.frame-in > *{position:relative}
.frame-in > .corner{position:absolute;width:16px;height:16px;border:2px solid var(--gold);opacity:.85;pointer-events:none}
.corner.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.corner.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.corner.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.corner.br{bottom:10px;right:10px;border-left:0;border-top:0}
@media (min-width:760px){
  .frame-in{padding:44px 44px 36px}
  .frame-in > .corner{width:22px;height:22px}
  .corner.tl{top:16px;left:16px}.corner.tr{top:16px;right:16px}
  .corner.bl{bottom:16px;left:16px}.corner.br{bottom:16px;right:16px}
}

/* ---------------- hero ---------------- */
.hud{
  display:flex;justify-content:space-between;align-items:center;gap:8px 14px;flex-wrap:wrap;
  margin-bottom:16px;font-size:10.5px;line-height:1.3;letter-spacing:.16em;color:var(--mute);
}
.rec{display:inline-flex;align-items:center;gap:8px;color:var(--green-deep)}
.rec .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--clay)}
.greet{font:700 18px/1.35 var(--display);color:var(--green-deep);letter-spacing:-.01em;margin-bottom:6px}
/* the line written only for them, right under the greeting */
.foryou{
  font:500 16px/1.55 var(--body);color:var(--text);max-width:52ch;
  margin-bottom:16px;padding-left:14px;border-left:2px solid var(--gold);
}
@media (min-width:760px){
  .hud{margin-bottom:22px}
  .foryou{font-size:17px;margin-bottom:22px}
  .hero h1{margin-top:14px}
  .lede{margin-top:16px}
  .price{margin-top:26px}
}
/* their photo beside the greeting, when the proposal has one: a circle in
   the frame's green to gold ring, with the viewfinder's Rec on it */
.hello{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.hello-words{min-width:0;display:flex;flex-direction:column;gap:5px}
.hello .greet{margin-bottom:0}
.hello .hud{display:block;margin:0}
.avatar{
  position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:50%;padding:2px;
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 40%,var(--gold) 82%,var(--gold-light) 100%);
  box-shadow:0 12px 26px -14px rgba(38,48,31,.5);
}
.avatar-in,.ig-av-in{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--white);border:2px solid var(--paper)}
.avatar-in img,.ig-av-in img,.tp-img img{position:absolute;max-width:none;height:auto;display:block}
.avatar .rec-badge{
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 5px;border-radius:3px;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--paper);
  font:500 8px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.avatar .rec-badge .dot{width:5px;height:5px}
@media (min-width:760px){
  .hello{gap:20px;margin-bottom:22px}
  .avatar{flex-basis:92px;width:92px;height:92px;padding:2.5px}
  .avatar .rec-badge{font-size:9px;padding:4px 7px 4px 6px;bottom:-8px}
}

.hero h1{
  margin-top:10px;
  font:900 clamp(34px,10vw,64px)/1.02 var(--display);letter-spacing:-.03em;color:var(--ink);
  text-wrap:balance;
}
.lede{font-size:16.5px;line-height:1.58;margin-top:12px;max-width:58ch}
@media (min-width:760px){ .lede{font-size:18.5px} }

.price{
  margin-top:20px;position:relative;overflow:hidden;
  background:var(--ink);border-radius:10px;color:var(--paper);
  padding:20px 20px 18px;
  display:grid;gap:14px;
  box-shadow:var(--shadow-gold);
}
.price::after{
  content:"";position:absolute;right:-90px;top:-120px;width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(201,154,91,.28), rgba(201,154,91,0) 68%);
}
.price > *{position:relative;z-index:1}
.price .k{color:var(--gold)}
.price-big{
  display:flex;align-items:flex-start;flex-wrap:wrap;margin-top:8px;
  font:900 clamp(64px,19vw,104px)/.92 var(--display);letter-spacing:-.04em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.price-big.long{font-size:clamp(50px,14.5vw,96px)}
.price-big .cur{font-size:.42em;line-height:1;margin:.16em .05em 0 0;color:var(--gold)}
.price-big .per{
  align-self:flex-end;margin:0 0 .42em .45em;
  font:600 16px/1 var(--body);letter-spacing:0;color:var(--mute-dark);white-space:nowrap;
}
.price-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid rgba(250,250,246,.14);padding-top:14px}
.price-line{font:700 17px/1.35 var(--display);color:var(--gold-soft);letter-spacing:-.01em;max-width:26ch}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px;border-radius:2px;
  background:rgba(201,154,91,.16);border:1px solid rgba(201,154,91,.45);color:var(--gold-soft);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
@media (min-width:640px){
  .price{grid-template-columns:auto 1fr;align-items:end;gap:10px 34px;padding:26px 28px 24px}
  .price-side{border-top:0;border-left:1px solid rgba(250,250,246,.14);padding:0 0 10px 28px}
}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 14px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;
}
.tile b{font:900 clamp(28px,8.4vw,40px)/1 var(--display);color:var(--green-deep);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile span{font-size:13.5px;line-height:1.38;color:var(--mute)}
.tile.dark{background:var(--ink);border-color:var(--ink)}
.tile.dark b{color:var(--gold)}
.tile.dark span{color:var(--mute-dark)}
.tiles1 .tile,.tiles3 .tile:last-child{grid-column:1/-1}
@media (min-width:720px){
  .tiles{gap:12px}
  .tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles3 .tile:last-child{grid-column:auto}
}

/* ---------------- sections ---------------- */
.sec{display:flex;flex-direction:column;gap:22px;min-width:0}
.sec-head{display:flex;flex-direction:column;gap:12px}
.sec-head h2,.perk h2,.cta h2{
  font:800 clamp(27px,7.6vw,42px)/1.08 var(--display);letter-spacing:-.024em;color:var(--ink);text-wrap:balance;
}
.sec-head > p:not(.eyebrow){color:var(--mute);font-size:16.5px;line-height:1.6;max-width:62ch}

/* plan at a glance */
.glance{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.g-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 17px;min-width:0;
}
.g-item > div{min-width:0}
.g-ic{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--sage);color:var(--green-deep);
  box-shadow:inset 0 0 0 1px rgba(98,124,88,.18);
}
.g-ic svg{width:21px;height:21px}
.g-item h3{font:800 17.5px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em;margin-top:5px}
.g-item .k + h3{margin-top:5px}
.g-item > div > h3:first-child{margin-top:2px}
.g-item p{font-size:15px;line-height:1.55;margin-top:6px}
@media (min-width:720px){
  .glance{grid-template-columns:1fr 1fr;gap:12px}
  .g-item{padding:20px}
}

/* flexible pricing: their own plan first, then a row of our standard plans.
   One column on a phone, side by side on a wide screen. */
.sp-row{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sp-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 17px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
.sp-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.sp-price{font-size:14px;line-height:1.2;color:var(--mute);white-space:nowrap}
.sp-price b{font:800 24px/1 var(--display);letter-spacing:-.02em;color:var(--green-deep);font-variant-numeric:tabular-nums}
.sp-card h3{font:800 17px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.sp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sp-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.sp-list li::before{content:"";flex:0 0 18px;height:18px;margin-top:1px;border-radius:50%;background:var(--sage) var(--tick) center/11px no-repeat}
.sp-list li > span{min-width:0}

.sp-yours{
  position:relative;padding:2px;border-radius:12px;
  background:linear-gradient(125deg,var(--green-deep) 0%,var(--green) 45%,var(--gold) 100%);
  box-shadow:var(--shadow-gold);
}
.sp-yours-in{
  position:relative;overflow:hidden;background:var(--ink);border-radius:10px;color:var(--paper);
  padding:22px 20px 20px;display:grid;gap:18px;
}
.sp-yours-in::after{
  content:"";position:absolute;right:-100px;top:-130px;width:320px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(201,154,91,.26), rgba(201,154,91,0) 68%);
}
.sp-yours-in > *{position:relative;z-index:1;min-width:0}
.sp-yours-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sp-tag{
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 10px;border-radius:2px;background:var(--gold);color:var(--ink);
}
.sp-yours h3{font:800 clamp(22px,6.2vw,28px)/1.15 var(--display);letter-spacing:-.02em;color:var(--paper);text-wrap:balance}
.sp-price.big{color:var(--mute-dark);font-size:15px}
.sp-price.big b{font-size:40px;font-weight:900;letter-spacing:-.03em;color:var(--gold)}
.sp-fits{font:700 16px/1.4 var(--display);color:var(--gold-soft);letter-spacing:-.01em;max-width:34ch}
.sp-yours-body{display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(250,250,246,.14);padding-top:16px}
.sp-yours .sp-list li{color:#D3DACB;font-size:15px}
.sp-yours .sp-list li::before{background:var(--gold) var(--plus-ink) center/10px no-repeat}
.sp-why{
  display:flex;flex-direction:column;gap:6px;
  padding:13px 14px;border-radius:var(--r);background:rgba(201,154,91,.12);border:1px solid rgba(201,154,91,.4);
  color:var(--gold-soft);font-size:15px;line-height:1.5;
}
.sp-why .k{color:var(--gold)}
.sp-note{margin-top:0}
@media (min-width:720px){
  .sp-row{gap:12px}
  .sp2{grid-template-columns:1fr 1fr}
  .sp3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp4{grid-template-columns:1fr 1fr}
  .sp-card{padding:20px}
  .sp-top{flex-direction:column;align-items:flex-start;gap:8px}
  .sp-yours-in{padding:30px 30px 28px}
  .sp-yours-in.sp-two{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px}
  .sp-yours-body{border-top:0;padding-top:0;border-left:1px solid rgba(250,250,246,.14);padding-left:30px}
  .sp-price.big b{font-size:48px}
}

/* built around your price point */
.compare{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;display:flex;flex-direction:column;gap:22px;
}
.cmp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.cmp-label{font:700 15.5px/1.3 var(--display);color:var(--ink)}
.cmp-amt{font-size:14px;color:var(--mute);white-space:nowrap}
.cmp-amt b{font:800 24px/1 var(--display);letter-spacing:-.02em;color:var(--mute);font-variant-numeric:tabular-nums}
.cmp-bar{height:30px;border-radius:var(--r);background:var(--sage);overflow:hidden;margin-top:10px}
.cmp-bar i{display:block;height:100%;width:var(--w);border-radius:var(--r)}
.today .cmp-bar i{background:repeating-linear-gradient(135deg,#C4CABD 0 8px,#D3D8CC 8px 16px)}
.plan .cmp-bar i{background:linear-gradient(90deg,var(--green-deep),var(--green) 55%,var(--gold))}
.plan .cmp-amt b{color:var(--green-deep)}
.plan .cmp-label{color:var(--green-deep)}
.cmp-note{font-size:14px;line-height:1.5;color:var(--mute);margin-top:9px}
.cmp-line{
  display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px;
  font:800 19px/1.3 var(--display);color:var(--green-deep);letter-spacing:-.01em;
}
.spark{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--gold-soft) var(--tick) center/14px no-repeat;box-shadow:0 0 0 4px rgba(201,154,91,.14)}
@media (min-width:720px){ .compare{padding:28px} }

/* the same comparison as a checklist (comparison.rows): two cards with the
   same rows, like the package cards on FRAMElogic.media. A check where it is
   included, a small red cross where it is not, and the plan's own extra checks in
   gold. Stacked on a phone; side by side on a wide screen, where the rows of
   both cards line up across. */
.chk{display:grid;gap:12px;min-width:0}
.chk-card{
  position:relative;min-width:0;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 8px;
}
.chk-card.plan{
  border:2px solid var(--gold);padding:17px 17px 7px;
  background:linear-gradient(180deg,var(--gold-wash) 0%,var(--white) 55%);
  box-shadow:var(--shadow-gold);
}
.chk-head{display:flex;flex-direction:column;gap:4px;padding-bottom:10px}
.chk-label{font:800 17px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.plan .chk-label{color:var(--gold-ink)}
.chk-price{font-size:14px;line-height:1.2;color:var(--mute);margin-top:4px}
.chk-price b{font:800 30px/1 var(--display);letter-spacing:-.02em;color:var(--mute);font-variant-numeric:tabular-nums}
.plan .chk-price b{color:var(--gold-ink)}
.chk-note{font-size:13.5px;line-height:1.45;color:var(--mute)}
.chk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.chk-row{
  display:flex;gap:11px;align-items:flex-start;min-width:0;
  padding:8px 0;border-top:1px solid var(--line);
  font-size:14px;line-height:1.45;color:var(--text);
}
.chk-text{min-width:0}
.chk-mark{
  flex:0 0 20px;width:20px;height:20px;margin-top:0;border-radius:50%;
  background:var(--sage) var(--tick) center/12px no-repeat;
}
.chk-row.no{color:var(--mute)}
.chk-row.no .chk-text{opacity:.6}
/* a cross is the one bit of color on today's card: a soft red circle, a red x */
.chk-row.no .chk-mark{background:var(--red-soft) var(--cross-red) center/10px no-repeat;box-shadow:inset 0 0 0 1px rgba(192,57,43,.3)}
/* everything else on today's card stays grey, its checks too */
.chk-card.today .chk-label{color:var(--mute)}
.chk-card.today .chk-row.yes{color:var(--mute)}
.chk-card.today .chk-row.yes .chk-mark{background:#EEEFEB var(--tick-grey) center/12px no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.chk-row.extra{color:var(--ink);font-weight:500}
.chk-row.extra .chk-mark{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  box-shadow:0 0 0 3px rgba(201,154,91,.2),0 4px 10px -4px rgba(168,119,53,.7);
}
.chk-row.extra .chk-mark::after{content:"";display:block;width:100%;height:100%;background:var(--tick-white) center/12px no-repeat}
/* "Everything you have now, plus", right above the plan's own extra checks */
.chk-plus{
  display:flex;align-items:center;gap:10px;padding:12px 0 9px;border-top:1px solid var(--line);
  font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);
}
.chk-plus::before{content:"";flex:0 0 18px;height:1.5px;background:var(--gold)}
.chk-plus > span{min-width:0}
.chk-gap{display:none}
.chk-line{margin-top:4px;border-top:0;padding-top:0}
@media (min-width:720px){
  .chk{grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
  .chk-card{padding:24px 24px 10px}
  .chk-head{padding-bottom:14px}
  .chk-row{padding:9px 0;font-size:14.5px}
  .chk-card.plan{padding:23px 23px 9px}
  /* today's empty slot across from the plus line: a quiet break, no line */
  .chk-gap{display:flex;border-top-color:transparent}
  .chk-gap::before{display:none}
  /* The rows line up across the two cards: each card and its list share the
     page's row lines (subgrid), so a row that wraps on one side keeps the
     other side level with it. */
  @supports (grid-template-rows:subgrid){
    .chk{row-gap:0}
    .chk-card{display:grid;grid-template-rows:subgrid;grid-row:span var(--k);row-gap:0}
    .chk-list{display:grid;grid-template-rows:subgrid;grid-row:span var(--n);row-gap:0}
  }
}

/* how a month works: a film strip. Runs down the phone, across a wide screen. */
.strip{
  position:relative;background:var(--ink);border-radius:10px;box-shadow:var(--shadow);
  padding:0 30px;
}
.strip::before,.strip::after{
  content:"";position:absolute;top:10px;bottom:10px;width:9px;
  background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(250,250,246,.24) 9px 19px);
  border-radius:2px;
}
.strip::before{left:11px}
.strip::after{right:11px}
.cells{list-style:none;margin:0;padding:12px 0;display:grid;gap:8px}
.cell{background:#323d29;border-radius:6px;padding:16px 16px 17px;display:flex;flex-direction:column;gap:7px;min-width:0}
.hud-s{font-size:10.5px;line-height:1.2;letter-spacing:.16em;color:var(--gold)}
.cell h3{font:800 21px/1.15 var(--display);color:var(--paper);letter-spacing:-.01em}
.cell p{color:#D3DACB;font-size:14.5px;line-height:1.5}
@media (min-width:760px){
  .strip{padding:16px 0}
  .strip::before,.strip::after{top:auto;bottom:auto;left:12px;right:12px;width:auto;height:8px;
    background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(250,250,246,.24) 10px 20px)}
  .strip::before{top:5px}
  .strip::after{bottom:5px}
  .cells{grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:12px 12px}
  .cell{padding:18px 15px}
  .cell h3{font-size:19px}
  .cell p{font-size:13.8px}
}

/* who does what: one column on a phone, side by side on a wide screen */
.who{display:grid;gap:12px}
.role{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.role h3{font:800 18.5px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.role-tag{align-self:flex-start;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:2px}
.role-tag.t1{background:var(--green-deep);color:var(--paper)}
.role-tag.t2{background:var(--gold);color:var(--ink)}
.role-tag.t3{background:var(--sage-2);color:var(--green-deep)}
.role ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.role li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.role li::before{content:"";flex:0 0 6px;height:6px;margin-top:9px;border-radius:50%;background:var(--gold)}
@media (min-width:720px){
  .who2{grid-template-columns:1fr 1fr}
  .who3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* one month of posts */
.cal{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 14px 16px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cal-count{font:800 15px/1.2 var(--display);color:var(--green-deep)}
.cal-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.day{
  aspect-ratio:1/1;min-width:0;border-radius:5px;
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;padding:4px 5px;
}
.day .d{font:500 10px/1 var(--mono);color:#9AA094}
.day .dots{flex:1;display:flex;align-items:center;justify-content:center;gap:3px}
.day .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,154,91,.18)}
.many .day .dot{width:7px;height:7px}
.day.on{background:var(--sage);border-color:rgba(98,124,88,.22)}
.day.on .d{color:var(--green-deep)}
.day.x{background:var(--clay-soft,#F6E4DD);border-color:rgba(180,103,74,.28)}
.day.x .d{color:var(--clay,#B4674A)}
.day .dot.x{background:var(--clay,#B4674A);box-shadow:0 0 0 3px rgba(180,103,74,.18)}
.lg.x{background:var(--clay-soft,#F6E4DD) radial-gradient(circle,var(--clay,#B4674A) 0 3.4px,transparent 4px);border-color:rgba(180,103,74,.28)}
.glance .g-item:last-child:nth-child(odd){grid-column:1/-1}
.cal-legend{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--mute)}
.cal-legend span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--paper);border:1px solid var(--line)}
.lg.on{background:var(--sage) radial-gradient(circle,var(--gold) 0 3.4px,transparent 4px);border-color:rgba(98,124,88,.22)}
.note{font-size:14px;line-height:1.5;color:var(--mute);margin-top:12px}
@media (min-width:720px){
  .cal{padding:26px 26px 22px}
  .cal-grid{gap:8px}
  .day{padding:7px 8px;border-radius:6px;aspect-ratio:3/2}
  .day .d{font-size:11px}
  .day .dot{width:14px;height:14px}
  .many .day .dot{width:10px;height:10px}
}

/* their mock feed: the same month as posts on a profile that looks like
   their own, in a phone of a real size. The profile moves inside the
   phone's screen, like on a real phone: the bar with their handle stays put
   and the grid tabs stick under it. The page's own scroll moves the feed
   while the phone is held in view (proposal.js, part 4); without the script
   the feed scrolls inside the phone. Our own icons and
   colors, never a platform's logo, and no follower or like counts. Only an
   extra post from flex filming is marked, with a clay edge and a clay dot,
   like the calendar's clay days. */
.cal-feed{display:flex;flex-direction:column;gap:30px;min-width:0}
.feed{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.phone{
  --nav-h:44px;
  position:relative;flex:none;width:min(300px,100%);aspect-ratio:300/614;overflow:hidden;
  padding:8px;border-radius:44px;
  background:linear-gradient(160deg,#3a4630 0%,var(--ink) 38%,#1a2015 100%);
  box-shadow:0 30px 60px -28px rgba(38,48,31,.6),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 3px rgba(0,0,0,.22);
}
@media (max-width:599px){ .phone{width:min(280px,calc(100% - 48px))} }
.phone-in{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:36px;overflow:hidden;color:#141414;font-family:var(--body)}
.ig-bar{flex:none;position:relative;z-index:3;padding:8px 14px 7px;background:#fff}
.ig-island{display:block;width:78px;height:21px;border-radius:12px;background:#121512;margin:0 auto 9px}
.ig-top{display:flex;align-items:center;gap:3px;min-width:0}
.ig-handle{font:700 13.5px/1.25 var(--body);letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-chev{flex:0 0 14px;width:14px;height:14px}
.ig-mock{
  margin-left:auto;flex:0 0 auto;padding:4px 6px;border-radius:2px;background:var(--gold-soft);color:var(--gold-ink);
  font:500 8px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
/* the part of the screen that scrolls */
.ig-scroll{
  position:relative;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:none;scrollbar-width:none;
}
.ig-scroll::-webkit-scrollbar{display:none}
.ig-scroll:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
.ig-head{display:flex;align-items:center;gap:12px;padding:6px 14px 8px}
.ig-av{
  flex:0 0 66px;width:66px;height:66px;border-radius:50%;padding:2.5px;
  background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 40%,var(--gold) 82%,var(--gold-light) 100%);
}
.ig-av-in{border-color:#fff;border-width:2px}
.ig-initials{display:grid;place-items:center;background:var(--sage);color:var(--green-deep);font:800 20px/1 var(--display)}
.ig-stats{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;justify-content:space-around;gap:4px;text-align:center}
.ig-stats li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.ig-stats b{font:700 15px/1.1 var(--body);color:#141414;font-variant-numeric:tabular-nums}
.ig-stats span{font-size:10.5px;line-height:1.2;color:#454545}
.ig-about{padding:0 14px 10px}
.ig-name{font:700 12.5px/1.35 var(--body);color:#141414}
.ig-bio{font-size:12.5px;line-height:1.4;color:#262626;margin-top:1px}
.ig-tabs{position:sticky;top:0;z-index:2;display:flex;background:#fff;border-top:1px solid #ececec}
.ig-tab{flex:1;display:flex;justify-content:center;padding:8px 0 7px;color:#a3a3a3;border-bottom:1.5px solid transparent}
.ig-tab.sel{color:#141414;border-bottom-color:#141414}
.ig-tab svg{width:20px;height:20px}
.ig-grid{list-style:none;margin:0;padding:0 0 2px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
/* the app's own bar at the bottom of the screen, and the home line */
.ig-nav{
  flex:none;position:relative;z-index:3;height:var(--nav-h);padding:0 12px 10px;
  display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid #efefef;
}
.ig-nav svg{width:19px;height:19px;color:#141414}
.ig-nav-av{position:relative;flex:none;width:20px;height:20px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px #141414}
.ig-nav-av img{position:absolute;max-width:none;height:auto;display:block}
.ig-nav-av.ig-initials{font-size:8px}
.ig-nav::after{content:"";position:absolute;left:50%;bottom:5px;width:84px;height:4px;margin-left:-42px;border-radius:3px;background:#141414}
/* a quiet sign that the feed scrolls: a soft fade at the bottom of the
   screen until the end, and a small note that leaves once it has scrolled */
.phone-in::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--nav-h);height:40px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75));transition:opacity .3s ease;
}
.phone.end .phone-in::after{opacity:0}
.ig-hint{
  position:absolute;left:50%;bottom:calc(var(--nav-h) + 12px);z-index:4;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;padding:7px 11px 7px 8px;border-radius:999px;
  background:rgba(20,24,16,.84);color:#fff;font:600 11px/1 var(--body);white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);pointer-events:none;transition:opacity .35s ease,transform .35s ease;
}
.ig-hint svg{width:13px;height:13px;flex:none}
.phone.seen .ig-hint{opacity:0;transform:translate(-50%,8px)}
/* the phone held in view while the page moves the feed (proposal.js, part 4).
   The script gives the track its height (the phone plus the feed's own scroll
   distance) and the phone its place in the middle of the screen, under the top
   bar, then adds .pin. Without the script the track is only a wrapper and the
   feed scrolls inside the phone as before. While pinned, the feed is moved by
   the page alone, so a swipe or a wheel over the phone scrolls the page too. */
.phone-track{align-self:stretch;min-width:0}
.phone-track > .phone{margin-left:auto;margin-right:auto}
.phone-track.pin > .phone{position:sticky}
.phone-track.pin .ig-scroll{overflow-y:hidden}
.pin-probe{position:fixed;left:0;top:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}

/* the tiles */
.tp{position:relative;isolation:isolate;aspect-ratio:1/1;overflow:hidden;min-width:0;background:#f1f1ee}
.tp-img{position:absolute;inset:0;overflow:hidden;background:#f4f4f2}
.tp-img img.fill{left:0;top:0;width:100%;height:100%;object-fit:cover}
.tp.has-cap .tp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,16,.3) 0%,rgba(20,24,16,0) 24%,rgba(20,24,16,0) 36%,rgba(20,24,16,.8) 100%)}
.tp-cap{
  position:absolute;left:7px;right:7px;bottom:6px;z-index:1;
  font:800 10.5px/1.16 var(--display);letter-spacing:-.005em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tp-kind{position:absolute;top:6px;right:6px;z-index:4;width:15px;height:15px;color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tp-dot{display:none;position:absolute;top:6px;left:6px;z-index:4;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(0,0,0,.3)}
.tp.flex .tp-dot{display:block;background:var(--clay)}
.tp.flex::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 3px var(--clay);pointer-events:none}
/* a clip with its words in a white box, like the captions on a short video */
.tp.clbox .tp-img::after{background:linear-gradient(180deg,rgba(20,24,16,.28) 0%,rgba(20,24,16,0) 30%)}
.tp.clbox .tp-cap{left:6px;right:6px;bottom:8px;display:block;text-align:center;text-shadow:none;font:700 9px/1.62 var(--body);color:#141414}
.tp.clbox .tp-cap > span{background:#fff;padding:2px 4px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* a clip in black and white, with serif words */
.tp.clmono .tp-img img{filter:grayscale(1) contrast(1.08)}
.tp.clmono .tp-img::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 40%,rgba(0,0,0,.78) 100%)}
.tp.clmono .tp-cap{font:italic 500 12px/1.1 var(--serif);letter-spacing:0;text-shadow:none}
/* designed cards with words, black and white with a serif */
.tc-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 11px}
.tc-label{font:600 7px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase}
.tc-title{font:600 12px/1.13 var(--serif);letter-spacing:-.003em}
.tc-rule{display:block;width:14px;height:1px;margin-top:2px;background:currentColor}
.tp.tclight{background:#fff;color:#111}
.tp.tclight::before,.tp.tcphoto::before{content:"";position:absolute;inset:5px;z-index:2;border:1px solid currentColor;pointer-events:none}
.tp.tclight::before{border-color:#111}
.tp.tcdark{background:#121212;color:#fff}
.tp.tcdark .tc-label{color:rgba(255,255,255,.72)}
.tp.tcphoto{color:#fff}
.tp.tcphoto::before{border-color:rgba(255,255,255,.85)}
.tp.tcphoto .tp-img::after{content:"";position:absolute;inset:0;background:rgba(12,12,12,.4)}
.tp.tcphoto .tc-in{align-items:center;text-align:center;gap:4px}
.tp.tcphoto .tc-title{font:italic 500 16px/1.04 var(--serif)}
.tp.tcphoto .tc-label{font-size:6.5px;letter-spacing:.16em}
.tc-band{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:2px;padding:5px 7px 6px;background:#fff;color:#111}
.tc-band .tc-label{order:2;font-size:6.5px}
.tc-band .tc-title{font-size:12.5px;line-height:1.05}
/* before and after: the same room, before on the left, after on the right */
.ba-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#f4f4f2}
.ba-before{left:0}
.ba-after{right:0}
.ba-half img{position:absolute;top:0;width:200%;height:100%;max-width:none;object-fit:cover;display:block}
.ba-before img{left:0;filter:grayscale(.9) brightness(.9) contrast(.9)}
.ba-after img{left:-100%}
.ba-line{position:absolute;top:0;bottom:0;left:50%;z-index:1;width:2px;margin-left:-1px;background:#fff}
.ba-line::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.ba-chip{position:absolute;bottom:6px;z-index:2;padding:3px 4px;border-radius:2px;background:rgba(255,255,255,.94);color:#111;font:600 7.5px/1 var(--body);letter-spacing:.02em}
.ba-b{left:5px}
.ba-a{right:5px}
.feed-legend{margin-top:2px;justify-content:center}
.feed .note{margin-top:0;text-align:center;max-width:42ch}
@media (max-width:599px){
  .tc-in{padding:10px 9px;gap:4px}
  .tc-title{font-size:11px}
  .tc-band .tc-title{font-size:11.5px}
  .tp.tcphoto .tc-title{font-size:14px}
}
@media (max-width:359px){ .tp-cap{font-size:9.5px;-webkit-line-clamp:4} .tc-title{font-size:10px} .tp.tcphoto .tc-title{font-size:13px} }
@media (min-width:860px){
  .cal-feed.has-feed{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
  .cal-feed.has-feed .cal{position:sticky;top:88px}
  .cal-feed.has-feed.pinning .cal{top:var(--cal-top,88px)}
  .cal-feed.has-feed .day{aspect-ratio:1/1}
}

/* what stays the same, what gets added */
.sa{display:grid;gap:12px}
.sa-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sa-box h3{font:800 19px/1.25 var(--display);color:var(--ink)}
.sa-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.sa-box li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5}
.sa-box li::before{content:"";flex:0 0 20px;height:20px;margin-top:1px;border-radius:50%;background:var(--sage) var(--tick) center/12px no-repeat}
.sa-box.add{background:var(--ink);border-color:var(--ink)}
.sa-box.add h3{color:var(--paper)}
.sa-box.add li{color:#D3DACB}
.sa-box.add li::before{background:var(--gold) var(--plus-ink) center/11px no-repeat}
@media (min-width:720px){ .sa{grid-template-columns:1fr 1fr;gap:14px} .sa-box{padding:24px} }

/* try the first month */
.try{
  background:var(--gold-wash);border:1px solid var(--gold-soft);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;gap:20px;
}
.badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:9px 13px 9px 11px;border-radius:14px;background:var(--gold-soft);color:var(--gold-ink);
  font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.badge i{width:15px;height:15px;border-radius:50%;background:var(--white) var(--tick) center/10px no-repeat;box-shadow:inset 0 0 0 1px rgba(168,119,53,.35)}
.chain{display:grid;gap:16px}
.link{display:flex;flex-direction:column;gap:5px;padding-top:13px;border-top:2px solid var(--gold-soft);min-width:0}
.link.now{border-top-color:var(--gold)}
.link b{font:800 17.5px/1.28 var(--display);color:var(--ink);letter-spacing:-.01em}
.link > span:last-child:not(.k){font-size:14.5px;line-height:1.5;color:var(--mute)}
@media (min-width:720px){
  .try{padding:26px}
  .chain{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:18px}
}

/* the discount */
.perk{
  position:relative;overflow:hidden;
  background:var(--ink);border-radius:10px;padding:24px 22px;color:var(--paper);
  display:grid;gap:12px;box-shadow:var(--shadow);
}
.perk::after{
  content:"";position:absolute;left:-80px;bottom:-140px;width:320px;height:320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(201,154,91,.22), rgba(201,154,91,0) 68%);
}
.perk > *{position:relative;z-index:1}
.perk-big{
  font:900 clamp(68px,20vw,104px)/.9 var(--display);letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.perk h2{color:var(--paper);font-size:clamp(22px,6vw,30px)}
.perk-words p{color:#D3DACB;margin-top:10px;max-width:56ch}
.perk-tag{
  display:inline-flex;margin-top:14px;padding:9px 12px;border:1.5px dashed var(--gold);border-radius:3px;
  font:500 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  background:rgba(201,154,91,.08);
}
@media (min-width:640px){ .perk{grid-template-columns:auto 1fr;align-items:center;gap:34px;padding:32px 34px} }

/* what happens next */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.steps.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 4px}
.steps li{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:20px}
.steps li::before{
  content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;
  background:linear-gradient(var(--gold),var(--sage-2));
}
.steps li:last-child::before{display:none}
.step-dot{
  flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;position:relative;z-index:1;
  background:var(--paper);border:2px solid var(--gold);
}
.steps li > div{min-width:0}
.steps b{font:800 17px/1.3 var(--display);color:var(--ink);letter-spacing:-.01em}
.steps p{font-size:15px;line-height:1.55;color:var(--mute);margin-top:3px}
@media (min-width:720px){ .steps.card{padding:28px 28px 8px} }

/* the yes */
.cta{scroll-margin-top:76px}
.cta .frame-in{padding-top:40px;padding-bottom:30px}
.ask{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ask h2{font-size:clamp(30px,8.4vw,48px);font-weight:900;letter-spacing:-.03em}
.ask-text{font-size:16.5px;line-height:1.6;color:var(--text);max-width:46ch}
.yes-btn{
  position:relative;margin-top:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:66px;min-width:min(100%,280px);padding:0 38px;border:0;border-radius:999px;
  font:800 21px/1 var(--display);letter-spacing:-.01em;color:var(--paper);
  background:linear-gradient(120deg,var(--green-deep) 0%,var(--green) 62%,#7E9671 100%);
  box-shadow:inset 0 0 0 1.5px rgba(240,220,180,.55),0 20px 40px -18px rgba(38,48,31,.6),0 0 0 6px rgba(201,154,91,.12);
  transition:transform .16s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.yes-btn svg{width:24px;height:24px;color:var(--gold-light)}
.yes-btn::after{
  content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid var(--gold);opacity:0;pointer-events:none;
}
.yes-btn:hover{box-shadow:inset 0 0 0 1.5px rgba(240,220,180,.75),0 24px 44px -18px rgba(38,48,31,.65),0 0 0 7px rgba(201,154,91,.18)}
.yes-btn:active{transform:scale(.97)}
.yes-btn[disabled]{cursor:default}
a.yes-btn{text-decoration:none}
.yes-btn > span{min-width:0}
.yes-btn.small{min-height:56px;min-width:0;max-width:100%;padding:0 26px;font-size:17px;text-align:center}
.plain-cta{margin-top:26px;margin-bottom:12px}
.quiet{font-size:14px;line-height:1.5;color:var(--mute);margin-top:4px}
.done{display:flex;flex-direction:column;gap:14px;text-align:left}
.done h2{font-size:clamp(30px,8.4vw,48px);font-weight:900;letter-spacing:-.03em}
.done .steps{margin-top:8px}
.done-steps li:first-child .step-dot{background:var(--green) var(--tick-white) center/12px no-repeat;border-color:var(--green)}
.done-steps li:first-child b{color:var(--green-deep)}
/* once they have said yes, the steps live in the done card only */
body.accepted .sec[aria-labelledby="hNext"]{display:none}

/* ---------------- footer ---------------- */
.foot{
  max-width:880px;margin:0 auto;padding:24px 16px calc(40px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.foot p{font-size:14px;line-height:1.55;color:var(--mute);max-width:60ch}
.foot a{color:var(--green-deep);text-underline-offset:3px}
@media (min-width:760px){ .foot{padding-left:28px;padding-right:28px;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px} }

/* ---------------- motion, only when it is welcome ---------------- */
@media (prefers-reduced-motion:no-preference){
  .rec .dot{animation:blink 1.6s steps(2,start) infinite}
  @keyframes blink{to{visibility:hidden}}

  /* the hero settles into focus, the corners close in like a viewfinder */
  .hero .frame-in > *:not(.corner){animation:focusIn .9s cubic-bezier(.22,1,.36,1) both}
  .hero .greet,.hero .hello{animation-delay:.05s!important}
  .hero .foryou{animation-delay:.09s!important}
  .hero h1{animation-delay:.12s!important}
  .hero .lede{animation-delay:.22s!important}
  .hero .price{animation-delay:.32s!important}
  .hero .tiles{animation-delay:.42s!important}
  @keyframes focusIn{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
  .hero .corner{animation:cornerIn .8s cubic-bezier(.22,1,.36,1) .1s both}
  .hero .corner.tl{--cx:-14px;--cy:-14px}.hero .corner.tr{--cx:14px;--cy:-14px}
  .hero .corner.bl{--cx:-14px;--cy:14px}.hero .corner.br{--cx:14px;--cy:14px}
  @keyframes cornerIn{from{opacity:0;transform:translate(var(--cx),var(--cy)) scale(1.4)}to{opacity:.85;transform:none}}

  /* the feed's scroll note bobs a little until the feed has scrolled */
  .ig-hint svg{animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2px)}}

  /* the button breathes a little, so it is easy to find */
  .yes-btn::after{animation:ring 2.8s ease-out 1.2s infinite}
  @keyframes ring{0%{opacity:.55;transform:scale(.96)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
  .yes-btn[disabled]::after{animation:none}

  /* sections rise in as they come into view (only when the script runs) */
  .rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1)}
  .rv-on .rv.in{opacity:1;transform:none}
  .rv-on .rv .cmp-bar i{width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1) .25s}
  .rv-on .rv.in .cmp-bar i{width:var(--w)}
  .rv-on .rv .day.on .dot{transform:scale(0)}
  .rv-on .rv.in .day.on .dot{animation:pop .45s cubic-bezier(.2,1.5,.4,1) calc(.25s + var(--i) * 32ms) forwards}
  @keyframes pop{to{transform:scale(1)}}
  .rv-on .rv .cell{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}
  .rv-on .rv.in .cell{opacity:1;transform:none}
  .rv-on .rv.in .cell:nth-child(2){transition-delay:.08s}
  .rv-on .rv.in .cell:nth-child(3){transition-delay:.16s}
  .rv-on .rv.in .cell:nth-child(4){transition-delay:.24s}
  .rv-on .rv.in .cell:nth-child(5){transition-delay:.32s}
  .rv-on .rv.in .cell:nth-child(6){transition-delay:.40s}
  .rv-on .rv .sp-card,.rv-on .rv .sp-yours{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1)}
  .rv-on .rv.in .sp-card,.rv-on .rv.in .sp-yours{opacity:1;transform:none}
  .rv-on .rv.in .sp-card:nth-child(2){transition-delay:.08s}
  .rv-on .rv.in .sp-card:nth-child(3){transition-delay:.16s}
  .rv-on .rv.in .sp-card:nth-child(4){transition-delay:.24s}
  .rv-on .rv.in .sp-yours{transition-delay:0s}
  /* the plan's extra checks land one by one, once the cards are in view */
  .rv-on .rv .chk-row.extra .chk-mark{transform:scale(0)}
  .rv-on .rv.in .chk-row.extra .chk-mark{animation:pop .45s cubic-bezier(.2,1.5,.4,1) calc(.45s + var(--i) * 110ms) forwards}
}

/* ---------------- print: everything shown, nothing to tap ---------------- */
@media print{
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top{position:static}
  .read,.yes-btn,.quiet{display:none}
  .rv{opacity:1!important;transform:none!important}
  .wrap{gap:36px}
  .frame,.strip,.price,.perk,.sp-yours,.phone{box-shadow:none}
  .ig-hint{display:none}
  .cal-feed.has-feed .cal{position:static}
  .phone-track{height:auto!important}
  .phone-track > .phone{position:relative;top:auto!important}
  .sec,.g-item,.cell,.sa-box,.link,.steps li,.sp-card,.sp-yours{break-inside:avoid}
  .sp-card,.sp-yours{opacity:1!important;transform:none!important}
  .chk-card.plan{box-shadow:none}
  .chk-card,.chk-row{break-inside:avoid}
  .chk-mark{transform:none!important;animation:none!important}
}

/* "Got questions? Let's chat": a quiet second button under We're in that opens the phone to call us */
.call-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;
  min-height:48px;padding:12px 22px;border-radius:999px;
  border:1.5px solid var(--green-deep);color:var(--green-deep);background:transparent;
  font:700 15.5px/1.2 var(--display);text-decoration:none;letter-spacing:.01em;
  transition:background .2s,color .2s,transform .2s;
}
.call-btn svg{width:20px;height:20px;flex:none}
.call-btn:hover,.call-btn:focus-visible{background:var(--green-deep);color:var(--paper);transform:translateY(-1px)}
.call-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ask .call-btn,.done .call-btn{display:flex;width:fit-content}


/* ============================================================
   THE STORY LAYOUT (LAYOUT-STORY.md): the hero's own buttons, your
   month in three steps, alternating feature blocks, the grid of
   small cards and the questions. Every part is optional and only
   there when the proposal file has it; a page without them looks
   exactly as before.
   ============================================================ */

/* the yes right in the hero, the call button beside it, and a quiet line under them.
   Stacked and full width on a phone, side by side on a wide screen. */
.hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
.hero-actions .yes-btn{margin-top:0}
.hero-actions .call-btn{margin:0;min-height:56px}
.hero-sure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:14px;line-height:1.4;color:var(--mute)}
.hero-sure i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--gold-soft) var(--tick) center/10px no-repeat;box-shadow:inset 0 0 0 1px rgba(168,119,53,.3)}
.hero-sure > span{min-width:0}
@media (min-width:600px){
  .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:22px}
  .hero-actions .yes-btn{min-width:200px}
  .hero-sure{justify-content:flex-start}
}
/* once they have said yes, the hero keeps only the call button */
body.accepted .hero-go,body.accepted .hero-sure{display:none}

/* your month in three steps: a gold number circle (decoration), a bold
   name and two lines. One under the other on a phone, in a row on a
   wide screen. */
.stp{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stp2{--n:2}.stp3{--n:3}.stp4{--n:4}
.stp-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 19px;display:flex;gap:16px;align-items:flex-start;min-width:0;
}
.stp-item > div{min-width:0}
.stp-n{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font:900 19px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  box-shadow:0 0 0 4px rgba(201,154,91,.16),0 8px 16px -8px rgba(168,119,53,.7);
}
.stp-item h3{font:800 19px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em;margin-top:9px}
.stp-item p{font-size:15px;line-height:1.55;color:var(--mute);margin-top:6px}
@media (min-width:720px){
  .stp{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}
  .stp-item{flex-direction:column;gap:14px;padding:24px 24px 26px}
  .stp-n{flex-basis:52px;width:52px;height:52px;font-size:22px}
  .stp-item h3{margin-top:2px;font-size:20px}
}

/* the feature blocks: words and a picture, taking turns. On a phone the
   picture always comes first. */
.ft{display:flex;flex-direction:column;gap:28px}
.ft-item{display:grid;gap:18px;align-items:center;min-width:0}
.ft-words{min-width:0}
.ft-words h3{font:800 clamp(22px,6vw,27px)/1.18 var(--display);color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
.ft-words p{font-size:16px;line-height:1.6;color:var(--mute);margin-top:10px;max-width:46ch}
.ft-pic{
  order:-1;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  padding:26px 18px;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,var(--sage) 0%,var(--paper) 100%);border:1px solid var(--line);
}
.ft-pic > .corner{position:absolute;width:14px;height:14px;border:2px solid var(--gold);opacity:.8;pointer-events:none}
.ft-pic > .corner.tl{top:9px;left:9px}.ft-pic > .corner.tr{top:9px;right:9px}
.ft-pic > .corner.bl{bottom:9px;left:9px}.ft-pic > .corner.br{bottom:9px;right:9px}
/* their feed, small and still: the top of the phone, with the rest tucked under the edge */
.ft-pic.is-feed{align-items:flex-start;max-height:400px;padding-bottom:0}
.ft-pic.is-feed .phone{width:min(236px,100%);margin-bottom:-150px}
.phone.still .ig-scroll{overflow:hidden}
.phone.still .phone-in::after{display:none}
/* their month, as a picture */
.ft-pic.is-cal .cal{width:100%;max-width:400px;padding:16px 14px 14px}
.ft-pic.is-cal .cal-grid{gap:5px}
.ft-pic.is-cal .day{aspect-ratio:1/1;padding:4px 5px}
.ft-pic.is-cal .day .d{font-size:10px}
.ft-pic.is-cal .day .dot{width:10px;height:10px}
.ft-pic.is-cal .cal-legend{margin-top:12px;font-size:13px}
/* their photo (or a picture), with its words over it like a short clip */
.ft-photo{
  position:relative;width:min(250px,100%);aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  background:var(--sage);box-shadow:var(--shadow);
}
.ft-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* one of our sample pictures (240 square) is shown at its own shape and size, never stretched to 4:5 */
.ft-photo.sample{width:min(240px,100%);aspect-ratio:1/1}
.ft-photo.has-cap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,24,16,0) 45%,rgba(20,24,16,.78) 100%);pointer-events:none}
.ft-cap{
  position:absolute;left:14px;right:14px;bottom:13px;z-index:1;display:flex;align-items:flex-end;gap:8px;
  font:800 15px/1.2 var(--display);letter-spacing:-.005em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.ft-cap svg{flex:none;width:18px;height:18px;margin-bottom:1px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.ft-cap > span{min-width:0}
/* a few of our tiles, as on a feed */
.ft-tiles{list-style:none;margin:0;padding:0;display:grid;gap:4px;width:min(340px,100%)}
.ft-tiles1{grid-template-columns:1fr;width:min(240px,100%)}
.ft-tiles2{grid-template-columns:1fr 1fr}
.ft-tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ft-tiles4{grid-template-columns:1fr 1fr}
.ft-tiles .tp{border-radius:4px}
.ft-tiles .tp-cap{font-size:12.5px;left:9px;right:9px;bottom:8px}
.ft-tiles .tp-kind{width:18px;height:18px;top:8px;right:8px}
@media (min-width:760px){
  .ft{gap:46px}
  .ft-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
  .ft-pic{order:0;padding:32px 24px;min-height:320px}
  .ft-item.flip .ft-pic{order:-1}
  .ft-pic.is-feed{max-height:420px}
  .ft-pic.is-feed .phone{width:min(250px,100%)}
  .ft-words h3{font-size:clamp(24px,3.2vw,30px)}
  .ft-words p{font-size:16.5px}
}

/* everything in the plan: small cards in a grid. Two across on a phone,
   three on a wide screen. */
.gd{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gd-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 14px 15px;display:flex;flex-direction:column;gap:11px;min-width:0;
}
.gd-item > div{min-width:0}
.gd-item .g-ic{flex-basis:38px;width:38px;height:38px}
.gd-item .g-ic svg{width:19px;height:19px}
.gd-item h3{font:800 15.5px/1.3 var(--display);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.gd-item p{font-size:13.5px;line-height:1.45;color:var(--mute);margin-top:4px}
/* an odd last card on a phone takes the whole row, so the grid ends clean */
.gd-item:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:359px){ .gd{grid-template-columns:1fr} }
@media (min-width:720px){
  .gd{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .gd-item:last-child:nth-child(odd){grid-column:auto}
  .gd-item{padding:20px 20px 19px}
  .gd-item h3{font-size:16.5px}
  .gd-item p{font-size:14.5px}
}

/* the questions: native details, a plain chevron that turns when open,
   one open at a time */
.fq{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.fq details{border-top:1px solid var(--line)}
.fq details:first-child{border-top:0}
.fq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;font:700 16.5px/1.35 var(--display);color:var(--ink);letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary::marker{content:""}
.fq summary > span{min-width:0}
.fq-chev{flex:none;width:20px;height:20px;color:var(--gold-deep);transition:transform .25s ease}
.fq details[open] .fq-chev{transform:rotate(180deg)}
.fq details[open] summary{color:var(--green-deep)}
.fq-a{padding:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--mute);max-width:62ch}
@media (min-width:720px){
  .fq{padding:0 28px}
  .fq summary{padding:19px 0;font-size:17.5px}
  .fq-a{padding-bottom:21px}
}
@media (prefers-reduced-motion:no-preference){
  .hero .hero-actions{animation-delay:.42s!important}
  .hero .hero-sure{animation-delay:.5s!important}
  .rv-on .rv .stp-item,.rv-on .rv .gd-item{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1)}
  .rv-on .rv.in .stp-item,.rv-on .rv.in .gd-item{opacity:1;transform:none}
  .rv-on .rv.in .stp-item:nth-child(2),.rv-on .rv.in .gd-item:nth-child(2){transition-delay:.08s}
  .rv-on .rv.in .stp-item:nth-child(3),.rv-on .rv.in .gd-item:nth-child(3){transition-delay:.16s}
  .rv-on .rv.in .stp-item:nth-child(4),.rv-on .rv.in .gd-item:nth-child(4){transition-delay:.24s}
  .rv-on .rv.in .gd-item:nth-child(5){transition-delay:.32s}
  .rv-on .rv.in .gd-item:nth-child(6){transition-delay:.4s}
  .rv-on .rv.in .gd-item:nth-child(n+7){transition-delay:.48s}
}
@media print{
  .hero-actions,.hero-sure{display:none}
  .stp-item,.ft-item,.gd-item,.fq details{break-inside:avoid}
  .stp-item,.gd-item{opacity:1!important;transform:none!important}
  .ft-pic.is-feed{max-height:none}
  .ft-pic.is-feed .phone{margin-bottom:0}
}

/* Standard plan cards: the heading, the price row and the list share rows across the three cards,
   so the "15+ / 30+ / 60+" lines sit at the same height even when one heading wraps. */
@media (min-width:720px){
  @supports (grid-template-rows:subgrid){
    .sp3{grid-template-rows:auto auto 1fr;row-gap:0}
    .sp3 > .sp-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  }
}
.sp-card h3{text-wrap:balance}
.sp-fits{text-wrap:balance;max-width:34ch}

/* ---------------- story layout motion ----------------
   Glass, gleam and blur in, the same materials as the captions. Only on
   pages with the story layout (proposal.js part 6 sets .story-motion),
   only when motion is welcome, and every effect ends on the finished page. */
@property --ring{syntax:'<angle>';inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  /* the gold words in the headline catch the light once the hero is in focus */
  .story-motion .hero h1 .gold{
    background-image:
      linear-gradient(100deg,transparent 38%,rgba(255,250,236,.95) 50%,transparent 62%),
      linear-gradient(100deg,var(--green-deep) 0%,var(--gold-deep) 30%,var(--gold) 62%,var(--gold-light) 95%);
    background-size:260% 100%,100% 100%;background-repeat:no-repeat;
    background-position:150% 0,0 0;
    animation:wordGleam 1.5s cubic-bezier(.4,0,.2,1) 1.05s both;
  }
  @keyframes wordGleam{from{background-position:150% 0,0 0}to{background-position:-60% 0,0 0}}

  /* the hero's yes is glass: a slow sheen crosses it now and then */
  .story-motion .hero-go{overflow:hidden;isolation:isolate}
  .story-motion .hero-go::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    background:linear-gradient(105deg,transparent 30%,rgba(255,248,230,.5) 48%,rgba(255,248,230,.12) 56%,transparent 70%) no-repeat;
    background-size:260% 100%;background-position:130% 0;
    animation:btnSheen 5.5s ease-in-out 2s infinite;
  }
  .story-motion .hero-go > *{position:relative;z-index:2}
  @keyframes btnSheen{0%,62%{background-position:130% 0}100%{background-position:-40% 0}}
  /* the ring stays on the big yes at the bottom; up here the sheen is enough */
  .story-motion .hero-go::after{animation:none}

  /* the step numbers spring in, then a thin gold ring draws around each one */
  .story-motion .stp-n{position:relative}
  .story-motion .stp-n::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
    background:conic-gradient(var(--gold) var(--ring),transparent var(--ring));
    -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
            mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
    opacity:.75;
  }
  .story-motion .stp:not(.in) .stp-n{transform:scale(.4);opacity:0}
  .story-motion .stp.in .stp-n{animation:numPop .6s cubic-bezier(.2,1.6,.4,1) calc(.18s + var(--d,0s)) both}
  .story-motion .stp.in .stp-n::after{animation:ringDraw .9s cubic-bezier(.4,0,.2,1) calc(.5s + var(--d,0s)) both}
  .story-motion .stp-item:nth-child(2){--d:.12s}
  .story-motion .stp-item:nth-child(3){--d:.24s}
  .story-motion .stp-item:nth-child(4){--d:.36s}
  @keyframes numPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
  @keyframes ringDraw{from{--ring:0deg}to{--ring:360deg}}

  /* each feature block: the words rise into focus, the picture slides in from
     its own side, the corners close in like a viewfinder, then light crosses it */
  .story-motion .ft-item:not(.in) .ft-words{opacity:0;filter:blur(6px);transform:translateY(14px)}
  .story-motion .ft-item:not(.in) .ft-pic{opacity:0;filter:blur(8px);transform:translateY(22px) scale(.98)}
  .story-motion .ft-item .ft-words{transition:opacity .7s ease .12s,filter .8s ease .12s,transform .9s cubic-bezier(.22,1,.36,1) .12s}
  .story-motion .ft-item .ft-pic{transition:opacity .7s ease,filter .8s ease,transform 1s cubic-bezier(.22,1,.36,1)}
  @media (min-width:760px){
    .story-motion .ft-item:not(.in) .ft-pic{transform:translateX(34px) scale(.98)}
    .story-motion .ft-item.flip:not(.in) .ft-pic{transform:translateX(-34px) scale(.98)}
  }
  .story-motion .ft-item.in .ft-pic > .corner{animation:cornerIn .8s cubic-bezier(.22,1,.36,1) .35s both}
  .story-motion .ft-pic > .corner.tl{--cx:-10px;--cy:-10px}.story-motion .ft-pic > .corner.tr{--cx:10px;--cy:-10px}
  .story-motion .ft-pic > .corner.bl{--cx:-10px;--cy:10px}.story-motion .ft-pic > .corner.br{--cx:10px;--cy:10px}
  .story-motion .ft-pic::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
    background:linear-gradient(110deg,transparent 32%,rgba(255,252,242,.55) 47%,rgba(255,252,242,.15) 55%,transparent 68%) no-repeat;
    background-size:280% 100%;background-position:140% 0;opacity:0;
  }
  .story-motion .ft-item.in .ft-pic::after{animation:glassSweep 1.4s cubic-bezier(.4,0,.2,1) .7s both}
  @keyframes glassSweep{0%{opacity:1;background-position:140% 0}100%{opacity:1;background-position:-50% 0}}
  /* the example posts land one after another */
  .story-motion .ft-item:not(.in) .ft-tiles > *{opacity:0;transform:scale(.92)}
  .story-motion .ft-item.in .ft-tiles > *{animation:tileIn .55s cubic-bezier(.2,1.3,.4,1) both}
  .story-motion .ft-item.in .ft-tiles > :nth-child(1){animation-delay:.3s}
  .story-motion .ft-item.in .ft-tiles > :nth-child(2){animation-delay:.38s}
  .story-motion .ft-item.in .ft-tiles > :nth-child(3){animation-delay:.46s}
  .story-motion .ft-item.in .ft-tiles > :nth-child(4){animation-delay:.54s}
  @keyframes tileIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  /* her still feed rises up into its frame */
  .story-motion .ft-item:not(.in) .ft-pic.is-feed .phone{transform:translateY(40px)}
  .story-motion .ft-pic.is-feed .phone{transition:transform 1.1s cubic-bezier(.22,1,.36,1) .2s}

  /* the grid's icons pop once their card has landed; on a laptop a card lifts under the pointer */
  .story-motion .gd:not(.in) .g-ic{transform:scale(.5);opacity:0}
  .story-motion .gd.in .g-ic{animation:numPop .55s cubic-bezier(.2,1.6,.4,1) calc(.3s + var(--d,0s)) both}
  .story-motion .gd-item:nth-child(2){--d:.07s}.story-motion .gd-item:nth-child(3){--d:.14s}
  .story-motion .gd-item:nth-child(4){--d:.21s}.story-motion .gd-item:nth-child(5){--d:.28s}
  .story-motion .gd-item:nth-child(6){--d:.35s}.story-motion .gd-item:nth-child(n+7){--d:.42s}
  @media (hover:hover){
    .story-motion .gd-item{transition:transform .25s ease,box-shadow .25s ease,opacity .55s ease}
    .story-motion .gd-item:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(38,48,31,.35)}
    .story-motion .stp-item{transition:transform .25s ease,box-shadow .25s ease,opacity .55s ease}
    .story-motion .stp-item:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(38,48,31,.35)}
  }

  /* an answer fades up as its question opens */
  .story-motion .fq details[open] .fq-a{animation:answerIn .38s cubic-bezier(.22,1,.36,1) both}
  @keyframes answerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
/* where the browser can tie motion to the scroll, her photo drifts a touch inside its frame */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .story-motion .ft-photo img{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes drift{from{transform:scale(1.07) translateY(-2.5%)}to{transform:scale(1.07) translateY(2.5%)}}
  }
}
@media print{
  .story-motion .ft-words,.story-motion .ft-pic,.story-motion .ft-tiles > *,.story-motion .stp-n,.story-motion .g-ic,.story-motion .ft-pic.is-feed .phone{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
  .story-motion .ft-pic::after,.story-motion .hero-go::before,.story-motion .stp-n::after{display:none}
}

/* a feature block's bold first sentence, and a checklist row set in bold */
.ft-words p strong{color:var(--ink);font-weight:700}
.chk-row.strong .chk-text{font-weight:700;color:var(--ink)}
.chk-card.today .chk-row.strong .chk-text{color:var(--mute)}