/* Palette and stepped corners follow ios/PetaUI PetaPanelStyle / PetaPanelGeometry. */
:root{color-scheme:dark;--bg:#0b1028;--surface:#101c2e;--deep:#070b1b;--text:#e0f5f5;--muted:#91b0bf;--mint:#85f0d1;--cyan:#87b6e2;--pink:#da97c3;--gold:#f5dca7;--line:#4f9c9d6b;--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;--gutter:32px;--c:6px;--h:3px}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iOS Safari follows the Dynamic Type size. */
@supports (font:-apple-system-body) and (-webkit-touch-callout:none){html{font:-apple-system-body}}
/* The column layout keeps the footer at the bottom of short pages. */
body{display:flex;flex-direction:column;margin:0;min-height:100vh;color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.8;overflow-wrap:anywhere;line-break:strict;background:radial-gradient(ellipse 60% 720px at 85% 0,#87b6e21a,transparent 70%) no-repeat,radial-gradient(circle at 24px 30px,#85f0d180 1px,transparent 1.6px) 0 0/280px 280px,radial-gradient(circle at 150px 96px,#f5dca766 1px,transparent 1.6px) 0 0/340px 340px,radial-gradient(circle at 250px 210px,#87b6e266 1px,transparent 1.6px) 0 0/410px 410px,radial-gradient(circle at 90px 300px,#da97c359 1px,transparent 1.6px) 0 0/470px 470px,var(--bg)}
main{flex:1 0 auto;container:page/inline-size}
a{color:inherit;text-underline-offset:.3em;text-decoration-thickness:1px}a:hover{color:var(--mint)}
img,video,svg{display:block;max-width:100%}img,video{height:auto}
p,li,dd{text-wrap:pretty}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
.visually-hidden,.contact-trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.shell{width:min(1120px,100% - 2 * var(--gutter));margin-inline:auto}
.skip{position:absolute;z-index:10;top:12px;left:12px;transform:translateY(-200%);padding:10px 18px;background:var(--surface);border:1px solid var(--mint);color:var(--mint);font-weight:700}.skip:focus{transform:none}

h1,h2,h3{margin:0;font-weight:700;line-height:1.45;letter-spacing:.02em;text-wrap:balance}
/* Short lines break between Japanese phrases where the browser supports it. */
h1,h2,h3,summary{word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,summary,.lead,.section-intro,.download p,.button{word-break:auto-phrase}
h2{font-size:clamp(1.75rem,1.35rem + 1.4vw,2.5rem)}
h3{font-size:1.125rem;line-height:1.55}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--mint);font:600 .75rem/1.6 var(--mono);letter-spacing:.16em}
.eyebrow::before{content:"";flex:none;width:8px;height:8px;background:currentColor;box-shadow:0 0 8px currentColor}
.icon{flex:none;width:20px;height:20px;fill:currentColor;shape-rendering:crispEdges}

/* Panel: an accent layer and an inset fill layer share the stepped outline, like PetaPanelGeometry.borderRectangles. */
:where(.panel,.button,.clip-toggle,.legal-navigation a){--accent:var(--line);--fill:var(--surface);position:relative;isolation:isolate}
:is(.panel,.button,.clip-toggle,.legal-navigation a)::before,:is(.panel,.button,.clip-toggle,.legal-navigation a)::after{content:"";position:absolute;z-index:-1;pointer-events:none}
:is(.panel,.button,.clip-toggle,.legal-navigation a)::before{inset:0;background:var(--accent)}
:is(.panel,.button,.clip-toggle,.legal-navigation a)::after{inset:1px;background:var(--fill)}
:is(.panel,.button,.clip-toggle,.legal-navigation a)::before,:is(.panel,.button,.clip-toggle,.legal-navigation a)::after,.cut,.steps li::before{clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--h),calc(100% - var(--h)) var(--h),calc(100% - var(--h)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--h)) calc(100% - var(--c)),calc(100% - var(--h)) calc(100% - var(--h)),calc(100% - var(--c)) calc(100% - var(--h)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--h)),var(--h) calc(100% - var(--h)),var(--h) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--h) var(--c),var(--h) var(--h),var(--c) var(--h))}

