/* Phonido home page, sections 3 to 10. Builds on home.css tokens. Motion: reveal, hover, bench on tap, the Rope. */
.sec a:not(.btn){text-underline-offset:4px}
.narrow{max-width:820px}
.plain{max-width:36em;margin:22px 0 4px;font-size:19px}
.tlink{display:inline-block;min-height:44px;line-height:44px;font-weight:700;color:var(--clay2)}

/* 3 how reading works */
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,30px);margin:34px 0 clamp(36px,5vw,60px)}
.pan{margin:0;position:relative}
.pan svg{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 4px 14px rgba(31,59,58,.06)}
.pan figcaption{padding:16px 4px 0}
.pan h3{font-size:22px}
.pan p{margin:6px 0 0;font-size:17px;line-height:1.5;color:var(--ink2)}
.benchbox{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,36px);box-shadow:var(--shadow)}
.benchbox h3{font-size:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;border:1.5px solid #b8bfb3;background:transparent;color:var(--pine);font:700 17px/1 var(--body);cursor:pointer}
.chip[aria-pressed=true]{background:var(--pine);color:var(--snow);border-color:var(--pine)}
.tray,.slots{display:flex;flex-wrap:wrap;gap:10px}
.tray{margin-bottom:26px}
.stile{width:clamp(52px,12vw,62px);height:clamp(52px,12vw,62px);border-radius:12px;border:1px solid var(--line);background:var(--birch);color:var(--pine);font:700 clamp(24px,5vw,30px)/1 var(--body);cursor:pointer;box-shadow:0 3px 0 #d3cab8;transition:transform .2s var(--ease),opacity .2s}
.stile:hover:not(:disabled){transform:translateY(-3px)}
.stile:disabled{opacity:.3;cursor:default;box-shadow:none}
.slotw{display:flex;flex-direction:column;align-items:center;gap:8px}
.slot{position:relative;width:clamp(72px,18vw,88px);height:clamp(84px,20vw,102px);border-radius:14px;border:2px dashed #aeb9b0;background:var(--snow);color:var(--pine);font:700 clamp(32px,7vw,42px)/1 var(--body);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.slot.full{border:2px solid var(--fjord);background:var(--mist)}
.slot:disabled{cursor:default}
.slot::after{content:"";position:absolute;inset:-7px;border-radius:20px;background:radial-gradient(circle,rgba(231,196,120,.7),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.slot.lit::after{opacity:1}
.sph{min-height:1.4em;font:700 clamp(18px,3vw,21px)/1.4 var(--body);color:var(--fjord);opacity:0;transition:opacity .3s}
.sph.on{opacity:1}
.sweep3{height:4px;width:100%;max-width:280px;border-radius:4px;background:linear-gradient(90deg,var(--fjord),var(--butter));transform:scaleX(0);transform-origin:0 50%;margin:12px 0 12px;transition:transform .8s var(--ease)}
.sweep3.run{transform:scaleX(1)}
.say3{min-height:3.2em;margin:0 0 14px;font-size:clamp(18px,2vw,20px);line-height:1.45;max-width:32em}
.say3 b{color:var(--clay2)}

/* 4 the rope */
.rope3{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,70px)}
.ropeh{position:relative}
.rope-pin{position:relative}
.rope-head{position:relative;z-index:2}
#ropeCv{display:block;width:100%;height:300px;margin-top:14px}
.rope-keys{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;max-width:var(--wrap);margin:6px auto 0;padding:0 var(--gut)}
.key h3{font-size:19px;margin-bottom:6px}
.key.lg h3{color:var(--clay2)}.key.wk h3{color:var(--fjord)}
.key ul{list-style:none;margin:0;padding:0;font-size:16px;line-height:1.55}
.rope-end{max-width:var(--wrap);margin:14px auto 0;padding:0 var(--gut);font-size:19px;line-height:1.5}
.rope-end b{color:var(--clay2)}
.rope-credit{max-width:var(--wrap);margin:10px auto 0;padding:0 var(--gut);font-size:14.5px;color:var(--ink2)}
.rope-credit a{color:var(--clay2);font-weight:700}
@media (max-width:560px){.rope-keys{grid-template-columns:1fr}}
.rope3.grow .ropeh{height:220vh}
.rope3.grow .rope-pin{position:sticky;top:72px;height:calc(100svh - 72px);min-height:540px;overflow:hidden}
.rope3.grow #ropeCv{position:absolute;inset:0;height:100%;margin:0}
.rope3.grow .rope-head{padding-top:clamp(14px,3vh,34px)}
.rope3.grow .rope-keys{position:absolute;z-index:2;display:block;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));top:0;bottom:0;width:230px;margin:0;padding:0;pointer-events:none}
.rope3.grow .key{position:absolute;left:0;width:100%}
.rope3.grow .key.lg{top:30%}.rope3.grow .key.wk{top:64%}
.rope3.grow .rope-end{position:absolute;z-index:2;right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));bottom:clamp(40px,8vh,80px);margin:0;padding:0;max-width:20em;opacity:0;transition:opacity .9s ease}
.rope3.grow .rope-end.on{opacity:1}
.rope3.grow .rope-credit{position:absolute;z-index:2;left:0;right:0;bottom:10px;margin:0 auto;padding:0 var(--gut);text-align:center}

