/* Class Portal User Guide: the Apple user-guide idiom. White page, one reading column, phone
   beside the text, hairlines between parts. Shares the phone frame with the site. */
:root{
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ink:#1d1d1f;--ink2:#6e6e73;--rule:#d2d2d7;--paper:#fff;--fill:#f5f5f7;--blue:#0066cc;--warn:#b25000;--warnbg:#fff7ed;
  --app:#f2f2f7;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--ui);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.gwrap{width:min(980px,calc(100% - 44px));margin:0 auto}
.gtop{border-bottom:1px solid var(--rule);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:sticky;top:0;z-index:5}
.gtop .gwrap{display:flex;align-items:center;justify-content:space-between;height:52px}
.gbrand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:17px;white-space:nowrap}
.gbrand img{width:24px;height:24px;border-radius:6px}
.gbrand span{color:var(--ink2);font-weight:400;margin-left:4px}
.gopen{white-space:nowrap;font-size:14px;background:var(--blue);color:#fff;border-radius:999px;padding:7px 14px;font-weight:500}
.gopen:hover{text-decoration:none;background:#0055b3}
main{padding:44px 0 20px}
h1{font-size:40px;font-weight:600;letter-spacing:-.003em;line-height:1.1;margin:0 0 14px}
.intro{font-size:19px;color:var(--ink);max-width:62ch;margin:0 0 18px}
h2{font-size:28px;font-weight:600;letter-spacing:.007em;line-height:1.14;margin:0 0 12px}
h3{font-size:19px;font-weight:600;margin:20px 0 6px}
p{margin:0 0 12px}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
li::marker{color:var(--ink2)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:15px;background:var(--fill);padding:2px 6px;border-radius:6px}
.note{background:var(--fill);border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.5;margin-top:16px}
.launchnote{background:var(--warnbg);border:1px solid #f3d9b8;border-radius:12px;padding:12px 16px;font-size:16px;line-height:1.45;margin:0 0 22px}
.launchnote[hidden]{display:none}
.eyebrow{font-size:15px;font-weight:600;color:var(--warn);margin:0 0 6px;letter-spacing:0}
.row{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;padding:44px 0;border-top:1px solid var(--rule)}
.row.flip{grid-template-columns:1fr 300px}
.row.flip .media{order:2}
.row .media{display:grid;place-items:start center}
.row .text.wide{grid-column:1 / -1;max-width:62ch}
.row.last{border-bottom:1px solid var(--rule)}
.row.important .text{padding-left:18px;border-left:3px solid var(--warn)}

/* Share-sheet figure: the one screen we cannot capture, drawn in the idiom */
.sheet{margin:0;width:300px;background:#f2f2f7;border-radius:22px;padding:12px 0 6px;box-shadow:0 20px 50px rgba(0,0,0,.14);font-size:16px}
.sheethead{display:flex;align-items:center;gap:12px;padding:6px 18px 14px;border-bottom:1px solid #d9d9de}
.sheethead .sq{width:36px;height:36px;border-radius:9px;background:#000 url(assets/logo-mark-128.png) center/70% no-repeat;flex:0 0 auto}
.sheethead span:not(.sq){display:flex;flex-direction:column;line-height:1.2}
.sheethead small{color:var(--ink2);font-size:12px}
.sheetrow{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #e3e3e8;color:#000}
.sheetrow:last-child{border-bottom:0}
.sheetrow.hl{background:#fff;border-radius:12px;margin:0 8px;box-shadow:0 0 0 2px var(--blue);border-bottom:0;font-weight:600}
.ic{width:22px;height:22px;display:block;background-color:#3a3a3c;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic.copy{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E")}
.ic.list{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")}
.ic.book{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E")}
.ic.star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3l2.8 5.8 6.2.9-4.5 4.4 1.1 6.3L12 17.5 6.4 20.4l1.1-6.3L3 9.7l6.2-.9z'/%3E%3C/svg%3E")}
.ic.plus{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.ic.find{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")}
.glyph.share{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;background-color:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M7 8l5-5 5 5'/%3E%3Cpath d='M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M7 8l5-5 5 5'/%3E%3Cpath d='M5 12v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8'/%3E%3C/svg%3E") center/contain no-repeat}

/* Phone frame (same geometry as the site; light screens here) */
.phone{position:relative;width:300px;max-width:100%;aspect-ratio:1470/3000;container-type:inline-size}
.phone .frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.phone .screen{position:absolute;top:2.2%;bottom:2.2%;left:5.1%;right:5.1%;border-radius:15.2%/7%;overflow:hidden;background:var(--app);z-index:1;display:flex;flex-direction:column;color:#000}
.phone .screen .sb{flex:0 0 6.17%;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 10.2% 0 11.3%;font-size:3.5cqw;font-weight:600;letter-spacing:-.01em;line-height:1;transform:translateY(6%)}
.phone .screen .sb .ic{width:auto;height:auto;background:none;-webkit-mask:none;mask:none;display:flex;gap:1.5cqw;align-items:center}
.phone .screen .sb svg{height:2.7cqw;width:auto;fill:currentColor;display:block}
.phone .screen .sb svg:last-child{height:2.9cqw}
.phone .screen .shot{flex:1 1 auto;position:relative;min-height:0}
.phone .screen .shot img,.phone .screen .shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:var(--app)}
.phone .screen .hi{flex:0 0 3.56%;display:grid;place-items:center}
.phone .screen .hi::after{content:"";width:36%;height:1.4cqw;border-radius:999px;background:rgba(0,0,0,.85)}
.phone .island{position:absolute;left:40.5%;top:3.67%;width:19%;height:3.53%;border-radius:999px;background:#000;z-index:4;pointer-events:none}
.phone .island::after{content:"";position:absolute;right:12%;top:50%;width:19%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2f4a 0,#0b0d18 55%,#000 75%)}
.phone .replay{display:none}

.gfoot{padding:28px 0 56px;color:var(--ink2);font-size:14px}
.gfoot .legal{font-size:12.5px;line-height:1.5}

@media (max-width:760px){
  .row,.row.flip{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .row.flip .media{order:0}
  .row .media{place-items:start center}
  .phone,.sheet{width:min(280px,80vw)}
  .gbrand span{display:none}
  h1{font-size:34px}
  h2{font-size:24px}
  .row.important .text{padding-left:14px}
}