/* Matches PetaButtonStyle: surface + 6% tint, 80% border, monospaced semibold; secondary matches PetaCloseButton. */
.button{--accent:#85f0d1cc;--fill:#172938;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.7em 1.5em;color:var(--mint);font:600 1rem/1.4 var(--mono);text-align:center;text-decoration:none;filter:drop-shadow(0 0 4px #85f0d147)}
.button:hover{--fill:#27464f;color:var(--mint)}
.button.secondary{--accent:#87b6e273;--fill:var(--surface);color:var(--cyan);filter:none}
.button.secondary:hover{--fill:#1d2f45;color:var(--text)}
.button.small{min-height:44px;padding:.45em 1.1em;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Keep Apple's artwork unchanged, with clear space of one-quarter its 52px height. */
.app-store-badge{display:inline-flex;flex:none;align-self:center;padding:13px;text-decoration:none}
.app-store-badge img{width:auto;height:52px}

/* Header and footer are shared by every page, including the legal documents. */
.header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-block:14px;border-bottom:1px solid var(--line)}
/* The negative margin lines the wordmark itself, not the image padding, up with the text column. */
.brand{display:inline-flex;flex:none;margin:0 auto 0 -23px}.brand img{width:152px}
.header-nav{display:flex;flex-wrap:wrap}
.header-nav a,.header>a:not(.brand,.button){display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-size:.875rem;font-weight:600;text-decoration:none}
.header>a:not(.brand,.button):last-child{margin-right:-12px}
.header>a[aria-current="page"]{color:var(--mint)}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;padding-block:32px 48px;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem}
.footer p{margin:0}
.footer .apple-trademarks{flex-basis:100%}
.footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
.footer nav a{display:inline-flex;align-items:center;min-height:40px}

/* Top page. */
.hero{padding-block:72px 96px;overflow-x:clip}
.hero-grid{display:grid;gap:56px;align-items:center}
.hero h1{margin-bottom:24px;font-size:clamp(2.25rem,1.3rem + 3vw,3.75rem);line-height:1.35}
.hero h1 span{color:var(--mint);text-shadow:0 0 18px #85f0d159}
.lead{max-width:30em;margin:0 0 32px;color:var(--muted);font-size:1.125rem}
.meta{display:flex;flex-wrap:wrap;gap:4px 24px;margin:24px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.8125rem}
.meta li{display:inline-flex;align-items:center;gap:8px}.meta li::before{content:"";flex:none;width:6px;height:6px;background:var(--cyan)}
.hero-art{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;max-width:448px}
/* The dotted orbit and sparkle repeat the globe screen and the logo. */
.hero-art::before{content:"";position:absolute;z-index:-1;inset:14% -10% 10%;border:2px dotted #da97c366;border-radius:50%;transform:rotate(-16deg)}
.hero-art::after{content:"";position:absolute;top:-4px;right:2%;width:4px;height:4px;background:var(--mint);box-shadow:0 -4px var(--mint),0 4px var(--mint),-4px 0 var(--mint),4px 0 var(--mint),0 -8px #85f0d180,0 8px #85f0d180,-8px 0 #85f0d180,8px 0 #85f0d180,-28px 20px var(--gold),-44px 4px var(--pink),-20px 40px var(--cyan)}
.hero-art figure:nth-child(2){margin-top:72px}
.screen{margin:0}
.screen figcaption{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted);font:600 .75rem/1.6 var(--mono);letter-spacing:.08em}
.screen figcaption::before{content:"";flex:none;width:6px;height:6px;background:var(--pink)}
.phone{--c:12px;--h:6px;--accent:#85f0d166;--fill:var(--deep);padding:6px;filter:drop-shadow(0 24px 40px #0009)}
.phone>:is(img,video){--c:8px;--h:4px;width:100%;background:var(--deep)}
/* The stepped clip hides the video's own focus ring, so the frame shows it. */
.phone:has(>:focus-visible){outline:3px solid var(--gold);outline-offset:4px}

.section{padding-block:96px}
.band{border-block:1px solid var(--line);background:#0d1531b3}
.section-head{max-width:40rem;margin-bottom:48px}
.section-head h2{margin-bottom:16px}
.section-intro{margin:0;color:var(--muted)}
.section-intro a{color:var(--mint)}

.features{container:features/inline-size}
.feature-list{display:grid;gap:40px;margin:0;padding:0;list-style:none}
/* Narrow cards put the label row across the top and the clip beside the text; wide cards stack everything. */
.feature{--tone:var(--mint);--tone-line:#85f0d166;display:grid;grid-template:"label label" auto "phone title" auto "phone text" 1fr/minmax(0,2fr) minmax(0,3fr);column-gap:20px;align-items:start}
.feature.pink{--tone:var(--pink);--tone-line:#da97c366}.feature.gold{--tone:var(--gold);--tone-line:#f5dca766}.feature.cyan{--tone:var(--cyan);--tone-line:#87b6e266}
.feature-body{display:contents}
.feature .phone{--accent:var(--tone-line);grid-area:phone;width:100%;max-width:256px;filter:drop-shadow(0 16px 28px #0008)}
.feature-label{grid-area:label;display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:12px;color:var(--tone);font:600 .75rem/1.5 var(--mono);letter-spacing:.12em}
.feature h3{grid-area:title;margin-bottom:8px}
.feature p{grid-area:text;margin:0;color:var(--muted);font-size:.9375rem}
.clip-toggle{--accent:var(--tone-line);display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:auto;padding:0;border:0;background:none;color:var(--tone);cursor:pointer}
.clip-toggle:hover{--fill:#1b2c40}
.clip-toggle .icon{width:14px;height:14px}
.clip-toggle[data-state="playing"] .play,.clip-toggle[data-state="paused"] .pause{display:none}
@container features (max-width:17rem) or (min-width:60rem){.feature{grid-template:"phone" "label" "title" "text"/minmax(0,1fr);align-content:start}.feature .phone{margin-bottom:16px}.feature-label{margin-bottom:8px}}
@container features (max-width:17rem){.feature .phone{width:min(100%,224px)}}
@container features (min-width:34rem){.feature-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}}
@container features (min-width:60rem){.feature-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.feature .phone{max-width:none}}

.how-grid{display:grid;gap:48px;align-items:center}
.how-media{width:100%;max-width:304px;margin:0}
.how-media figcaption{margin-top:16px;color:var(--muted);font-size:.8125rem}
.how-media figcaption strong{display:block;color:var(--text);font:600 .75rem/1.8 var(--mono);letter-spacing:.08em}
.how-media a{color:var(--mint)}
.steps{margin:32px 0 0;padding:0;list-style:none;counter-reset:step}
.steps li{counter-increment:step;position:relative;min-height:2.5rem;padding:.4rem 0 28px 3.75rem;color:var(--muted)}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;background:#1b3340;color:var(--mint);font:700 .875rem/1 var(--mono)}
.steps li::after{content:"";position:absolute;top:calc(2.5rem + 6px);bottom:6px;left:calc(1.25rem - .5px);border-left:1px dashed var(--line)}
.steps li:last-child{padding-bottom:0}.steps li:last-child::after{content:none}
.steps strong{display:block;color:var(--text);font-size:1.0625rem;line-height:1.6}

.faq-grid{display:grid;gap:8px}
.faq-grid .section-head{margin-bottom:32px}
.faq{display:grid;gap:12px}
.faq .panel:has(details[open]){--accent:#85f0d166}
.faq details p{margin:0;padding:0 20px 20px;color:var(--muted);font-size:.9375rem}
.faq details a{color:var(--mint)}
summary{position:relative;display:block;min-height:56px;padding:15px 64px 15px 20px;cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;top:50%;right:18px;display:grid;place-items:center;width:28px;height:28px;transform:translateY(-50%);border:1px solid #85f0d166;color:var(--mint);font:700 1.125rem/1 var(--mono)}
details[open]>summary::after{content:"−"}
summary:hover{color:var(--mint)}

.download{--c:12px;--h:6px;--accent:#85f0d166;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px 32px;padding:40px}
.download>img{--c:8px;--h:4px;width:88px}
.download h2{margin-bottom:8px;font-size:clamp(1.4rem,1.2rem + .8vw,1.875rem)}
.download p{margin:0;color:var(--muted)}
.download .app-store-badge{grid-column:2;justify-self:start}

@container page (min-width:52rem){
.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
.hero-art{justify-self:end}
.how-grid{grid-template-columns:minmax(0,304px) minmax(0,1fr);gap:80px}
.how-media{order:-1}
.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.faq-grid .section-head{margin-bottom:0}
.download{grid-template-columns:auto minmax(0,1fr) auto}
.download .app-store-badge{grid-column:auto}
}

/* Support, sign-in, invitation, developer and legal pages share one reading column. */
body:has(.document) .shell{width:min(46rem,100% - 2 * var(--gutter))}
.document{padding-block:64px 96px}
.document h1{margin-bottom:24px;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem)}
.document h2{position:relative;margin:48px 0 12px;padding:28px 0 0 20px;border-top:1px solid var(--line);font-size:1.25rem}
.document h2::before{content:"";position:absolute;top:calc(28px + .725em - 4px);left:0;width:8px;height:8px;background:var(--mint)}
.document :where(p,li){color:var(--muted)}
.document :where(p,li) a,.document .eyebrow{color:var(--mint)}
.document .steps li{color:var(--text)}
.document .actions,.document>.button{margin-block:24px}
.document .actions+p{margin-top:40px}
.document ol:not(.steps),.document ul:not(.link-list){padding-left:1.5em}
.document li::marker{color:var(--mint)}
.callout{--accent:#f5dca766;margin-block:24px;padding:16px 20px}
.callout p{margin:0;color:var(--text)}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:16px 32px;margin-block:20px 32px;padding:24px}
.contact div{min-width:0}
.contact dt{color:var(--muted);font:600 .75rem/1.8 var(--mono);letter-spacing:.12em}
.contact dd{margin:0;color:var(--text);font-weight:700}
.contact a{color:var(--mint)}
.link-list{display:flex;flex-wrap:wrap;gap:0 24px;margin:48px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.link-list li{display:flex}
.link-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--text)}
.link-list a:hover{color:var(--mint)}

/* Contact form: shared panels, palette and button. contact.js only relies on element IDs. */
.callout h2{margin:0 0 8px;padding:0 0 0 20px;border:0;color:var(--gold);font-size:1.0625rem}
.callout h2::before{top:calc(.725em - 4px);background:var(--gold)}
.contact-form{margin-top:40px}
.contact-form fieldset{min-width:0;margin:0;padding:0;border:0}
.contact-form fieldset:disabled{opacity:.6;cursor:wait}
.form-field{margin-bottom:28px}
.form-field label{display:block;margin-bottom:8px;font-weight:700}
.field-required{display:inline-block;margin-left:.5em;color:var(--gold);font:600 .75rem/1.6 var(--mono);letter-spacing:.08em}
.contact-form :is(select,textarea){display:block;width:100%;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--deep);color:var(--text);font:inherit;scroll-margin-block:24px}
.contact-form :is(select,textarea):hover{border-color:#85f0d199}
.contact-form :is(select,textarea):focus{border-color:var(--mint)}
.contact-form select{min-height:52px}
.contact-form textarea{min-height:10em;resize:vertical}
.contact-form .field-help{margin:0 0 8px;font-size:.875rem}
.contact-form .character-count{margin:8px 0 0;font:.75rem/1.8 var(--mono);text-align:right}
.contact-consent{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;padding:16px 20px;cursor:pointer}
.contact-consent input{flex:none;width:1.375rem;height:1.375rem;margin:.2rem 0 0;accent-color:var(--mint);cursor:pointer}
.contact-form .button{width:100%;margin-top:24px;border:0;border-radius:0;background:none;cursor:pointer}
.contact-status:not(:empty){margin:24px 0 0;padding:16px 20px;font-weight:600}
.contact-status[data-state="pending"]{color:var(--text)}
.contact-status[data-state="success"]{--accent:#85f0d1b3;color:var(--mint)}
.contact-status[data-state="error"]{--accent:#f5dca7b3;color:var(--gold)}

/* Legal documents keep their text; only the shared styles apply. */
.legal-navigation{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;font-size:.875rem}
.legal-navigation a{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.1em;color:var(--muted);font-weight:600;text-decoration:none}
.legal-navigation a:hover{--fill:#1d2f45;color:var(--text)}
.legal-navigation [aria-current="page"]{--accent:#85f0d1b3;--fill:#172938;color:var(--mint)}
.legal-document h2{scroll-margin-top:24px}
.legal-document li>p{margin:.5em 0}
.legal-document li+li{margin-top:.5em}
.legal-date{margin:0 0 32px;font:.875rem/1.8 var(--mono)}
@media(max-width:720px){
:root{--gutter:20px}
.header{padding-block:10px 4px}
.brand{margin-left:-19px}.brand img{width:128px}
.header-nav{order:3;flex-basis:100%;margin-inline:-12px}
.hero{padding-block:40px 72px}
.hero-art{gap:16px}
.hero-art figure:nth-child(2){margin-top:48px}
.section{padding-block:72px}
.section-head{margin-bottom:40px}
.how-media{max-width:240px}
.download{grid-template-columns:minmax(0,1fr);padding:28px 24px}
.download>img{width:64px}
.download .app-store-badge{grid-column:auto}
.footer{flex-direction:column;align-items:flex-start}
.document{padding-block:40px 72px}
.contact{padding:20px}
}
@media(max-width:400px){.actions .button{flex:1 1 100%}.document>.button{display:flex}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-contrast:more){:root{--line:#4f9c9d;--muted:#c3dbe4}}
@media(forced-colors:active){:is(.panel,.button,.clip-toggle,.legal-navigation a)::before,:is(.panel,.button,.clip-toggle,.legal-navigation a)::after{content:none}:is(.panel,.button,.clip-toggle,.legal-navigation a){border:1px solid CanvasText}.button{filter:none}}