/* content pages: styles that only these pages need. Shared pieces live in ../tweetcell.css. */

/* Glyphs of the app icon font that the shared sheet does not name yet. */
.i-idcard::before{content:"\e039"} .i-swap::before{content:"\e011"} .i-phonecheck::before{content:"\e035"} .i-processing::before{content:"\e04b"}
.i-share::before{content:"\e026"} .i-copy::before{content:"\e024"} .i-upload::before{content:"\e02d"} .i-camera::before{content:"\e02f"} .i-gallery::before{content:"\e030"}
.i-calendar::before{content:"\e03f"} .i-download::before{content:"\e02e"} .i-trophy::before{content:"\e007"} .i-chart::before{content:"\e004"} .i-target::before{content:"\e006"}
.i-pending::before{content:"\e04a"} .i-back::before{content:"\e013"} .i-warning::before{content:"\e048"} .i-bank::before{content:"\e040"} .i-qr::before{content:"\e053"}

/* WhatsApp action: the brand green the app uses for the same action. */
.btn--wa { color: #fff; background: linear-gradient(180deg, #2BD46F, #128C4B); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .2), 0 12px 28px -12px rgb(18 140 75 / .75); }
.btn--wa img { width: 24px; height: 24px; }

/* Figures strip under a page header. */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -46px var(--shadow); }
.figures > div { padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 6px; align-content: center; } .figures > div + div { border-inline-start: 1px solid var(--line); }
.bignum { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; justify-self: start; }
.bignum sup { font-size: .46em; font-weight: 700; color: var(--accent); vertical-align: top; position: relative; top: .2em; margin-inline-end: 3px; }
@media (max-width: 640px) { .figures { grid-template-columns: 1fr; } .figures > div + div { border-inline-start: 0; border-block-start: 1px solid var(--line); } }

/* A service in the list. */
.svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.svc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 26px 44px -30px var(--shadow); }
.svc h3 { font-size: 16px; font-weight: 650; line-height: 1.55; } .svc .no { display: block; font-size: 12px; font-weight: 600; color: var(--faint); direction: ltr; font-variant-numeric: tabular-nums; }
[dir="rtl"] .svc .no { text-align: right; }
.svc .more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; } .svc .more .tci { font-size: 15px; transition: translate .3s var(--ease); }
[dir="rtl"] .svc:hover .more .tci { translate: -4px 0; } [dir="ltr"] .svc:hover .more .tci { translate: 4px 0; }
@media (max-width: 480px) { .svc .more span { display: none; } }

/* Home internet header: the router artwork in both themes, copy on the reading side. */
.ihero { position: relative; isolation: isolate; overflow: hidden; margin-block-start: 96px; border-radius: var(--r-xl); min-height: 520px; padding: clamp(26px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 22px; background: var(--bg-2); box-shadow: 0 40px 80px -50px var(--shadow); }
.ihero .tile-media img { object-position: 60% center; } .ihero > :not(.tile-media) { max-width: 560px; } .ihero .display { line-height: 1.26; }
.ihero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to left, var(--bg-2) 0, color-mix(in oklab, var(--bg-2) 86%, transparent) 40%, transparent 68%); }
[dir="ltr"] .ihero::before { background: linear-gradient(to right, var(--bg-2) 0, color-mix(in oklab, var(--bg-2) 86%, transparent) 40%, transparent 68%); }
.ihero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .12)), inset 0 1px 0 rgb(255 255 255 / .45); }
@media (max-width: 960px) {
  .ihero { margin-block-start: 86px; min-height: 0; border-radius: var(--r-lg); padding-block-start: 250px; }
  .ihero .tile-media { inset: 0 0 auto 0; height: 300px; } .ihero .tile-media img { object-position: 14% center; } .ihero > :not(.tile-media) { max-width: none; }
  .ihero::before, [dir="ltr"] .ihero::before { background: linear-gradient(to bottom, transparent 0, transparent 120px, var(--bg-2) 286px); }
}

/* Numbered notes and required marks in forms. */
.mini { display: grid; gap: 14px; counter-reset: mini; } .mini li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.mini li::before { counter-increment: mini; content: counter(mini); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.req { font-size: 11px; font-weight: 600; color: var(--accent); margin-inline-start: 6px; } .opt-mark { font-size: 11px; font-weight: 500; color: var(--faint); margin-inline-start: 6px; }
.fsec { display: grid; gap: 18px; padding-block: 28px; border-block-start: 1px solid var(--line); } .fsec:first-child { border-block-start: 0; padding-block-start: 0; }
.fsec-head { display: flex; gap: 14px; align-items: flex-start; } .fsec-head h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.fsec-head b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #7C24FF, #5A00D4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.progress { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in oklab, var(--ink) 9%, transparent); } .progress i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: linear-gradient(90deg, #7C24FF, #FECC0F); }
[dir="rtl"] .progress i { background: linear-gradient(270deg, #7C24FF, #FECC0F); }

/* News. */
.acard { display: grid; gap: 18px; align-content: start; padding: 12px 12px 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.acard:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--line), 0 36px 60px -36px var(--shadow); }
.acard-shot { border-radius: 22px; overflow: hidden; aspect-ratio: 1000 / 370; background: var(--bg-2); } .acard-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .acard:hover .acard-shot img { transform: scale(1.05); }
.acard > div:last-child { display: grid; gap: 12px; justify-items: start; padding-inline: 14px; }
.ahero { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1000 / 370; background: var(--bg-2); box-shadow: 0 40px 80px -50px var(--shadow), inset 0 0 0 1px var(--line); } .ahero img { width: 100%; height: 100%; object-fit: cover; }
.share { display: flex; flex-wrap: wrap; gap: 10px; } .share a, .share button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink); transition: transform .3s var(--ease); }
.share a:hover, .share button:hover { transform: translateY(-3px); } .share img { width: 44px; height: 44px; }

