/* A Day Bloks — site. Same visual system as the App Store screenshots
   (Scripts/store/compose.py): one saturated band per idea, a search-phrase
   eyebrow, a headline with one highlighted phrase, the real capture in a drawn
   device, and pieces of the UI popping out of it. Everything inside a device is
   sized in container units so it scales with the device, not the viewport. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#0b0f1e;color:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Apple SD Gothic Neo","Hiragino Sans","Noto Sans",sans-serif}
a{color:inherit}
img{max-width:100%}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* ---------- nav ---------- */
.nav{position:absolute;inset:0 0 auto 0;z-index:20;padding:20px 0}
.nav .wrap{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 2px 8px rgba(6,8,30,.35)}
.ghost{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:650;text-decoration:none;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);cursor:pointer;white-space:nowrap}
.ghost:hover{background:rgba(255,255,255,.22)}
.lang{position:relative}
.lang summary{list-style:none}
.lang summary::-webkit-details-marker{display:none}
.lang .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:8px;border-radius:18px;background:#fff;color:#12131a;
  box-shadow:0 24px 60px rgba(6,8,30,.35);display:grid;gap:2px}
.lang .menu a{padding:9px 12px;border-radius:11px;text-decoration:none;font-size:15px;font-weight:600}
.lang .menu a:hover{background:#eef1f6}
.lang .menu a[aria-current]{background:#12131a;color:#fff}
@media (max-width:560px){.nav .mac-link{display:none}}

/* ---------- bands ---------- */
.band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,var(--c0),var(--c1));--pw:clamp(250px,27vw,350px)}
.band .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,84px);align-items:center;
  padding-top:clamp(72px,9vw,124px)}
.band.hero .wrap{padding-top:clamp(124px,13vw,176px)}
.band.flip .copy{order:2}
.copy{padding-bottom:clamp(60px,8vw,116px);position:relative;z-index:2}
.sq{position:absolute;border-radius:22%;z-index:-1;pointer-events:none}
.glow{position:absolute;z-index:-1;width:min(900px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0))}

.eyebrow{display:inline-block;font-size:clamp(12px,1.05vw,14px);font-weight:750;letter-spacing:.15em;text-transform:uppercase;padding:.55em 1em .55em 1.15em;border-radius:999px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.30)}
/* Lines are broken by hand, so they never wrap; instead the type is as large as
   the column allows. --fit is the widest line in em, written by build_site.py. */
.copy{container-type:inline-size}
h1,h2{margin:.34em 0 0;font-weight:800;letter-spacing:-.032em;line-height:1.05;white-space:nowrap;
  font-size:min(var(--max,76px),calc(100cqw / var(--fit,9)))}
