/* D2 · Land. Stay. Go again.
   Three photographs, one phone in each, one piece of the app lifting out of the screen.
   Tokens, fonts and the chip look come from assets/site.css (.here, --ink, --jade, --red). */

.scene{position:relative;height:240vh;background:var(--sbg,#0d0f12)}
.scene.t-dark{--sbg:#1b1410;--fg:#fff;--fg2:rgba(255,255,255,.82)}
.scene.t-light{--sbg:#c8a46e;--fg:var(--ink);--fg2:#2c2418}
.scene.t-sky{--sbg:#dde6f1;--fg:var(--ink);--fg2:#33433e}
.scene.t-dusk{--sbg:#1d1a26;--fg:#fff;--fg2:rgba(255,255,255,.84)}
.scene-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.frame{position:absolute;inset:0;overflow:hidden;background:var(--sbg)}
.stage{position:absolute;left:0;top:0;width:1400px;height:933.33px;transform-origin:0 0}
.zoom{position:absolute;inset:0;transform-origin:var(--zo,50% 50%)}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.hands{position:absolute;pointer-events:none;z-index:3}

/* the phone face that replaces the one in the photograph (mapped with matrix3d) */
.front{position:absolute;left:0;top:0;transform-origin:0 0;background:#050505;border-radius:var(--fr);z-index:2;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.front .disp{position:absolute;inset:var(--by,20px) var(--bx,20px);border-radius:calc(var(--fr) - var(--bx,20px));overflow:hidden;background:#f4f8f6}
.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.scr.b{visibility:hidden}
.isl{position:absolute;left:50%;top:2.6%;width:32%;height:3.1%;transform:translateX(-50%);background:#000;border-radius:99px;z-index:2}
.disp .isl{top:1.25%;height:3.15%}
.sbar{position:absolute;left:0;right:0;top:1.2%;height:3.15%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;z-index:2;
  font:600 26px/1 var(--b);color:#0c1d18;letter-spacing:-.01em}
.bat{width:42px;height:20px;border:2.5px solid rgba(12,29,24,.4);border-radius:6px;position:relative}
.bat::before{content:"";position:absolute;inset:2px;right:9px;background:#0c1d18;border-radius:2.5px}
.bat::after{content:"";position:absolute;right:-6px;top:5px;width:3px;height:6px;background:rgba(12,29,24,.4);border-radius:0 2px 2px 0}
.glare{position:absolute;inset:0;pointer-events:none;z-index:3}
.ripple{position:absolute;left:50%;top:86.4%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:rgba(255,255,255,.55);transform:scale(0);opacity:0;z-index:3}

/* scene light on the glass: warm dawn from the window, pink dusk from the sea */
#go .glare{background:linear-gradient(200deg,rgba(236,150,190,.20),rgba(120,90,150,.18));mix-blend-mode:multiply}
#go .disp::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 52%,rgba(255,226,240,.16) 60%,rgba(255,255,255,0) 72%);mix-blend-mode:screen}

/* the plane window: a real hand holding a real iPhone, front-on. The app screen replaces the
   display (corners measured on the full-res photo); the thumb and the finger at the lower
   right are the photo's own pixels, laid back over the screen through a traced mask. The photo
   is portrait, so the stage continues it with its own background, blurred (img/land_ext.webp). */
#land .bgx{position:absolute;inset:0;width:100%;height:100%}
/* the photo and the phone sit a little back (scene zoom .92 on desktop, from the bottom edge), so the photo also fades
   in at its top edge, onto its own blurred extension (which stays put, outside .zoom) */
#land .lphoto{position:absolute;left:151.852px;top:0;width:622.222px;height:933.33px;user-select:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 46px,#000 576px,transparent 622.222px),linear-gradient(180deg,transparent 0,#000 90px);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 46px,#000 576px,transparent 622.222px) intersect,linear-gradient(180deg,transparent 0,#000 90px)}
/* the thumb: mask re-traced on the photo's own skin edge (the tip is whole now), feathered like the photo's defocus */
#land .lhand{z-index:4;-webkit-mask:url(img/land_hand.webp) 0 0/100% 100% no-repeat;-webkit-mask-composite:source-over;mask:url(img/land_hand.webp) 0 0/100% 100% no-repeat}
#land .lpalm{position:absolute;left:329.321px;top:651.235px;width:75.617px;height:166.667px;z-index:4;pointer-events:none;user-select:none}
#land .lao{position:absolute;left:151.852px;top:0;width:622.222px;height:933.33px;z-index:3;pointer-events:none;background:rgba(18,12,10,.5);
  -webkit-mask:url(img/land_ao.webp) 0 0/100% 100% no-repeat;mask:url(img/land_ao.webp) 0 0/100% 100% no-repeat}
.front.flat{background:transparent;box-shadow:none}
#land .glare{background:linear-gradient(180deg,rgba(226,233,244,.30),rgba(206,212,222,.34));mix-blend-mode:multiply}
/* the screen sits in the cabin's daylight: a touch dimmer and flatter than a pure white UI, like the thumb over it */
#land .disp .scr{filter:brightness(.92) contrast(.9) saturate(.92)}
#land .disp::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(205deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 30%);mix-blend-mode:screen}

/* the café phone, lying flat on the table in the sun.
   Light comes from the lower right: the cup's own long shadow runs to the upper left, so the
   phone's shadow does too, only where the table is in the sun: a short one (the phone lies flat), so the lit table runs
   up to the phone and the window shadow's edge carries on across it */
.cphone{position:absolute;left:1098px;top:200px;width:208px;height:431px;border-radius:31px;z-index:2;
  /* no 3D tilt: rotateX under the masked leaf shade made Chrome paint the screen soft (measured 27 Oct) */
  background:#0b0b0b;
  box-shadow:0 0 0 1.1px #a19d94,0 0 0 2px #4f4b44,
    1px 1.6px 0 1.6px #bdb8ac,                   /* the lit metal side, toward the sun */
    0 0 0 3.4px rgba(30,18,4,.55),0 1px 3px 3px rgba(30,18,4,.40),0 0 14px 4px rgba(40,24,6,.22)}
.cphone .disp{position:absolute;inset:6px;border-radius:25px;overflow:hidden;background:#f4f8f6}
.cphone .sbar{font-size:9px;padding:0 9% 0 11%}
.cphone .bat{width:15px;height:7.5px;border-width:1px;border-radius:2.5px}
.cphone .bat::before{inset:1px;right:3.5px;border-radius:1px}
.cphone .bat::after{right:-3px;top:1.75px;width:1.5px;height:3px}
/* the leaf shade on the phone: a clean two-tone map traced from the full-res photo (grain and
   wood texture removed), applied as the photo's own warm shadow color; the _soft map is that map blurred
   (12px on the 972px map) so its edge is as soft as the same edge on the table around the phone */
.cphone .shade{position:absolute;inset:0;border-radius:inherit;z-index:5;pointer-events:none;mix-blend-mode:multiply;
  background:rgb(92,58,22);opacity:.46;
  -webkit-mask:url(img/cafe_sh_soft.webp) -98px -100px/400px 660px no-repeat;mask:url(img/cafe_sh_soft.webp) -98px -100px/400px 660px no-repeat}
.cphone .glare{z-index:6;border-radius:inherit;background:linear-gradient(128deg,rgba(255,250,236,0) 30%,rgba(255,246,222,.20) 48%,rgba(255,250,236,0) 66%);mix-blend-mode:screen}
.castwrap{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask:url(img/cafe_lit.webp) 1000px 100px/400px 660px no-repeat;mask:url(img/cafe_lit.webp) 1000px 100px/400px 660px no-repeat}
.cast{position:absolute;width:208px;height:431px;border-radius:31px;background:rgba(52,30,6,.5);left:1088px;top:194px;filter:blur(2.5px)}

/* readability veils, grown from the photo's own dark and light */
.veil{position:absolute;inset:0;pointer-events:none;z-index:4}
.fade{position:absolute;left:0;right:0;bottom:0;top:100%;z-index:3;pointer-events:none;display:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--fadec) 170px,var(--fadec) 100%)}
#land{--fadec:#d9e1ea}#stay{--fadec:#dcc394}#go{--fadec:#121015}
#land .veil{background:linear-gradient(270deg,rgba(226,234,245,.80) 0%,rgba(226,234,245,.55) 30%,rgba(226,234,245,.12) 44%,rgba(226,234,245,0) 52%)}
#stay .veil{background:linear-gradient(90deg,rgba(244,226,190,.62) 0%,rgba(244,226,190,.34) 34%,rgba(244,226,190,0) 52%)}
#go .veil{background:linear-gradient(90deg,rgba(20,14,30,.62) 0%,rgba(20,14,30,.32) 30%,rgba(20,14,30,0) 46%)}

/* copy */
.copy{position:absolute;z-index:6;top:50%;transform:translateY(-50%);width:min(500px,34vw);color:var(--fg)}
#land .copy{right:clamp(24px,4.6vw,96px);width:min(470px,31vw)}
#stay .copy,#go .copy{left:clamp(24px,6vw,110px);width:min(520px,36vw)}
#go .copy{left:clamp(24px,5vw,90px)} /* a little more room between the words and the phone */
.verb{font-family:var(--h);font-weight:700;letter-spacing:-.04em;line-height:.9;font-size:clamp(64px,8.4vw,136px);margin-bottom:22px}
.copy h2{font-size:clamp(30px,3.1vw,48px);line-height:1.04;margin-bottom:18px}
.copy .sub{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--fg2);max-width:30em}
.t-dark .copy,.t-dusk .copy{text-shadow:0 1px 18px rgba(0,0,0,.25)}

/* the one piece of the app that comes out of the screen (built like the app: white, radius 99/18, flag circle) */
.chip{position:absolute;left:0;top:0;z-index:8;transform-origin:50% 50%;will-change:transform;opacity:0;color:var(--ink);
  box-shadow:0 30px 60px -22px rgba(8,20,16,.55),0 10px 22px -12px rgba(8,20,16,.35)}
.chip.here{font-size:23px;gap:12px;padding:8px 23px 8px 8px;letter-spacing:-.01em}
.chip.here img{width:40px;height:40px}
.chip.says{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:22px;padding:20px 24px 20px 20px;width:430px}
.chip .tick{flex:none;width:34px;height:34px;border-radius:50%;background:var(--jade);display:grid;place-items:center}
.chip .tick svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chip.says b{display:block;font-family:var(--h);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin:4px 0 6px}
.chip.says span{display:block;font-size:16px;line-height:1.4;color:var(--ink2)}
.chip.says em{font-style:normal;color:var(--jade);font-weight:600}
.chip.verdict{display:flex;align-items:center;gap:16px;width:440px;padding:20px 22px;border-radius:22px;background:#fdeceb;
  box-shadow:inset 0 0 0 1.5px rgba(223,74,60,.45),0 30px 60px -22px rgba(60,12,8,.55),0 10px 22px -12px rgba(60,12,8,.35)}
.chip.verdict.fit{background:#fff;box-shadow:0 30px 60px -22px rgba(8,20,16,.55),0 10px 22px -12px rgba(8,20,16,.35)}
.chip.verdict>img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.chip .vt{flex:1;min-width:0}
.chip .vt b{display:block;font-family:var(--h);font-weight:700;font-size:25px;letter-spacing:-.015em;line-height:1.1}
.chip .vt span{display:block;font-size:15.5px;color:var(--ink2);margin-top:3px;white-space:nowrap}
.chip .vr{text-align:right;flex:none}
.chip .vr b{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:19px;white-space:nowrap}
.chip .vr b.tight{color:#b07d16} /* the app's "fits, 0 days to spare" ink (plan_verdict.dart tightInk) */
.chip .vr b svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.chip .vr span{display:block;font-size:15px;margin-top:3px;white-space:nowrap}
.chip .va .vr span,.chip .vr.va span{color:var(--red)}
.chip .vr.vb span{color:var(--ink2)}
.chip.verdict:not(.fit) .vb,.chip.verdict.fit .va{display:none}

/* stacked (phone above the words): scenes.js sets html.stk when the width is 760 or less AND the phone still fits
   above the words at a scale where the photo covers the width; otherwise side by side, narrowed below 760 (html.nar) */
html.stk .scene{height:230vh}
html.stk .fade{display:block}
html.stk .copy,html.stk #land .copy,html.stk #stay .copy,html.stk #go .copy{left:16px;right:16px;width:auto;top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:none}
html.stk .verb{font-size:52px;margin-bottom:10px}
html.stk .copy h2{font-size:27px;margin-bottom:10px}
html.stk .copy .sub{font-size:15px;line-height:1.45}
html.stk #land .veil{background:linear-gradient(0deg,rgba(217,225,234,.94) 0%,rgba(217,225,234,.62) 30%,rgba(217,225,234,0) 44%)}
html.stk #go .veil{background:linear-gradient(0deg,rgba(18,16,21,.9) 0%,rgba(18,16,21,.55) 30%,rgba(18,16,21,0) 44%)}
html.stk #stay .veil{background:linear-gradient(0deg,rgba(220,195,148,.92) 0%,rgba(220,195,148,.6) 30%,rgba(220,195,148,0) 44%)}
html.stk .chip.here{font-size:17px;gap:9px;padding:6px 16px 6px 6px}
html.stk .chip.here img{width:32px;height:32px}
html.stk .chip.says{width:300px;padding:14px 16px 14px 14px;gap:12px;border-radius:18px}
html.stk .chip .tick{width:26px;height:26px}html.stk .chip .tick svg{width:15px;height:15px}
html.stk .chip.says b{font-size:17px;margin:2px 0 4px}
html.stk .chip.says span{font-size:13.5px}
html.stk .chip.verdict{width:320px;padding:14px 16px;gap:12px;border-radius:18px}
html.stk .chip.verdict>img{width:40px;height:40px}
html.stk .chip .vt b{font-size:19px}html.stk .chip .vt span{font-size:13px}
html.stk .chip .vr b{font-size:15px}html.stk .chip .vr span{font-size:12.5px}
/* side by side on a narrow, short screen (a small window, a phone held sideways): a wider column, smaller type */
html.nar .copy,html.nar #land .copy,html.nar #stay .copy,html.nar #go .copy{width:min(46vw,440px)}
html.nar #land .copy{right:clamp(20px,4vw,72px)}
html.nar #stay .copy,html.nar #go .copy{left:clamp(20px,4vw,72px)}
html.nar .verb{font-size:clamp(44px,8vw,60px);margin-bottom:10px}
html.nar .copy h2{font-size:clamp(21px,3.7vw,27px);margin-bottom:10px}
html.nar .copy .sub{font-size:14.5px;line-height:1.45}
html.nar .chip.here{font-size:17px;gap:9px;padding:6px 16px 6px 6px}
html.nar .chip.here img{width:32px;height:32px}
html.nar .chip.says{width:300px;padding:14px 16px 14px 14px;gap:12px;border-radius:18px}
html.nar .chip .tick{width:26px;height:26px}html.nar .chip .tick svg{width:15px;height:15px}
html.nar .chip.says b{font-size:17px;margin:2px 0 4px}
html.nar .chip.says span{font-size:13.5px}
html.nar .chip.verdict{width:320px;padding:14px 16px;gap:12px;border-radius:18px}
html.nar .chip.verdict>img{width:40px;height:40px}
html.nar .chip .vt b{font-size:19px}html.nar .chip .vt span{font-size:13px}
html.nar .chip .vr b{font-size:15px}html.nar .chip .vr span{font-size:12.5px}

/* Your own line: drawn like the other lines (flag, count, bar) and fully still; the tag says it is one you set */
.rule.custom .own{display:inline-block;vertical-align:4px;margin-left:4px;white-space:nowrap;font:700 12.5px/1 var(--b);font-style:normal;letter-spacing:.01em;color:#06704f;background:#e1f4ec;padding:5px 9px;border-radius:99px}