/* About. */
.stage { border-radius: var(--r-xl); padding: clamp(18px, 3vw, 44px); display: grid; gap: 14px; }
.era { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(22px, 3vw, 36px); border-block-start: 1px solid var(--line); } .era:last-child { border-block-end: 1px solid var(--line); }
.era .bignum { color: var(--accent); font-size: clamp(44px, 6vw, 84px); } @media (max-width: 640px) { .era { grid-template-columns: 1fr; } }
.value { display: grid; gap: 16px; align-content: space-between; min-height: 200px; } .value h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 750; }

/* Contact. */
.point { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.point h3 { font-size: 15px; font-weight: 650; line-height: 1.5; } @media (max-width: 480px) { .point { grid-template-columns: auto minmax(0, 1fr); } .point > :last-child { grid-column: 1 / -1; justify-self: start; } }
.idgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; } .idgrid dt { display: block; font-size: 12.5px; color: var(--faint); margin-block-end: 4px; } .idgrid dd { display: block; font-size: 15px; font-weight: 600; line-height: 1.7; }
[dir="rtl"] .idgrid dt, [dir="rtl"] .idgrid dd { text-align: right; }
.idgrid .wide { grid-column: 1 / -1; } @media (max-width: 640px) { .idgrid { grid-template-columns: 1fr; } }

/* Legal documents. */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; } .doc > aside { position: sticky; top: 108px; display: grid; gap: 14px; }
.doc .prose h2 { padding-block-start: .4em; } .doc .prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.4em; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); } .doc > aside { position: static; } .doc .toc { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; padding-block-end: 4px; } }
@media print { .tabs, .doc > aside, .noprint, .footer, .wordmark { display: none !important; } .doc { display: block; } .pagehead { padding-block-start: 0; } }

/* A form beside its introduction. */
.formsplit { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .formsplit > :first-child { position: sticky; top: 120px; }
@media (max-width: 1020px) { .formsplit { grid-template-columns: minmax(0, 1fr); } .formsplit > :first-child { position: static; } }

/* The shared field styles do not carry the page typeface into textareas and selects. */
.textarea, .select { font-family: inherit; }
/* About header: copy beside the brand animation. */
.ahead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 80px); align-items: center; width: 100%; }
.ahead > :first-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: start; } .ahead .display { font-size: clamp(32px, 4.4vw, 62px); line-height: 1.24; }
@media (max-width: 900px) { .ahead { grid-template-columns: minmax(0, 1fr); } }
/* Long titles and numbered clauses. */
.title-long { line-height: 1.32; } .hno { color: var(--accent); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* The 3D SIM on the services header; on phones the shared page-header rule moves it under the copy. */
.sim-art { inset: auto; inset-block-end: -90px; inset-inline-end: -40px; width: min(46%, 480px); height: 520px; }
.crumbs { flex-wrap: wrap; row-gap: 2px; }

/* ---- Blade ports of the content pages (package 3.1.0) ---- */
/* About: service notes, the film beside its statement, the app strip. */
.about-note { display: grid; gap: 14px; align-content: start; justify-items: start; }
.about-film { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.about-film > :last-child { display: grid; gap: 22px; justify-items: start; }
.about-video { border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: 0 40px 80px -50px var(--shadow), inset 0 0 0 1px var(--line); }
.about-video video { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; background: #000; }
.about-app { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 24px clamp(24px, 4vw, 64px); }
@media (max-width: 860px) { .about-film, .about-app { grid-template-columns: minmax(0, 1fr); } }

/* Contact: social links row, map picture, selling-point pickers and results, video. */
.contact-social { justify-content: space-between; flex-wrap: wrap; } .contact-social .share { gap: 8px; } .contact-social .share a, .contact-social .share img { width: 40px; height: 40px; }
.contact-map { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); } .contact-map img { display: block; width: 100%; height: auto; }
.points-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: 10px; }
@media (max-width: 720px) { .points-pick { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.point { color: inherit; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } a.point:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 26px 44px -30px var(--shadow); }
.point .thumb { width: 56px; height: 56px; border-radius: 16px; } .point p { line-height: 1.7; }
#selling-points-result:empty { display: none; } #selling-points-result { margin-block-start: 4px; }
.contact-video { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 80px -50px var(--shadow), inset 0 0 0 1px var(--line); }
.contact-video iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .contact-video { border-radius: var(--r-lg); } }

/* Legal text: spacing inside each language section; a section keeps its own direction. */
.prose section > * + * { margin-block-start: 1.1em; } .prose section > :first-child { margin-block-start: 0; padding-block-start: 0; }
.prose section[dir="ltr"] { direction: ltr; text-align: left; } .prose section[dir="rtl"] { direction: rtl; text-align: right; }
.prose section h2 { margin-block-start: 1.9em; }
/* Article body written in the editor: keep wide content inside the column. */
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; } .prose table { display: block; max-width: 100%; overflow-x: auto; }
/* FAQ page on phones: the questions come first, the support panel and links after them. */
@media (max-width: 900px) { .faq-page > :first-child { order: 2; } }
/* Printing a legal text: the floating navigation stays off the paper. */
@media print { .nav-wrap, .dock, .tc3-flash { display: none !important; } .prose { max-width: none; } }