/* v2: real app screenshots (assets/screens/) inside CSS device frames.
   Each <img> is the raw screen; the bezel, rounded corners and camera are
   drawn here, so nothing is baked into the pictures. Positioning (absolute
   or relative) comes from the slot rules below and in styles.css. */
.device-crop{overflow:hidden;isolation:isolate;background:#17191c;box-sizing:border-box}
.device-crop>img{display:block;width:100%;height:auto;max-width:none;mix-blend-mode:normal;background:#f5f7fa}
.device-crop::after{content:'';position:absolute;z-index:2;pointer-events:none;left:50%;transform:translateX(-50%)}
/* Bezels are img margins: a margin percentage is measured against the
   frame's own width, while padding would use the slot around it. */
/* iPad (A16) in landscape: even bezel, camera on the long top edge. */
.device-crop.tablet{padding:0;border-radius:5.6% / 8%;box-shadow:inset 0 0 0 1.5px #3b4047,0 27px 40px -23px #263d574f}
.device-crop.tablet>img{margin:2.6%;width:94.8%;border-radius:3.1% / 4.6%}
.device-crop.tablet::after{top:1.4%;width:.62%;aspect-ratio:1;border-radius:50%;background:#2c3238;box-shadow:inset 0 0 0 1px #3d454d}
/* iPhone 17 Pro: thin bezel and the Dynamic Island over the status bar. */
.device-crop.phone{padding:0;border-radius:17% / 8.2%;box-shadow:inset 0 0 0 1.5px #44494f,0 25px 29px -16px #1c324659}
.device-crop.phone>img{margin:3.6%;width:92.8%;border-radius:14.5% / 6.7%}
.device-crop.phone::after{top:3%;width:28.5%;height:4%;border-radius:999px;background:#0c0d0f}
/* A TV or monitor showing the website calendar. */
.device-crop.screen{position:relative;padding:0;border-radius:1.6% / 2.8%;box-shadow:inset 0 0 0 1.5px #3b4047,0 30px 44px -26px #263d5766}
.device-crop.screen>img{margin:1.1%;width:97.8%;border-radius:.5% / .9%}
.device-crop.screen::after{display:none}
.hero-art{height:560px}
.hero-art .hero-ipad{width:710px;top:34px;left:0;filter:none;transform:rotate(-2deg)}
.hero-art .hero-phone{width:185px;right:7px;bottom:-17px;filter:none;transform:rotate(6deg)}
.hero-art .wall-label{left:91px;bottom:-13px}
.hero-art .phone-label{right:12px;bottom:-54px}
.remote-art .remote-phone{width:213px;left:50%;margin-left:-106px;top:94px;transform:rotate(-7deg)}
.remote-art .remote-caption{background:none;padding:0;bottom:22px}
.routines-art{width:104%;margin-left:15px;padding-top:20px;padding-bottom:16px}
.routines-art>.device-crop{position:relative;width:100%;background:#111}
.routines-art .routine-note{bottom:-25px;left:20%}
.grocery-panel,.widgets-panel{height:630px}
.grocery-panel .panel-copy,.widgets-panel .panel-copy{max-width:390px}
.panel-copy p{max-width:330px}
.grocery-panel .grocery-phone{width:230px;top:280px;left:50%;right:auto;margin-left:-109px;transform:rotate(7deg)}
.widgets-panel .widget-phones{width:445px;top:273px;right:45px;transform:rotate(-4deg)}
.brand img,.closing-icon{border-radius:24%}
@media(min-width:1001px){.hero-art{width:100%}.hero-art .wall-label,.hero-art .phone-label{z-index:3}}
@media(min-width:1500px){.hero-art{height:580px}.hero-art .hero-ipad{width:744px;top:28px}.hero-art .hero-phone{width:195px;right:0;bottom:-18px}.hero-art .wall-label{bottom:-14px}}
@media(max-width:1250px){.hero-art{height:495px}.hero-art .hero-ipad{width:622px;left:-8px;top:52px}.hero-art .hero-phone{width:165px;right:-3px;bottom:-7px}.hero-art .wall-label{bottom:-43px;left:56px}.hero-art .phone-label{bottom:-45px;right:0}.routines-art{width:106%;margin-left:3px}.widgets-panel .widget-phones{right:8px;width:407px;top:284px}}
@media(max-width:1000px){.hero-art{height:525px}.hero-art .hero-ipad{width:667px;left:25px;top:30px}.hero-art .hero-phone{width:183px;right:14px;bottom:-3px}.hero-art .wall-label{bottom:-25px;left:142px}.hero-art .phone-label{bottom:-40px;right:44px}.remote-art .remote-phone{width:184px;margin-left:-90px;top:95px}.routines-art{width:108%;margin-left:8px}.routines-art .routine-note{bottom:-13px;font-size:15px;left:12%}.grocery-panel,.widgets-panel{height:607px}.grocery-panel .grocery-phone{width:206px;top:296px;margin-left:-101px}.widgets-panel .widget-phones{width:357px;right:-2px;top:295px}}
@media(max-width:700px){.hero-art{height:calc((100vw - 17px)*.78);margin-top:42px}.hero-art .hero-ipad{width:94%;top:18px;left:0;max-width:100%}.hero-art .hero-phone{width:25%;right:4px;bottom:-7px}.hero-art .wall-label{left:45px;bottom:-16px;font-size:13px}.hero-art .phone-label{right:5px;bottom:-43px;font-size:13px}.hero-art-label{top:-4px}.hero-footer{margin-top:49px}.remote-art{height:530px}.remote-art .remote-phone{width:192px;margin-left:-92px;top:100px}.remote-art .remote-caption{bottom:13px;font-size:13px}.routines-art{width:calc(100% + 16px);margin-left:-8px;padding:18px 0 0}.routines-art .routine-note{position:relative;bottom:auto;left:auto;margin-top:23px;font-size:15px}.grocery-panel,.widgets-panel{height:608px}.grocery-panel .panel-copy,.widgets-panel .panel-copy{max-width:340px}.grocery-panel .grocery-phone{width:210px;top:291px;margin-left:-102px}.widgets-panel .widget-phones{width:354px;right:4px;top:290px}}
@media(max-width:380px){.hero-art .wall-label{font-size:12px;left:36px}.hero-art .phone-label{font-size:12px;right:0}.remote-art{height:524px}.remote-art .remote-phone{width:186px;margin-left:-90px;top:103px}.widgets-panel .widget-phones{right:-16px}.grocery-panel .grocery-phone{top:310px;width:196px;margin-left:-98px}.widgets-panel .widget-phones{top:312px}.grocery-panel,.widgets-panel{height:620px}}

/* Keep intrinsic device widths from widening the single-column hero. */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { min-width: 0; }
  .hero-art { width: min(100%, 780px); max-width: 100%; }
}
@media (max-width: 700px) {
  .nav-wrap .brand { flex-shrink: 0; }
  .nav-download { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-download img { height: 32px; width: auto; }
  .hero-art { width: 100%; max-width: 100%; margin: 42px 0 16px; }
}
@media (max-width: 380px) {
  .nav-download img { height: 30px; }
}

/* Preserve the complete routines device within the wide section. */
@media (min-width: 701px) {
  .routines-art { width: 100%; margin-left: 0; }
}
/* A transparent device cutout sits in the card's own visual environment.
   Natural height and generous side space preserve both complete screens. */
.widgets-panel {
  height: auto;
  min-height: 0;
  padding-bottom: 26px;
  background: linear-gradient(145deg, #edf3fa, #e7eff9);
}
.widgets-panel .panel-copy { max-width: none; }
.widgets-panel .widget-preview {
  display: block;
  width: calc(100% - 40px);
  max-width: 460px;
  margin: 18px auto 0;
  border-radius: 20px;
}
.widget-stage {
  display: block;
  position: relative;
  isolation: isolate;
  padding: 10px 0 6px;
}
.widget-stage::before,
.widget-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(122, 158, 194, .17);
  border-radius: 50%;
  transform: rotate(-14deg);
}
.widget-stage::before {
  inset: 11% -12% 10%;
  background: radial-gradient(ellipse, rgba(189, 212, 238, .45), transparent 69%);
}
.widget-stage::after { inset: 19% -2% 18%; }
.widget-screen-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2px;
  padding: 0 12px;
  color: #5b738d;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}
.widgets-panel .widget-phones {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  inset: auto;
  transform: rotate(-2.5deg);
  transform-origin: center;
  filter: drop-shadow(0 20px 17px rgba(40, 67, 102, .22));
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 0;
}
.widget-full-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  padding: 6px;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  text-underline-offset: 4px;
}
.widget-full-link .icon { width: 17px; height: 17px; }
.widget-preview:hover .widget-full-link,
.widget-preview:focus-visible .widget-full-link { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px) {
  .widgets-panel .widget-preview { width: calc(100% - 32px); }
  .widgets-panel .widget-phones {
    transform: rotate(-1.5deg);
    filter: drop-shadow(0 15px 13px rgba(40, 67, 102, .20));
  }
  .widget-screen-labels { gap: 12px; padding: 0 6px; font-size: 13px; }
}
@media (min-width: 701px) {
  .everyday-grid > .grocery-panel { height: auto; min-height: 607px; }
}

/* v2.1 (review fixes, Oct 18): launch-gated cards, the Alexa voice card and the
   closing iPad in portrait. Cards marked hidden stay hidden even though
   .lifestyle-card sets its own display; an all-hidden grid takes no space. */
.lifestyle-card[hidden],.widgets-panel [hidden]{display:none!important}
.lifestyle-grid:not(:has(>.lifestyle-card:not([hidden]))){display:none}
.voice-art{position:relative;height:356px;display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 78% 18%,#dfeaf6 0,transparent 46%),linear-gradient(150deg,#f3efe7,#ebeff3)}
.voice-thread{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px}
.voice-bubble{margin:0;padding:15px 18px 16px;border-radius:20px;font-size:14px;line-height:1.55;color:var(--ink);box-shadow:0 14px 30px -18px #2a3c5466}
.voice-ask{align-self:flex-end;max-width:82%;background:#fff;border-bottom-right-radius:6px;font-family:var(--serif);font-style:italic;font-size:16px}
.voice-answer{align-self:flex-start;max-width:92%;background:#24364f;color:#f4f7fb;border-bottom-left-radius:6px}
.voice-who{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-family:var(--font);font-style:normal;font-size:9px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:#7c8a99}
.voice-answer .voice-who{color:#a9c3de}
.voice-who .icon{width:13px;height:13px}
/* iPad (A16) in portrait: the same bezel turned, camera on the long side. */
.device-crop.tablet.portrait{border-radius:8% / 5.6%}
.device-crop.tablet.portrait>img{margin:3.7%;width:92.6%;border-radius:4.6% / 3.1%}
.device-crop.tablet.portrait::after{top:50%;left:1.75%;width:.9%;transform:translateY(-50%)}
.closing-art.closing-device{display:flex;align-items:center;justify-content:center;margin-left:0;padding:44px 24px;background:radial-gradient(circle at 55% 50%,#dbe7f1 0,transparent 62%)}
.closing-art.closing-device:before{display:none}
.closing-device .closing-ipad{position:relative;width:min(330px,62%);transform:rotate(3deg)}
.closing-art .closing-ipad>img{height:auto;object-fit:fill}
@media(max-width:1000px){.voice-art{height:265px;padding:22px}.voice-bubble{font-size:12px}.voice-ask{font-size:14px}.closing-device .closing-ipad{width:min(280px,70%)}}
@media(max-width:700px){.voice-art{height:auto;min-height:250px}.closing-art.closing-device{height:auto;padding:8px 24px 46px}.closing-device .closing-ipad{width:min(230px,64%)}}
/* Until real widget captures exist, the widgets card lists the widget kinds as text. */
.widgets-panel:not(:has(.widget-preview)){display:flex;flex-direction:column}
.widget-kinds{position:relative;z-index:2;margin:auto 33px 30px;padding:24px 24px 22px;border-radius:20px;background:rgba(255,255,255,.62);border:1px solid rgba(122,158,194,.18)}
.widget-kinds-title{font-size:9px;font-weight:600;letter-spacing:1.35px;text-transform:uppercase;color:#5b738d}
.widget-kinds ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.widget-kinds li{padding:8px 13px;border-radius:999px;background:#fff;border:1px solid #dce6f1;font-size:13px;color:var(--ink)}
.widget-kinds-note{margin-top:14px;font-size:12px;line-height:1.5;color:#5b6a7c}
@media(max-width:700px){.widget-kinds{margin:22px 25px 26px;padding:20px 18px}.widget-kinds li{font-size:12px;padding:7px 11px}}