.band.hero h1{--max:88px}
:lang(ja) h1,:lang(ja) h2,:lang(ko) h1,:lang(ko) h2{letter-spacing:0;word-break:keep-all}
:lang(vi) h1,:lang(vi) h2{line-height:1.2}
.hl{display:inline-block;background:#fff;color:var(--c0);padding:0 .16em .05em;border-radius:.2em;transform:rotate(-1.6deg);box-shadow:0 .12em .3em rgba(0,0,0,.18)}
.copy p{margin:1.35em 0 0;max-width:33em;font-size:clamp(17px,1.45vw,20px);font-weight:450;opacity:.93;text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-size:17px;font-weight:750;text-decoration:none;
  background:#fff;color:var(--c0);box-shadow:0 14px 34px rgba(6,8,30,.28);transition:transform .2s}
.button:hover{transform:translateY(-2px)}
.button.alt{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.button svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.note{margin-top:16px;font-size:14px;font-weight:550;opacity:.82}

/* ---------- device ---------- */
.visual{position:relative;align-self:end;height:calc(var(--pw)*1.86);display:flex;justify-content:center;align-items:flex-start}
.band.rise .wrap{padding-top:0;padding-bottom:clamp(64px,8vw,116px)}
.band.rise .visual{align-self:start;align-items:flex-end}
.band.rise .copy{padding-bottom:0;padding-top:clamp(72px,9vw,124px)}
.phone{width:var(--pw);flex:none;position:relative;container-type:inline-size}
.device{position:relative;padding:.72cqw;border-radius:13.6cqw;background:linear-gradient(145deg,#5a5b66,#17181d 28%,#30313a 62%,#0c0c10);
  box-shadow:0 7cqw 13.5cqw rgba(6,8,30,.50),0 2.2cqw 4.5cqw rgba(6,8,30,.30)}
.bezel{padding:1.45cqw;border-radius:12.9cqw;background:#050506}
.hw{position:absolute;width:.62cqw;background:#23242b;border-radius:.4cqw}
.screen{position:relative;container-type:inline-size}
.screen>img{display:block;width:100%;height:auto;border-radius:11.9cqw}

.pop{position:absolute;transform:rotate(var(--r,0deg));transition:opacity .7s ease,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .band:not(.in) .pop{opacity:0;transform:translateY(5cqw) rotate(0deg) scale(.86)}
.tile{display:flex;flex-direction:column;justify-content:flex-end;text-align:left;color:#fff;border-radius:3.6cqw;padding:2.64cqw;
  box-shadow:0 4.2cqw 8.5cqw rgba(6,8,30,.45),0 1cqw 2.3cqw rgba(6,8,30,.25),inset 0 0 0 .28cqw rgba(255,255,255,.22)}
.tile .k{font-size:2.36cqw;font-weight:600;letter-spacing:.09em;opacity:.86;text-transform:uppercase;line-height:1.3}
.tile .t{font-size:4.34cqw;font-weight:700;letter-spacing:-.01em;line-height:1.08;margin-top:.12em}
.tile .d{font-size:3.1cqw;font-weight:500;opacity:.88;line-height:1.3;margin-top:.08em}
.chip{font-size:4.15cqw;font-weight:700;line-height:1.2;color:#fff;padding:.42em .8em;border-radius:999px;white-space:nowrap;
  box-shadow:0 2.8cqw 5.6cqw rgba(6,8,30,.40),0 .8cqw 1.7cqw rgba(6,8,30,.22),inset 0 0 0 .28cqw rgba(255,255,255,.24)}
.tag{display:flex;align-items:center;gap:.4em;font-size:3.77cqw;font-weight:700;line-height:1.2;color:#12131a;background:#fff;padding:.42em .85em .42em .65em;border-radius:999px;white-space:nowrap;
  box-shadow:0 2.8cqw 5.6cqw rgba(6,8,30,.45),0 .8cqw 1.7cqw rgba(6,8,30,.25)}
.tag svg{width:1.25em;height:1.25em;fill:none;stroke:#12131a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cropcard{background:#fff;padding:.95cqw;border-radius:3.6cqw;box-shadow:0 4.7cqw 9.4cqw rgba(6,8,30,.50),0 1.1cqw 2.6cqw rgba(6,8,30,.28)}
.cropcard img{display:block;width:100%;height:auto;border-radius:2.7cqw}
.play{border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3.8cqw 8.5cqw rgba(6,8,30,.55)}
.play:after{content:"";margin-left:9%;border-style:solid;border-color:transparent transparent transparent var(--c0);border-width:4.7cqw 0 4.7cqw 7.8cqw}

/* ---------- Mac band ---------- */
.band.macband .visual{height:auto;align-self:center;padding-bottom:clamp(60px,8vw,116px)}
.mac{width:min(100%,560px);container-type:inline-size}
.lid{position:relative;aspect-ratio:16/11.4;border-radius:4cqw 4cqw 0 0;padding:1.6cqw 1.6cqw 0;background:#0a0b10;box-shadow:0 8cqw 16cqw rgba(3,10,20,.55)}
.desk{position:relative;height:100%;border-radius:2.6cqw 2.6cqw 0 0;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 10%,#7fd8d2,transparent 60%),radial-gradient(120% 100% at 90% 30%,#6b8cff,transparent 55%),linear-gradient(160deg,#14323f,#1d2a5c)}
/* The panel hangs from the notch, as the real one does: narrower than the
   display, wallpaper visible on both sides. */
.panel{position:absolute;top:0;left:50%;transform:translateX(-50%);width:58%;background:#000;border-radius:0 0 4.4cqw 4.4cqw;padding:4.4cqw 3.2cqw 3cqw;text-align:left;
  box-shadow:0 5cqw 10cqw rgba(0,0,0,.45);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .7s}
.js .band:not(.in) .panel{opacity:0;transform:translateX(-50%) translateY(-8cqw) scale(.9)}
.panel .total{font-size:6cqw;font-weight:800;letter-spacing:-.03em;line-height:1}
.panel .total small{font-size:2.4cqw;font-weight:600;opacity:.6;letter-spacing:0;margin-left:.5em}
.panel .now{margin-top:1.4cqw;font-size:2.3cqw;font-weight:600;opacity:.75;display:flex;align-items:center;gap:.6em}
.panel .now i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#2fe3a5;box-shadow:0 0 0 .7cqw rgba(47,227,165,.22)}
.rows{margin-top:2.4cqw;display:grid;gap:.9cqw}
.row{display:flex;align-items:center;gap:1.5cqw;font-size:2.4cqw;font-weight:600;line-height:1.35;padding:1.1cqw 1.6cqw;border-radius:1.7cqw;background:rgba(255,255,255,.07);white-space:nowrap}
.row i{width:1.7cqw;height:1.7cqw;border-radius:.5cqw;flex:none}
.row span{margin-left:auto;padding-left:1em;opacity:.65;font-weight:550;font-variant-numeric:tabular-nums}
.keys{margin-top:2.4cqw;display:flex;gap:1.1cqw}
.keys b{font-size:2.05cqw;font-weight:650;line-height:1.3;padding:.9cqw 2cqw;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.base{height:2.4cqw;margin:0 -5%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(#c9ccd6,#8e92a0)}

/* ---------- closing + footer ---------- */
.band.final .wrap{display:block;text-align:center;padding-bottom:clamp(72px,9vw,124px)}
.band.final .copy{padding-bottom:0}
.band.final .copy p{margin-inline:auto}
.band.final .cta{justify-content:center}
footer{background:#0b0f1e;padding:34px 0 44px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
footer .brand{font-size:16px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{text-decoration:none;opacity:.78}
footer a:hover{opacity:1}
footer .langs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:18px;margin-top:6px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
footer .langs a[aria-current]{opacity:1;font-weight:700}

/* ---------- narrow ---------- */
@media (max-width:860px){
  .band{--pw:min(68vw,330px)}
  .band .wrap{grid-template-columns:1fr;text-align:center;gap:44px}
  .band.flip .copy{order:0}
  .copy{padding-bottom:0}
  .copy p{margin-inline:auto}
  .cta{justify-content:center}
  .band.rise .wrap{padding-top:0}
  .band.rise .visual{order:-1}
  .band.rise .copy{padding-top:0}
  .band.macband .visual{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pop,.panel,.button{transition:none}
  .js .band:not(.in) .pop{opacity:1;transform:rotate(var(--r,0deg))}
  .js .band:not(.in) .panel{opacity:1;transform:translateX(-50%)}
}