/* 5 programmes */
.progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,34px);margin-top:36px}
.prog{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:14px 14px 24px;box-shadow:0 4px 14px rgba(31,59,58,.05)}
.prog .frame{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:linear-gradient(#cfe0e6,#eef3f2);display:flex;align-items:flex-end;justify-content:center;margin-bottom:18px}
.prog .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.prog .frame.small img{width:86%;height:auto;object-fit:contain;margin-bottom:6%}
.prog .eyebrow,.prog h3,.prog p{padding:0 10px}
.eyebrow{margin:0 0 6px;font:700 14.5px/1.3 var(--body);color:var(--fjord)}
.prog h3{font-size:25px}
.prog p:last-child{margin:8px 0 0;font-size:17px;line-height:1.55;color:var(--ink2)}

/* 6 try to read */
.decode{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,34px);margin-top:28px;box-shadow:var(--shadow)}
.glyphline{display:flex;flex-wrap:wrap;gap:14px clamp(20px,4vw,40px);margin-bottom:22px}
.gword{display:flex;gap:6px}
.gcol{display:flex;flex-direction:column;align-items:center;gap:4px}
.glyph{width:52px;height:52px;border-radius:12px;border:1.5px solid #b8bfb3;background:var(--snow);padding:6px;cursor:pointer;color:var(--pine)}
.glyph svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.glyph svg .fl{fill:currentColor;stroke:none}
.glyph.known{background:var(--mist);border-color:var(--fjord);color:var(--fjord)}
.gs{min-height:1.5em;font:700 20px/1.5 var(--body);color:var(--clay2);opacity:0;transition:opacity .4s}
.gs.on{opacity:1}
.keyh{font-size:19px;margin-bottom:8px}
.keylist{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;margin:0 0 6px;padding:0;list-style:none}
.keylist li{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border-radius:999px;background:var(--birch);font-weight:700}
.keylist svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.keylist svg .fl{fill:currentColor;stroke:none}
.solved{margin:6px 0 16px;font:500 clamp(24px,3vw,32px)/1.3 var(--display);color:var(--clay2);min-height:1.3em;opacity:0;transition:opacity .6s}
.solved.on{opacity:1}

/* 7 shelf */
.shelf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px 14px;margin:36px 0 0;align-items:end}
.cov{margin:0;transition:transform .3s var(--ease)}
@media (max-width:1000px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px;margin-inline:auto}}
.cov img{width:100%;height:auto;border-radius:3px 8px 8px 3px;box-shadow:0 12px 24px rgba(31,59,58,.2)}
.cov:hover{transform:translateY(-6px)}
.plank{height:10px;border-radius:6px;background:linear-gradient(#d8c8a4,#c6b58e);margin:14px 0 44px;box-shadow:0 8px 16px rgba(31,59,58,.1)}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin:0;padding:0;list-style:none;text-align:center;color:var(--ink2);line-height:1.4}
.figs b{display:block;font:500 clamp(24px,2.7vw,34px)/1.15 var(--display);color:var(--pine);margin-bottom:4px}

/* 8 promises */
.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);margin-top:36px}
.pm{padding:26px 0 30px;border-top:1px solid var(--line)}
.pm h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:10px}
.pm p{margin:0;color:var(--ink2);line-height:1.6}

/* 9 teachers */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:42px 0 12px;padding:0;list-style:none;position:relative;text-align:center;font:500 clamp(17px,2vw,22px)/1.2 var(--display)}
.steps::before{content:"";position:absolute;left:12.5%;right:12.5%;top:11px;height:2px;background:#b3c0ac}
.steps li{position:relative;padding-top:38px}
.steps i{position:absolute;left:50%;top:0;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--snow);border:4px solid var(--fjord)}
.steps li:last-child i{background:var(--butter);border-color:#c9a14a}

/* 10 enrol band + footer */
.enrolband{position:relative;overflow:hidden;padding-bottom:0}
.enrolband .wrap{position:relative;z-index:1;text-align:center}
.enrolband h2{max-width:20em;margin:0 auto}
.eacts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.enrolband .btn.alt{background:var(--white)}
.hz{display:block;width:100%;height:clamp(140px,18vw,240px);object-fit:cover;object-position:50% 88%;margin-top:clamp(30px,5vw,56px);-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%);pointer-events:none}

@media (max-width:900px){
  .flow3{grid-template-columns:minmax(0,1fr);max-width:420px}
  .progs{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}
  .promises{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.figs{grid-template-columns:minmax(0,1fr)}.steps{font-size:16px}}
html.calm .sweep3{transition:none}